Bagaimana cara menangkap respons dari form.submit


130

Saya memiliki kode berikut:

<script type="text/javascript">
        function SubmitForm()
        {

            form1.submit();
        }

        function ShowResponse()
        {

        }
</script>
.
.
.
<div>
    <a href="#" onclick="SubmitForm();">Click</a>
</div>

Saya ingin menangkap respons html form1.submit? Bagaimana saya melakukan ini? Dapatkah saya mendaftarkan fungsi panggilan balik ke metode form1.submit?

Jawaban:


110

Anda tidak akan dapat melakukan ini dengan mudah dengan javascript biasa. Saat Anda memposting formulir, input formulir dikirim ke server dan halaman Anda di-refresh - data ditangani di sisi server. Artinya, submit()fungsinya tidak benar-benar mengembalikan apa pun, itu hanya mengirim data formulir ke server.

Jika Anda benar-benar ingin mendapatkan respons dalam Javascript (tanpa penyegaran halaman), maka Anda harus menggunakan AJAX, dan ketika Anda mulai berbicara tentang penggunaan AJAX, Anda harus menggunakan perpustakaan. jQuery sejauh ini adalah yang paling populer, dan favorit pribadi saya. Ada plugin bagus untuk jQuery bernama Form yang akan melakukan persis seperti yang Anda inginkan.

Inilah cara Anda menggunakan jQuery dan plugin itu:

$('#myForm')
    .ajaxForm({
        url : 'myscript.php', // or whatever
        dataType : 'json',
        success : function (response) {
            alert("The server says: " + response);
        }
    })
;

5
1 untuk plugin jQuery Form. Luar biasa, tapi Anda salah memasukkan atribut 'target'. Ini tidak seperti atribut 'tindakan' pada formulir; yaitu bukan tujuan pengiriman. From the docs : target - Mengidentifikasi elemen di halaman yang akan diperbarui dengan respons server.
JCotton

39
agar adil, Anda tidak PERLU menggunakan perpustakaan untuk AJAX. perpustakaan ditulis menggunakan javascript, sehingga solusi non-perpustakaan ada. yang mengatakan, saya 100% mendukung penggunaan perpustakaan untuk mengabstraksikan semua kekonyolan dan kompleksitas yang terlibat dalam membuat panggilan AJAX.
Jason

3
Saya memposting komentar ini lebih sebagai FYI bahwa solusi di atas berfungsi, kecuali ketika datang ke Unggah File melalui AJAX di IE 9 dan di bawahnya. Saya mengalami masalah saat mengirimkan file melalui ajax di browser IE non-HTML5 (IE 9 dan yang lebih lama) jadi saya harus menggunakan hack iframe. Tetapi menggunakan peretasan iframe membutuhkan form.submit (), tetapi Anda tidak bisa menunggu tanggapan untuk memberi tahu Anda apakah itu berhasil atau tidak. Ini membuat saya bingung.
javaauthority

17
Menggunakan perpustakaan sebenarnya tidak sepadan di sini. Dalam JS murni kodenya tidak jauh lebih rumit:var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
12Me21

59

Alternatif Ajax adalah menetapkan yang tidak terlihat <iframe>sebagai target formulir Anda dan membaca kontennya <iframe>di onloadpenangannya. Tapi kenapa repot kalau ada Ajax?

Catatan: Saya hanya ingin menyebutkan alternatif ini karena beberapa jawaban menyatakan bahwa tidak mungkin mencapai ini tanpa Ajax.


4
Katakanlah jika Anda ingin memposting ke URL untuk diunduh melalui klik tombol? Sekarang Anda tidak dapat menggunakan Ajax untuk permintaan Anda. Ingin kemudian membersihkan atau memperbarui antarmuka saat unduhan selesai? Sekarang saatnya menginginkan panggilan balik dari POST yang bukan Ajax. (Necropost, saya tahu.)
AlbertEngelB

2
@ Dropped.on.Caprica Yup, itu masih kasus penggunaan yang sah untuk <iframe>POST (dengan callback ke parent). Untuk download dan upload sama ...
Ates Goral

1
Juga sejauh yang saya tahu untuk siapa saja yang membutuhkan kompatibilitas dengan versi IE (7+) yang lebih lama, saya cukup yakin metode iframe adalah satu-satunya cara untuk melakukannya. Harap perbaiki saya jika saya salah karena saya sedang mengalami masalah ini sekarang.
CoffeeIsProgramming

