Bagaimana cara mengirimkan formulir HTML tanpa pengalihan

Jika saya memiliki bentuk seperti ini,

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

bagaimana cara mengirimkannya tanpa mengalihkan ke tampilan lain dengan JavaScript / jQuery?

Saya membaca banyak jawaban dari Stack Overflow, tetapi semuanya mengarahkan saya ke tampilan yang dikembalikan oleh fungsi POST.

Untuk mencapai apa yang Anda inginkan, Anda perlu menggunakan jQuery Ajax seperti di bawah ini:

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

Coba juga yang ini:

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

Solusi akhir

Ini bekerja dengan sempurna. Saya menyebut fungsi ini dariHtml.ActionLink(...)

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

Anda dapat mencapainya dengan mengalihkan formulir actionke tak terlihat <iframe>. Itu tidak memerlukan JavaScript atau jenis skrip lainnya.

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

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

Tempatkan tersembunyi iFramedi bagian bawah halaman Anda dan targetdi formulir Anda:

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

Cepat dan mudah. Perlu diingat bahwa saat filetarget atribut ini masih didukung secara luas (dan didukung di HTML5), atribut sudah tidak digunakan lagi di HTML 4.01.

Jadi, Anda benar-benar harus menggunakan Ajax untuk memastikan masa depan.

Karena semua jawaban saat ini menggunakan jQuery atau trik dengan iframe, saya pikir tidak ada salahnya menambahkan metode hanya dengan JavaScript biasa:

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

Oke, saya tidak akan memberi tahu Anda cara ajaib untuk melakukannya karena memang tidak ada. Jika Anda memiliki atribut tindakan yang ditetapkan untuk elemen formulir, itu akan mengalihkan.

Jika Anda tidak ingin mengalihkan, jangan setel tindakan dan set apa pun onsubmit="someFunction();"

Dalam Anda, someFunction()Anda melakukan apa pun yang Anda inginkan, (dengan AJAX atau tidak) dan pada akhirnya, Anda menambahkan return false;untuk memberi tahu browser untuk tidak mengirimkan formulir ...

Anda membutuhkan Ajax untuk mewujudkannya. Sesuatu seperti ini:

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

Solusi satu baris mulai 2020, jika data Anda tidak dimaksudkan untuk dikirim sebagai multipart/form-dataatau application/x-www-form-urlencoded:

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

Lihat jQuery's post fungsi .

Saya akan membuat tombol, dan mengatur onClickListener( $('#button').on('click', function(){});), dan mengirim data ke dalam fungsi.

Juga, lihat preventDefaultfungsi dari jQuery!

Efek yang diinginkan juga dapat dicapai dengan menggerakkan tombol kirim di luar formulir seperti yang dijelaskan di sini:

Cegah halaman memuat ulang dan redirect pada form submit ajax / jquery

Seperti ini:

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

Dengan menggunakan potongan ini, Anda dapat mengirimkan formulir dan menghindari pengalihan. Sebagai gantinya Anda bisa melewatkan fungsi sukses sebagai argumen dan melakukan apapun yang Anda inginkan.

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

Dan kemudian lakukan saja:

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

Jika Anda mengontrol bagian belakang, gunakan sesuatu seperti, response.redirectbukan response.send.

Anda dapat membuat halaman HTML khusus untuk ini atau hanya mengarahkan ke sesuatu yang sudah Anda miliki.

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