Comment capturer la réponse de form.submit

Question

J'ai le code suivant:

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

            form1.submit();
        }

        function ShowResponse()
        {

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

Je veux capturer la réponse HTML de form1.submit?Comment puis-je faire cela?Puis-je enregistrer n’importe quelle fonction de rappel dans la méthode form1.submit ?

Answer 1

Vous ne pourrez pas le faire facilement avec javascript plaine. Lorsque vous publiez un formulaire, les entrées de formulaire sont envoyées au serveur et votre page est actualisée - les données sont traitées sur le côté serveur. Cela est, la fonction submit() ne retourne pas vraiment quoi que ce soit, il envoie simplement les données de formulaire au serveur.

Si vous voulez vraiment obtenir la réponse en Javascript (sans la page rafraîchissante), alors vous aurez besoin d'utiliser AJAX, et quand vous commencez à parler en utilisant AJAX, vous aurez besoin utiliser une bibliothèque. jQuery est de loin le plus populaire, et mon préféré. Il y a un grand plugin jQuery appelé rel="noreferrer"> formulaire qui fera exactement ce que ça sonne comme vous voulez.

Voici comment vous utiliseriez jQuery et ce plugin:

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

Answer 2

Une alternative Ajax est de mettre un <iframe> invisible comme la cible de votre forme et de lire le contenu de ce <iframe> dans son gestionnaire de onload. Mais pourquoi s'embêter quand il y a Ajax?

Remarque:. Je voulais simplement mentionner cette alternative puisque certaines des réponses affirment qu'il est impossible pour y parvenir sans Ajax

Answer 3

Je le fais de cette façon et son fonctionnement.

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

Answer 4

La méthode non jQuery, extraite du commentaire de 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);

Pour POSTLe type de contenu par défaut est "application/x-www-form-urlencoded" qui correspond à ce que nous envoyons dans l'extrait ci-dessus.Si vous souhaitez envoyer "d'autres éléments" ou le modifier d'une manière ou d'une autre, voyez ici pour quelques détails essentiels.

Answer 5

Je ne suis pas sûr que vous comprenez ce que submit () fait ...

Quand vous faites form1.submit(); les informations du formulaire est envoyé au serveur Web.

Le serveur Web fera tout son supposé faire et retourner une nouvelle page Web au client (habituellement la même page avec quelque chose a changé).

Alors, il n'y a aucun moyen que vous pouvez "attraper" le retour d'une action form.submit ().

Answer 6

Les futurs chercheurs sur Internet:

Pour les nouveaux navigateurs (comme 2018: Chrome, Firefox, Safari, Opera, Edge, et la plupart des navigateurs mobiles, mais pas IE), fetch est une API standard qui simplifie les appels réseau asynchrone (pour que nous avons utilisé besoin XMLHttpRequest ou de $.ajax jQuery).

Voici une forme traditionnelle:

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