1
Untuk mendeteksi keberhasilan unduhan, trik rapi yang saya pelajari baru-baru ini adalah menyetel cookie dalam respons unduhan dan polling untuk keberadaan cookie itu di browser.
Ates Goral

3
Perhatikan bahwa ini hanya akan berfungsi jika tindakan pengiriman formulir ada di situs yang sama dengan iframe. Jika tidak, kebijakan Same-Origin akan memblokirnya.
TechnoSam

38

Cara Javascript non-jQuery vanilla, diekstrak dari komentar 12me21:

var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php"); 
xhr.onload = function(event){ 
    alert("Success, server responded with: " + event.target.response); // raw response
}; 
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm")); 
xhr.send(formData);

Untuk POSTjenis konten default adalah "application / x-www-form-urlencoded" yang cocok dengan apa yang kami kirimkan dalam cuplikan di atas. Jika Anda ingin mengirim "barang lain" atau mengubahnya entah bagaimana, lihat di sini untuk beberapa detail intinya.


8
Sebenarnya ini jawaban yang benar! Karena semua jawaban lain melakukan hal yang persis sama, tetapi dikaburkan oleh satu lapisan perpustakaan lagi.
John ditemukan

Ini terlihat seperti yang saya butuhkan, karena saya sudah memiliki file PHP yang menangani banyak XMLHttpRequest () langsung di halaman saya. Tetapi dalam kasus formulir sederhana dengan tag <form action = "/mysite/mycode.php"> dan <submit> yang khas, saya tidak yakin bagaimana cara mengubahnya .. Apakah saya akan mengganti panggilan httprequest javascript saya (dengan callback,) seperti pada: <form action = "myhttpreq (" url, etc ...)? atau mungkin <form action = "#" onsubmit = "return myhttpfunction ()? Sesuatu seperti itu? Jika semudah itu, pasti ini jawabannya. Tapi saya agak bingung bagaimana cara mengaturnya.
Randy

1
@Randy Dalam kasus saya, saya memiliki tombol dalam formulir seperti ini <input type='button' onclick="submitForm(); return false;">atau Anda dapat menambahkan pendengar acara untuk acara 'kirim' seperti Marcus 'jawaban: stackoverflow.com/a/51730069/32453
rogerdpack

31

Saya melakukannya dengan cara ini dan cara kerjanya.

$('#form').submit(function(){
    $.ajax({
      url: $('#form').attr('action'),
      type: 'POST',
      data : $('#form').serialize(),
      success: function(){
        console.log('form submitted.');
      }
    });
    return false;
});

4
Anda mungkin ingin event.preventDefault();( event= argumen pertama dari fungsi submit) daripada return false. Menampilkan false tidak hanya akan menghentikan browser mengirimkan formulir tetapi juga menghentikan terjadinya efek samping lain yang mungkin penting. Ada yang banyak dari pertanyaan yang berkaitan dengan ini.
Nate

1
baik, ya, kembalikan false atau preventDefault atau stopPropogation berdasarkan kebutuhan.
rajesh_kw

1
Anda mungkin perlu menggunakan FormData($("myform")[0])jika Anda mencoba input type = file upload.
Aaron Hoffman

1
Agar lebih umum, Anda dapat menggunakan event.target.actiondan $(event.target).serialize()sebagai pengganti $('#form').attr('action')dan $('#form').serialize().
Lie Ryan

17

Penelusur internet masa depan:

Untuk browser baru (mulai 2018: Chrome, Firefox, Safari, Opera, Edge, dan sebagian besar browser seluler, tetapi bukan IE), fetchadalah API standar yang menyederhanakan panggilan jaringan asinkron (yang dulu kami perlukan XMLHttpRequestatau jQuery $.ajax).

Ini adalah bentuk tradisionalnya:

<form id="myFormId" action="/api/process/form" method="post">
    <!-- form fields here -->
    <button type="submit">SubmitAction</button>
</form>

Jika formulir seperti di atas diserahkan kepada Anda (atau Anda membuatnya karena ini adalah html semantik), maka Anda dapat membungkus fetchkode di event listener seperti di bawah ini:

document.forms['myFormId'].addEventListener('submit', (event) => {
    event.preventDefault();
    // TODO do something here to show user that form is being submitted
    fetch(event.target.action, {
        method: 'POST',
        body: new URLSearchParams(new FormData(event.target)) // event.target is the form
    }).then((resp) => {
        return resp.json(); // or resp.text() or whatever the server sends
    }).then((body) => {
        // TODO handle body
    }).catch((error) => {
        // TODO handle error
    });
});

