Bagaimana cara menangkap respons dari form.submit

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?

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

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.

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.

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

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

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 ().

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().

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)

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>

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!

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

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.

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

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.

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>

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

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
}

});

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


    });


//

}

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

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.