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

Если у меня есть такая форма,

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

как я могу отправить его без перенаправления на другое представление с помощью JavaScript / jQuery?

Я прочитал много ответов из Stack Overflow, но все они перенаправляют меня в представление, возвращаемое функцией POST.

Чтобы добиться желаемого, вам необходимо использовать jQuery Ajax, как показано ниже:

$('#myForm').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/Car/Edit/17/',
        type: 'post',
        data:$('#myForm').serialize(),
        success:function(){
            // Whatever you want to 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 want to do after the form is successfully submitted
       }
   });
}

Окончательное решение

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

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

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

<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>

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

Поместите скрытый 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 для перспективного развития.

Поскольку все текущие ответы используют 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);
}

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

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

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

Для этого вам нужен 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 in 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;
    });
});

Однострочное решение с 2020 года, если ваши данные не предназначены для отправки как multipart/form-dataили application/x-www-form-urlencoded:

<form onsubmit='return false'>
    <!-- ... -->           
</form>

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

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

Также посмотрите preventDefaultфункцию jQuery!

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

Запретить перезагрузку страницы и перенаправление при отправке формы 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>

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

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");
});

Если вы управляете серверной частью, используйте что-то вроде 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)