Come si acquisisce la risposta di form.submit

Ho il codice seguente:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

Voglio catturare la risposta html di form1.submit? Come faccio a fare questo? Posso registrare qualsiasi funzione di callback al metodo form1.submit?

Non sarai in grado di farlo facilmente con il semplice javascript. Quando pubblichi un modulo, gli input del modulo vengono inviati al server e la tua pagina viene aggiornata - i dati vengono gestiti sul lato server. Cioè, la submit()funzione in realtà non restituisce nulla, invia semplicemente i dati del modulo al server.

Se vuoi davvero ottenere la risposta in Javascript (senza che la pagina si aggiorni), allora dovrai usare AJAX e quando inizi a parlare di usare AJAX, dovrai usare una libreria. jQuery è di gran lunga il più popolare e il mio preferito. C'è un ottimo plugin per jQuery chiamato Form che farà esattamente quello che suona come vuoi.

Ecco come useresti jQuery e quel plugin:

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

Un'alternativa Ajax è impostare un invisibile <iframe>come destinazione del modulo e leggere il contenuto di quello <iframe>nel suo onloadgestore. Ma perché preoccuparsi quando c'è l'Ajax?

Nota: volevo solo menzionare questa alternativa poiché alcune delle risposte affermano che è impossibile ottenerlo senza Ajax.

Il metodo Javascript vanilla non jQuery, estratto dal commento di 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);

Per POSTdi s il tipo di contenuto predefinito è "application / x-www-form-urlencoded" che corrisponde a ciò che stiamo inviando nello snippet di cui sopra. Se vuoi inviare "altra roba" o modificarla in qualche modo guarda qui per alcuni dettagli nitidi.

Lo sto facendo in questo modo e funziona.

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

Futuri ricercatori in Internet:

Per i nuovi browser (dal 2018: Chrome, Firefox, Safari, Opera, Edge e la maggior parte dei browser mobili, ma non IE), fetchè un'API standard che semplifica le chiamate di rete asincrone (per le quali avevamo bisogno XMLHttpRequesto di jQuery $.ajax).

Ecco una forma tradizionale:

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

Se ti viene consegnato un modulo come il precedente (o l'hai creato perché è html semantico), puoi racchiudere il fetchcodice in un listener di eventi come di seguito:

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

(Oppure, se come il poster originale vuoi chiamarlo manualmente senza un evento di invio, inserisci il fetchcodice lì e passa un riferimento formall'elemento invece di usarlo event.target.)

Documenti:

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

Altro: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Quella pagina del 2018 non menziona il recupero (ancora). Ma menziona che il trucco target = "myIFrame" è deprecato. E ha anche un esempio di form.addEventListener per l'evento "submit".

Non sono sicuro che tu abbia capito cosa fa submit () ...

Quando lo fai, form1.submit();le informazioni del modulo vengono inviate al server web.

Il WebServer farà tutto ciò che dovrebbe fare e restituirà una nuova pagina web al client (di solito la stessa pagina con qualcosa di cambiato).

Quindi, non c'è modo di "catturare" il ritorno di un'azione form.submit ().

Non c'è richiamata. È come seguire un collegamento.

Se desideri acquisire la risposta del server, utilizza AJAX o pubblicala su un Iframe e prendi ciò che appare lì dopo l' onload()evento dell'iframe .

Puoi event.preventDefault()nel gestore dei clic per il tuo pulsante di invio per assicurarti che l' submitevento predefinito del modulo HTML non si attivi (che è ciò che porta all'aggiornamento della pagina).

Un'altra alternativa potrebbe essere quella di utilizzare il markup del modulo hacker: è l'uso di <form>e type="submit"che sta intralciando il comportamento desiderato qui; poiché questi alla fine portano a eventi di clic che aggiornano la pagina.

Se si desidera utilizzare ancora <form>, e non si vuole scrivere cliccare su misura gestori, è possibile utilizzare jQuery di ajaxmetodo, che astrae l'intero problema via per voi esponendo metodi promessa per success, errore così via

Per ricapitolare, puoi risolvere il tuo problema in uno dei seguenti modi:

• prevenire comportamenti predefiniti nella funzione di gestione utilizzando event.preventDefault()

• usare elementi che non hanno un comportamento predefinito (ad esempio <form>)

• utilizzando jQuery ajax

(Ho appena notato che questa domanda è del 2008, non sono sicuro del motivo per cui è apparsa nel mio feed; in ogni caso, spero che questa sia una risposta chiara)

Questo è il mio codice per questo problema:

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

Nel caso in cui desideri acquisire l'output di una richiesta AJAX utilizzando Chrome, puoi seguire questi semplici passaggi:

1. Apri la casella degli strumenti dei programmatori
2. Vai alla console e ovunque al suo interno
3. Nel menu visualizzato, fai clic su "Abilita registrazione XMXHTTPRequest"
4. Dopo averlo fatto ogni volta che effettui una richiesta AJAX, nella tua console apparirà un messaggio che inizia con "XHR ha completato il caricamento: http: // ......".
5. Cliccando sul link che appare, si aprirà la "scheda Risorse" dove potrai vedere le intestazioni e il contenuto della risposta!

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

Basandomi sulla risposta di @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), gestisco gli errori e il successo del modulo post:

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

Lo uso in thismodo che la mia logica sia riutilizzabile, mi aspetto che l'HTML venga restituito in caso di successo quindi lo renderizzo e sostituisco la pagina corrente, e nel mio caso mi aspetto un reindirizzamento alla pagina di accesso se la sessione è scaduta, quindi Intercetto quel reindirizzamento per preservare lo stato della pagina.

Ora gli utenti possono accedere tramite un'altra scheda e riprovare a inviare.

Devi usare AJAX. L'invio del modulo di solito fa sì che il browser carichi una nuova pagina.

Puoi farlo usando javascript e la tecnologia AJAX. Dai un'occhiata a jquery ea questo modulo plug-in . È sufficiente includere due file js per registrare una richiamata per form.submit.

Puoi farlo usando jQuery e il ajax()metodo:

<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

prima di tutto usa $ (document) .ready (function ()) all'interno di questo use ('formid'). submit (function (event)) e quindi previene l'azione predefinita dopo che chiama ajax form submission $ .ajax ({,,, ,}); ci vorrà un parametro che puoi scegliere in base alle tue esigenze, quindi chiama una funzione success: function (data) {// fai quello che vuoi nel mio esempio per mettere la risposta html su div}

Prima di tutto avremo bisogno di 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;
};

quindi fai un post di base e ottieni risposta

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

});

Ho il seguente codice eseguito perfettamente utilizzando ajax con dati di moduli in più parti

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


    });


//

}

Puoi utilizzare jQuery.post () e restituire risposte JSON ben strutturate dal server. Ti consente anche di convalidare / disinfettare i tuoi dati direttamente sul server, che è una buona pratica perché è più sicuro (e anche più facile) che farlo sul client.

Ad esempio, se è necessario inviare un modulo html al server (per saveprofilechanges.php) con i dati dell'utente per una semplice registrazione:

I. Parti del cliente:

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

Ib Parte dello 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. Parte 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;
    }
}

puoi farlo senza ajax.

scrivi il tuo like qui sotto.

.. .. ..

e poi in "action.php"

poi dopo frmLogin.submit ();

leggi la variabile $ submit_return ..

$ submit_return contiene il valore di ritorno.

in bocca al lupo.