(Atau, jika seperti poster asli Anda ingin memanggilnya secara manual tanpa event submit, cukup letakkan fetchkode di sana dan teruskan referensi ke formelemen daripada menggunakan event.target.)

Dokumen:

Ambil: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Lainnya: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Halaman itu di tahun 2018 tidak menyebutkan pengambilan (belum). Tapi itu menyebutkan bahwa trik target = "myIFrame" tidak digunakan lagi. Dan itu juga memiliki contoh form.addEventListener untuk acara 'submit'.


11

Saya tidak yakin Anda memahami apa yang dilakukan submit () ...

Ketika Anda melakukan form1.submit();informasi formulir dikirim ke webserver.

WebServer akan melakukan apa pun yang seharusnya dilakukan dan mengembalikan halaman web baru ke klien (biasanya halaman yang sama dengan sesuatu yang berubah).

Jadi, tidak ada cara Anda bisa "menangkap" kembalinya tindakan form.submit ().


Saya membuat halaman html lain dan mengembalikan ini sebagai tanggapan.
Khushboo

6

Tidak ada panggilan balik. Ini seperti mengikuti tautan.

Jika Anda ingin menangkap respons server, gunakan AJAX atau posting ke Iframe dan ambil apa yang muncul di sana setelah acara iframe onload().


2

Anda dapat event.preventDefault()di handler klik untuk tombol kirim untuk memastikan bahwa submitperistiwa default formulir HTML tidak aktif (yang menyebabkan halaman disegarkan).

Alternatif lain adalah menggunakan markup formulir peretas: Ini adalah penggunaan dari <form>dan type="submit"yang menghalangi perilaku yang diinginkan di sini; karena hal ini pada akhirnya mengarah pada peristiwa klik yang menyegarkan halaman.

Jika Anda ingin tetap menggunakan <form>, dan Anda tidak ingin menulis kustom klik penangan, Anda dapat menggunakan jQuery ajaxmetode, yang abstrak seluruh masalah pergi untuk Anda dengan mengekspos metode janji untuk success, error, dll


Singkatnya, Anda dapat menyelesaikan masalah Anda dengan:

• mencegah perilaku default dalam fungsi penanganan dengan menggunakan event.preventDefault()

• menggunakan elemen yang tidak memiliki perilaku default (misalnya <form>)

• menggunakan jQuery ajax


(Saya baru tahu pertanyaan ini dari tahun 2008, tidak yakin mengapa itu muncul di feed saya; bagaimanapun, semoga ini adalah jawaban yang jelas)


2

Ini adalah kode saya untuk masalah ini:

<form id="formoid" action="./demoText.php" title="" method="post">
    <div>
        <label class="title">First Name</label>
        <input type="text" id="name" name="name" >
    </div>
    <div>
        <input type="submit" id="submitButton"  name="submitButton" value="Submit">
    </div>
</form>

<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {

  /* stop form from submitting normally */
  event.preventDefault();

  /* get the action attribute from the <form action=""> element */
  var $form = $( this ), url = $form.attr( 'action' );

  /* Send the data using post with element id name and name2*/
  var posting = $.post( url, { name: $('#name').val()} );

  /* Alerts the results */
  posting.done(function( data ) {
    alert('success');
  });
});
</script>

1

Jika Anda ingin menangkap keluaran permintaan AJAX menggunakan Chrome, Anda dapat mengikuti langkah-langkah sederhana ini:

  1. Buka kotak alat Pemrogram
  2. Pergi ke konsol dan di mana saja di dalamnya
  3. Di menu yang muncul, klik "Aktifkan XMXHTTPRequest Logging"
  4. Setelah melakukan itu setiap kali Anda membuat permintaan AJAX, pesan yang dimulai dengan "XHR selesai memuat: http: // ......" akan muncul di konsol Anda.
  5. Mengeklik tautan yang muncul, akan memunculkan "tab Sumber Daya" di mana Anda dapat melihat tajuk dan konten tanggapan!

1
    $.ajax({
        url: "/users/login/",    //give your url here
        type: 'POST',
        dataType: "json",
        data: logindata,
        success: function ( data ){
        //  alert(data);    do your stuff
        },
        error: function ( data ){
        //  alert(data);    do your stuff
        }
    });

1