Si une forme comme celle-ci vous est remis (ou vous l'avez créé, car il est html sémantique), alors vous pouvez envelopper le code fetch dans un écouteur d'événement comme suit:

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

(Ou, si comme l'affiche originale que vous voulez appeler manuellement sans événement soumettre, il suffit de mettre le code il fetch et passer une référence à l'élément form au lieu d'utiliser event.target.)

Docs:

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

Autre: https://developer.mozilla.org/en-US/docs / Apprendre / HTML / Formulaires / Sending_forms_through_JavaScript Cette page en 2018 ne mentionne pas fetch (encore). Mais il mentionne que la cible = trick « de MyIframe » est dépréciée. Et il a aussi un exemple de form.addEventListener pour l'événement « submit ».

Answer 7

Il n'y a pas de rappel. Il est comme suivant un lien.

Si vous voulez capturer la réponse du serveur, utilisez AJAX ou l'envoyer à un Iframe et saisir ce qui y apparaît après l'événement onload() du iframe.

Answer 8

Vous pouvez event.preventDefault() dans le gestionnaire de clic pour votre bouton Soumettre pour faire en sorte que le formulaire HTML événement submit par défaut ne se déclenche pas (ce qui est ce qui conduit à la page rafraîchissante).

Une autre alternative serait d'utiliser le balisage forme hackier: Il est l'utilisation de <form> et type="submit" qui se dressent sur le chemin du comportement souhaité ici; que celles-ci conduisent finalement à cliquer sur des événements rechargeant la page.

Si vous souhaitez toujours utiliser <form>, et vous ne voulez pas écrire cliquez sur Gestion personnalisée, vous pouvez utiliser la méthode de ajax jQuery, qui fait abstraction du problème entier loin pour vous en exposant les méthodes de promesse pour success, error, etc.

---

Pour rappel, vous pouvez résoudre votre problème soit:

• la prévention des comportements par défaut dans la fonction de traitement à l'aide event.preventDefault()

• en utilisant des éléments qui ne sont pas le comportement par défaut (par exemple <form>)

• en utilisant jQuery ajax

---

(je viens de remarquer cette question est de 2008, ne sais pas pourquoi il a montré dans mon alimentation, en tout cas, nous espérons que cela est une réponse claire)

Answer 9

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

Answer 10

Ceci est mon code pour ce problème:

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

Answer 11

Si vous voulez capturer la sortie d'une requête AJAX en utilisant Chrome, vous pouvez suivre ces étapes simples:

1. Ouvrez la boîte à outils de programmation
2. Aller à la console et à droite partout à l'intérieur
3. Dans le menu qui apparaît, cliquez sur "Activer XMXHTTPRequest Logging"
4. Après avoir fait cela chaque fois que vous faites une requête AJAX un message commençant par « XHR chargement terminé: http: // ...... ». Apparaît dans la console
5. En cliquant sur le lien qui apparaît, apportera l'onglet « Ressources » où votre peut voir les en-têtes et le contenu de la réponse!

Answer 12

Miser sur la réponse par @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), Je gère les erreurs post forme et succès:

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

Je me sers de this pour que ma logique est réutilisable, je me attends HTML à retourner sur un succès si je rends et remplace la page en cours, et dans mon cas, j'attends une redirection vers la page de connexion si la session est chronométré, donc intercepter I qui redirigent afin de préserver l'état de la page.

Désormais, les utilisateurs peuvent se connecter via un autre onglet et essayez leur soumettre à nouveau.

Answer 13

Vous devez utiliser AJAX. Soumettre le formulaire se traduit généralement par le navigateur du chargement d'une nouvelle page.

Answer 14

Vous pouvez le faire en utilisant javascript et de la technologie AJAX. Jetez un oeil à jquery et à ce . Vous ne devez inclure deux fichiers js pour enregistrer un rappel pour le form.submit.

Answer 15

Vous pouvez accomplir cela en utilisant jQuery et ajax() :

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

Answer 16

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

firrst de toute utilisation $ (document) .ready (function ()) dans cette utilisation ( 'FORMID'). Présenter (function (event)) puis empêcher l'action par défaut aftyer cet appel soumission du formulaire ajax .ajax $ ({,,,,}); il prendra le paramètre u peut choisir selon vos besoins puis appelez AFunction succès: fonction (données) { // faire tout ce que vous voulez mon exemple pour mettre html réponse sur div}

Answer 17

Tout d'abord, nous aurons besoin serialiseObjet ();

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

vous faites un poste de base et obtenez une réponse

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

});

Answer 18

I ai la suite du code exécuté perfactly utilisant Ajax avec les données de formulaires en plusieurs parties

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


    });


//

}

Answer 19

Vous pouvez utiliser jQuery.post () et retourner des réponses JSON bien structurées du serveur . Il vous permet également de valider / désinfectez vos données directement sur le serveur, ce qui est une bonne pratique car il est plus sûr (et encore plus facile) que de faire cela sur le client.

Par exemple, si vous avez besoin d'afficher sous forme de html sur le serveur (à saveprofilechanges.php) avec des données utilisateur pour l'enregistrement simple:

. pièces du client:

I.a. partie 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>

I.b. partie 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. une partie du serveur (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;
    }
}

Answer 20

vous pouvez le faire sans ajax.

écrire votre comme ci-dessous.

.. .. ..

puis dans "action.php"

puis après frmLogin.submit ();

lire la variable $ .. submit_return de

$ submit_return contient la valeur de retour.

bonne chance.