Cómo enviar un formulario HTML sin redirección

Si tengo un formulario como este,

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

¿Cómo puedo enviarlo sin redirigir a otra vista mediante JavaScript / jQuery?

Leí muchas respuestas de Stack Overflow, pero todas me redirigen a la vista devuelta por la función POST.

Para lograr lo que desea, debe usar jQuery Ajax de la siguiente manera:

$('#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
        }
    });
});

Prueba también este:

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

Solución final

Esto funcionó a la perfección. Llamo a esta función desdeHtml.ActionLink(...)

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

Puede lograrlo redirigiendo el formulario actiona un archivo invisible <iframe>. No requiere JavaScript ni ningún otro tipo de scripts.

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

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

Coloque un oculto iFrameen la parte inferior de su página y targeten su formulario:

<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>

Rapido y Facil. Tenga en cuenta que, si bien el targetatributo todavía se admite ampliamente (y se admite en HTML5), quedó obsoleto en HTML 4.01.

Entonces, realmente debería usar Ajax a prueba de futuro.

Dado que todas las respuestas actuales usan jQuery o trucos con iframe, pensé que no hay ningún daño para agregar un método con solo 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);
}

De acuerdo, no les voy a contar una forma mágica de hacerlo porque no la hay. Si tiene un atributo de acción establecido para un elemento de formulario, lo redireccionará.

Si no desea que se redirija, simplemente no configure ninguna acción y configure onsubmit="someFunction();"

En tu someFunction()haces lo que quieras, (con AJAX o no) y al final, agregas return false;para decirle al navegador que no envíe el formulario ...

Necesitas Ajax para que esto suceda. Algo como esto:

$(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;
    });
});

Vea la postfunción de jQuery .

Crearía un botón, establecería un onClickListener( $('#button').on('click', function(){});) y enviaría los datos en la función.

Además, vea la preventDefaultfunción de jQuery!

Solución de una sola línea a partir de 2020, si sus datos no están destinados a enviarse como multipart/form-datao application/x-www-form-urlencoded:

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

El efecto deseado también se puede lograr moviendo el botón de envío fuera del formulario como se describe aquí:

Evite la recarga de la página y la redirección en el formulario enviar ajax / jquery

Me gusta esto:

<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>

Con este fragmento, puede enviar el formulario y evitar la redirección. En su lugar, puede pasar la función de éxito como argumento y hacer lo que quiera.

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

Y luego simplemente haz:

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

Si controlas el back-end, usa algo como en response.redirectlugar de response.send.

Puede crear páginas HTML personalizadas para esto o simplemente redirigir a algo que ya tiene.

En 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)