Como enviar um formulário HTML sem redirecionamento

Se eu tiver um formulário como este,

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

como posso enviá-lo sem redirecionar para outra visualização por JavaScript / jQuery?

Eu li muitas respostas de Stack Overflow, mas todas elas me redirecionam para a visualização retornada pela função POST.

Para conseguir o que deseja, você precisa usar jQuery Ajax conforme abaixo:

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

Experimente também 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
       }
   });
}

Solução final

Isso funcionou perfeitamente. Eu chamo essa função deHtml.ActionLink(...)

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

Você pode conseguir isso redirecionando o formulário actionpara um invisível <iframe>. Não requer nenhum JavaScript ou qualquer outro tipo de script.

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

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

Coloque um oculto iFramena parte inferior de sua página e targetem seu formulário:

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

Rápido e fácil. Lembre-se de que, embora o targetatributo ainda tenha amplo suporte (e suporte no HTML5), ele foi descontinuado no HTML 4.01.

Portanto, você realmente deve usar o Ajax para se preparar para o futuro.

Como todas as respostas atuais usam jQuery ou truques com iframe, percebi que não há mal nenhum em adicionar um método apenas com 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);
}

Ok, eu não vou te dizer uma maneira mágica de fazer isso porque não existe. Se você tiver um atributo de ação definido para um elemento de formulário, ele irá redirecionar.

Se você não quiser redirecionar, simplesmente não defina nenhuma ação e defina onsubmit="someFunction();"

No seu someFunction()você faz o que quiser, (com AJAX ou não) e no final, você adiciona return false;para dizer ao navegador para não enviar o formulário ...

Você precisa do Ajax para fazer isso acontecer. Algo assim:

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

Veja a postfunção do jQuery .

Gostaria de criar um botão e definir um onClickListener( $('#button').on('click', function(){});) e enviar os dados na função.

Além disso, veja a preventDefaultfunção de jQuery!

Solução de uma linha a partir de 2020, se seus dados não devem ser enviados como multipart/form-dataou application/x-www-form-urlencoded:

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

O efeito desejado também pode ser obtido movendo o botão enviar para fora do formulário, conforme descrito aqui:

Impedir o recarregamento da página e o redirecionamento no formulário submit ajax / jquery

Como isso:

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

Usando este snippet, você pode enviar o formulário e evitar o redirecionamento. Em vez disso, você pode passar a função de sucesso como argumento e fazer o que quiser.

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

E então é só fazer:

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

Se você controlar o back-end, use algo como em response.redirectvez de response.send.

Você pode criar páginas HTML personalizadas para isso ou apenas redirecionar para algo que você já possui.

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