Berdasarkan jawaban oleh @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), saya menangani kesalahan dan keberhasilan posting formulir:

    $('#formName').on('submit', function(event) {
        event.preventDefault(); // or return false, your choice
        $.ajax({
            url: $(this).attr('action'),
            type: 'post',
            data: $(this).serialize(),
            success: function(data, textStatus, jqXHR) {
                // if success, HTML response is expected, so replace current
                if(textStatus === 'success') {
                    // https://stackoverflow.com/a/1236378/4946681
                    var newDoc = document.open('text/html', 'replace');
                    newDoc.write(data);
                    newDoc.close();
                }
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            if(jqXHR.status == 0 || jqXHR == 302) {
                alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
            } else {
                alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
            }
        });
    });

Saya memanfaatkan thisagar logika saya dapat digunakan kembali, saya berharap HTML dikembalikan dengan sukses jadi saya merendernya dan mengganti halaman saat ini, dan dalam kasus saya, saya mengharapkan pengalihan ke halaman login jika sesi waktunya habis, jadi Saya mencegat pengalihan itu untuk mempertahankan status laman.

Sekarang pengguna dapat masuk melalui tab lain dan mencoba mengirim lagi.


0

Anda harus menggunakan AJAX. Mengirimkan formulir biasanya mengakibatkan browser memuat halaman baru.


0

Anda dapat melakukannya dengan menggunakan javascript dan teknologi AJAX. Silahkan lihat jquery dan plug in formulir ini . Anda hanya perlu menyertakan dua file js untuk mendaftarkan panggilan balik untuk form.submit.


0

Anda dapat melakukannya dengan menggunakan jQuery dan ajax()metode:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
      $.ajax({
        headers: { 
          'Accept': 'application/json',
          'Content-Type': 'application/json' 
        },
        type: "POST",
        url : "/hello.hello",
        dataType : "json",
        data : JSON.stringify({"hello_name": "hello"}),
        error: function () {
          alert('loading Ajax failure');
        },
    	onFailure: function () {
          alert('Ajax Failure');
    	},
    	statusCode: {
          404: function() {
          alert("missing info");
          }   
    	},
        success : function (response) {
          alert("The server says: " + JSON.stringify(response));
        }
      })
      .done(function( data ) {
        $("#result").text(data['hello']);
      });
};</script>


0
 $(document).ready(function() {
    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
            type : "POST",
            data : $(this).serialize(),
            success : function(data) {
                var treeMenuFrame = parent.frames['wikiMenu'];
                if (treeMenuFrame) {
                    treeMenuFrame.location.href = treeMenuFrame.location.href;
                }
                var contentFrame = parent.frames['wikiContent'];
                contentFrame.document.open();
                contentFrame.document.write(data);
                contentFrame.document.close();
            }
        });
    });
});

Blockquote

pertama-tama gunakan $ (document) .ready (function ()) di dalam use ini ('formid'). submit (function (event)) dan kemudian cegah tindakan default setelah yang memanggil pengiriman formulir ajax $ .ajax ({,,, ,}); Ini akan mengambil parameter u dapat memilih sesuai kebutuhan Anda kemudian panggil sukses fungsi: fungsi (data) {// lakukan apapun yang Anda inginkan contoh saya untuk meletakkan respon html pada div}


0

Pertama-tama kita akan membutuhkan serializeObject ();

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

lalu Anda membuat postingan dasar dan mendapatkan respons

$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true 
}
else
{
//do false
}

});

0

Saya telah menjalankan kode berikut dengan sempurna menggunakan ajax dengan data formulir multi-bagian

