Как отправить html-форму без перенаправления?

Ответ 1

чтобы достичь желаемого, вам нужно использовать jquery ajax, как показано ниже:

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url:'/Car/Edit/17/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            //whatever you wanna do after the form is successfully submitted
        }
    });
});

ОБНОВЛЕНО: (основываясь на комментариях ниже)

попробуйте это:

function SubForm(e){
    e.preventDefault();
    var url=$(this).closest('form').attr('action'),
    data=$(this).closest('form').serialize();
    $.ajax({
        url:url,
        type:'post',
        data:data,
        success:function(){
           //whatever you wanna do after the form is successfully submitted
       }
   });
}

ОБНОВЛЕНИЕ 2 (ОП добавил эту часть, так как это было его окончательное решение)

Это сработало без нареканий. Я вызываю эту функцию из Html.ActionLink(...)

function SubForm (){
    $.ajax({
        url:'/Person/Edit/@Model.Id/',
        type:'post',
        data:$('#myForm').serialize(),
        success:function(){
            alert("worked");
        }
    });
}

Ответ 2

Вы можете добиться этого, перенаправив форму action в <iframe>. Он не требует скриптов JavaScript или любого другого типа.

<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>

<form action="submitscript.php" target="dummyframe">
    <!-- form body here -->
</form>

если вы действительно хитрый, вы можете возиться со значением position=absolute и z-index в CSS, чтобы убедиться, что кадр не отображается. Если это имеет большое значение, хотя, возможно, вам будет лучше использовать AJAX.

Ответ 3

Поместите скрытый iFrame в нижней части страницы и target в форму:

<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>

<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>

Быстро и легко. Имейте в виду, что, хотя атрибут target по-прежнему широко поддерживается (поддерживается в HTML5), он устарел в HTML 4.01. Таким образом, вы действительно должны использовать ajax для будущих доказательств.

Ответ 4

Хорошо, я не собираюсь говорить вам волшебный способ сделать это, потому что нет. Если у вас есть атрибут действия для элемента формы, он будет перенаправлен.

Если вы не хотите, чтобы он перенаправлял, просто не устанавливайте никаких действий и не устанавливайте onsubmit="someFunction();"

В вашем someFunction() вы делаете все, что хотите (с AJAX или нет), а в конце добавьте return false;, чтобы сообщить браузеру не отправлять форму...

Ответ 5

Так как все текущие ответы используют jQuery или трюки с iframe, я полагаю, нет ничего плохого в том, чтобы добавить метод с простым JavaScript:

function formSubmit(event) {
  var url = "/post/url/here";
  var request = new XMLHttpRequest();
  request.open('POST', url, true);
  request.onload = function() { // request successful
  // we can use server response to our request now
    console.log(request.responseText);
  };

  request.onerror = function() {
    // request failed
  };

  request.send(new FormData(event.target)); // create FormData from form that triggered event
  event.preventDefault();
}

// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
  document.getElementById(formId).addEventListener("submit", formSubmit);
}

Ответ 6

Вам нужен ajax, чтобы это произошло. Что-то вроде этого

$(document).ready(function(){
    $("#myform").on('submit', function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var contact = $("#contact").val();

        var dataString = 'name1='+ name + '&email1='+ email + '&password1='+ password + '&contact1='+ contact;
        if(name==''||email==''||password==''||contact=='')
        {
            alert("Please Fill All Fields");
        }
        else
        {
            // AJAX Code To Submit Form.
            $.ajax({
                type: "POST",
                url: "ajaxsubmit.php",
                data: dataString,
                cache: false,
                success: function(result){
                    alert(result);
                }
           });
        }
        return false;
    });
});

Ответ 7

См. функцию jQuery post.

Я бы создал кнопку и установил onClickListener ($('#button').on('click', function(){});) и отправил данные в эту функцию.

Также см. функцию preventDefault, jQuery!

Ответ 8

Желаемый эффект также может быть достигнут путем перемещения кнопки отправки вне формы, как описано здесь:

Запретить перезагрузку и перенаправление страницы в форме submit ajax/jquery

Вот так:

<form id="getPatientsForm">
    Enter URL for patient server
    <br/><br/>
    <input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
    <input name="patientRootUrl" size="100"></input>
    <br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>

Ответ 9

Используя этот фрагмент, вы можете отправить форму и избежать перенаправления. Вместо этого вы можете передать функцию успеха в качестве аргумента и делать все, что захотите.

function submitForm(form, successFn){
    if (form.getAttribute("id")!='' || form.getAttribute("id")!=null){
        var id = form.getAttribute("id");
    } else {
        console.log("Form id attribute was not set; the form cannot be serialized");
    }

    $.ajax({
        type: form.method,
        url: form.action,
        data: $(id).serializeArray(),
        dataType: "json",
        success: successFn,
        //error: errorFn(data)
    });
}

А потом просто сделай:

var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
    console.log("Form submitted");
});

Ответ 10

Если вы управляете серверной частью, тогда используйте что-то вроде response.redirect вместо response.send

Вы можете создать собственные HTML-страницы для этого или просто перенаправить на то, что у вас уже есть

в express.js:

const handler = (req, res) => {
  const { body } = req
  handleResponse(body)
  .then(data => {
    console.log(data)
    res.redirect('https://yoursite.com/ok.html')
  })
  .catch(err => {
    console.log(err)
    res.redirect('https://yoursite.com/err.html')
  })
}
...
app.post('/endpoint', handler)