Come inviare un modulo HTML senza reindirizzamento

Se ho un modulo come questo,

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

come posso inviarlo senza reindirizzare a un'altra vista tramite JavaScript / jQuery?

Ho letto molte risposte da Stack Overflow, ma tutte mi reindirizzano alla vista restituita dalla funzione POST.

Per ottenere ciò che desideri, devi utilizzare jQuery Ajax come di seguito:

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

Prova anche questo:

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

Soluzione finale

Questo ha funzionato perfettamente. Chiamo questa funzione daHtml.ActionLink(...)

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

Puoi ottenerlo reindirizzando il modulo actiona un file invisibile <iframe>. Non richiede JavaScript o altri tipi di script.

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

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

Posiziona un nascosto iFramenella parte inferiore della pagina e targetnel modulo:

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

Facile e veloce. Tieni presente che, sebbene l' targetattributo sia ancora ampiamente supportato (e supportato in HTML5), è stato deprecato in HTML 4.01.

Quindi dovresti davvero usare Ajax per essere a prova di futuro.

Poiché tutte le risposte attuali utilizzano jQuery o trucchi con iframe, ho pensato che non ci fosse alcun danno ad aggiungere un metodo con un semplice 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, non ti dirò un modo magico di farlo perché non c'è. Se hai un attributo di azione impostato per un elemento del modulo, verrà reindirizzato.

Se non vuoi che reindirizzi semplicemente non impostare alcuna azione e impostare onsubmit="someFunction();"

Nel tuo someFunction()fai quello che vuoi, (con AJAX o no) e alla fine, aggiungi return false;per dire al browser di non inviare il modulo ...

Hai bisogno dell'Ajax per realizzarlo. Qualcosa come questo:

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

Vedi la postfunzione di jQuery .

Creerei un pulsante, imposterei una onClickListener( $('#button').on('click', function(){});) e invierei i dati nella funzione.

Inoltre, vedi la preventDefaultfunzione, di jQuery!

Soluzione one-liner a partire dal 2020, se i tuoi dati non devono essere inviati come multipart/form-datao application/x-www-form-urlencoded:

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

L'effetto desiderato può essere ottenuto anche spostando il pulsante di invio all'esterno del modulo come descritto qui:

Impedisci il ricaricamento della pagina e il reindirizzamento sul modulo submit ajax / jquery

Come questo:

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

Utilizzando questo snippet, puoi inviare il modulo ed evitare il reindirizzamento. Invece puoi passare la funzione di successo come argomento e fare quello che vuoi.

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 poi fai:

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

Se controlli il back-end, usa qualcosa come response.redirectinvece di response.send.

Puoi creare pagine HTML personalizzate per questo o semplicemente reindirizzare a qualcosa che hai già.

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