function getUserDetail()
{
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    var username = document.getElementById("username").value;
    var email = document.getElementById("email").value;
    var phoneNumber = document.getElementById("phoneNumber").value;
    var gender =$("#userForm input[type='radio']:checked").val();
    //var gender2 = document.getElementById("gender2").value;
    //alert("fn"+firstName+lastName+username+email);
    var roleIndex = document.getElementById("role");
    var role = roleIndex.options[roleIndex.selectedIndex].value;
    var jobTitleIndex = document.getElementById("jobTitle");
    var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var addressLine1 = document.getElementById("addressLine1").value;
    var addressLine2 = document.getElementById("addressLine2").value;
    var streetRoad = document.getElementById("streetRoad").value;

    var countryIndex = document.getElementById("country");
    var country = countryIndex.options[countryIndex.selectedIndex].value;

    var stateIndex = document.getElementById("state");
    var state = stateIndex.options[stateIndex.selectedIndex].value;

    var cityIndex = document.getElementById("city");
    var city = cityIndex.options[cityIndex.selectedIndex].value;



    var pincode = document.getElementById("pincode").value;

    var branchIndex = document.getElementById("branch");
    var branch = branchIndex.options[branchIndex.selectedIndex].value;

    var language = document.getElementById("language").value;
    var profilePicture = document.getElementById("profilePicture").value;
    //alert(profilePicture);
    var addDocument = document.getElementById("addDocument").value;


    var shiftIdIndex = document.getElementById("shiftId");
    var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;


    var data = new FormData();
    data.append('firstName', firstName);
    data.append('lastName', lastName);
    data.append('username', username);
    data.append('email', email);
    data.append('phoneNumber', phoneNumber);
    data.append('role', role);
    data.append('jobTitle', jobTitle);
    data.append('gender', gender);
    data.append('shiftId', shiftId);
    data.append('lastName', lastName);
    data.append('addressLine1', addressLine1);
    data.append('addressLine2', addressLine2);
    data.append('streetRoad', streetRoad);
    data.append('country', country);
    data.append('state', state);
    data.append('city', city);
    data.append('pincode', pincode);
    data.append('branch', branch);
    data.append('language', language);
    data.append('profilePicture', $('#profilePicture')[0].files[0]);
     for (var i = 0; i < $('#document')[0].files.length; i++) {
            data.append('document[]', $('#document')[0].files[i]);
        }



    $.ajax({
        //url : '${pageContext.request.contextPath}/user/save-user',
        type: "POST",
        Accept: "application/json",
        async: true,
        contentType:false,
        processData: false,
        data: data,
        cache: false,

        success : function(data) {      
            reset();
            $(".alert alert-success alert-div").text("New User Created Successfully!");
         },
       error :function(data, textStatus, xhr){
           $(".alert alert-danger alert-div").text("new User Not Create!");
        }


    });


//

}

0

Anda dapat menggunakan jQuery.post () dan mengembalikan jawaban JSON yang terstruktur dengan baik dari server. Ini juga memungkinkan Anda untuk memvalidasi / membersihkan data Anda secara langsung di server, yang merupakan praktik yang baik karena lebih aman (dan bahkan lebih mudah) daripada melakukan ini pada klien.

Misalnya jika Anda perlu memposting formulir html ke server (ke saveprofilechanges.php) dengan data pengguna untuk pendaftaran sederhana:

I. Bagian klien:

Ia bagian HTML:

<form id="user_profile_form">
  <label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
  <label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
  <label for="email"><input type="email" name="email" id="email" required />Email</label> 
  <input type="submit" value="Save changes" id="submit" />
</form>

Bagian Ib Script:

$(function () {
    $("#user_profile_form").submit(function(event) {
      event.preventDefault();
      var postData = {
        first_name: $('#first_name').val(),
        family_name: $('#family_name').val(),
        email: $('#email').val()
      };
      $.post("/saveprofilechanges.php", postData,
        function(data) {
          var json = jQuery.parseJSON(data);
          if (json.ExceptionMessage != undefined) {
            alert(json.ExceptionMessage); // the exception from the server
            $('#' + json.Field).focus(); // focus the specific field to fill in
          }
          if (json.SuccessMessage != undefined) {
            alert(json.SuccessMessage); // the success message from server
          }
       });
    });
});

II. Bagian server (saveprofilechanges.php):

$data = $_POST;
if (!empty($data) && is_array($data)) {
    // Some data validation:
    if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'first_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
       echo json_encode(array(
         'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
         'Field' => 'family_name' // Form field to focus in client form
       ));
       return FALSE;
    }
    if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
       echo json_encode(array(
         'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
         'Field' => 'email' // Form field to focus in client form
       ));
       return FALSE;
    }
    // more actions..
    // more actions..
    try {
       // Some save to database or other action..:
       $this->User->update($data, array('username=?' => $username));
       echo json_encode(array(
         'SuccessMessage' => "Data saved!"
       ));
       return TRUE;
    } catch (Exception $e) {
       echo json_encode(array(
         'ExceptionMessage' => $e->getMessage()
       ));
       return FALSE;
    }
}

-5

Anda bisa melakukannya tanpa ajax.

tulis seperti Anda di bawah ini.

.. .. ..

dan kemudian di "action.php"

lalu setelah frmLogin.submit ();

baca variabel $ submit_return ..

$ submit_return berisi nilai pengembalian.

semoga berhasil.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.