Comment puis-je capturer la réponse du formulaire.soumettre

Une alternative Ajax consiste à définir un <iframe> invisible comme cible de votre formulaire et à lire le contenu de ce <iframe> dans son gestionnaire onload. Mais pourquoi s'embêter quand il y a Ajax?

Note: je voulais juste mentionner cette alternative puisque certaines des réponses affirment qu'il est impossible d'y parvenir sans Ajax.

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

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

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

Lorsque vous faites form1.submit(); les informations du formulaire sont envoyées au serveur web.

Le serveur web fera tout ce qu'il est censé faire et retournera une toute nouvelle page Web au client(généralement la même page avec quelque chose de Changé).

Donc, il n'y a aucun moyen que vous pouvez "attraper" le retour d'un formulaire.soumettre () action.

Manière Non-jQuery, à partir du commentaire de 12me21:

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

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

Si vous voulez capturer la réponse du serveur, utilisez AJAX ou postez - la dans un Iframe et récupérez ce qui apparaît après l'événement onload() de l'iframe.

Futurs chercheurs sur internet:

Pour les nouveaux navigateurs (à partir de 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 asynchrones (pour lesquels nous avions besoin de XMLHttpRequest ou de jQuery $.ajax).

Voici une forme traditionnelle:

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

Si un formulaire comme celui ci vous est remis (ou si vous l'avez créé parce que c'est du html sémantique), vous pouvez envelopper le code fetch dans un écouteur d'événement comme ci-dessous:

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, vous voulez l'appeler manuellement sans événement submit, placez simplement le code fetch et passez une référence à l'élément form au lieu d'utiliser event.target.)

Docs:

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

Autres: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Cette page en 2018 ne mentionne pas fetch (encore). Mais il mentionne que l'astuce target="myIFrame" est obsolète. Et il a aussi un exemple de forme.addEventListener pour l'événement 'submit'.

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

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

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

1. Ouvrez la boîte à outils des programmeurs
2. Allez sur la console et n'importe où à l'intérieur
3. dans le menu qui apparaît, cliquez sur "Activer la journalisation XMXHTTPRequest"
4. Après avoir fait cela chaque fois que vous faites une requête AJAX, un message commençant par " XHR a terminé le chargement: http://......"apparaîtra dans votre console.
5. en cliquant sur le lien qui apparaît, apportez l'onglet "Ressources" où vous pouvez voir les en-têtes et le contenu de la réponse!

Vous pouvez event.preventDefault() dans le gestionnaire de clics de votre bouton de soumission pour vous assurer que L'événement submit par défaut du formulaire HTML ne se déclenche pas (ce qui conduit à l'actualisation de la page).

Une autre alternative serait d'utiliser un balisage de formulaire plus hackier: c'est l'utilisation de <form> et type="submit" qui entrave le comportement souhaité ici; car ceux-ci conduisent finalement à des événements de clic rafraîchissant la page.

Si vous voulez toujours utiliser <form> et que vous ne voulez pas écrire de gestionnaires de clics personnalisés, vous peut utiliser la méthode ajax de jQuery, qui élimine tout le problème en exposant les méthodes de promesse pour success, error, etc.

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

• empêcher le comportement par défaut dans la fonction de gestion en utilisant event.preventDefault()

* utilisation de jQuery ajax

(je viens de remarquer que cette question Date de 2008, Je ne sais pas pourquoi elle est apparue dans Mon flux; en tout cas, j'espère que c'est une réponse claire)

S'appuyant sur la réponse de @ rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), je gère les erreurs de post de formulaire et le 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 : ''));
            }
        });
    });

J'utilise this pour que ma logique soit réutilisable, Je m'attends à ce que le HTML soit retourné sur un succès donc je le rends et remplace la page actuelle, et dans mon cas je m'attends à une redirection vers la page de connexion si la session est Expirée, donc j'intercepte cette redirection afin de préserver l'état de

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

Vous pouvez le faire en utilisant la technologie javascript et AJAX. Jetez un oeil à jquery et à ce bouchon de forme. Il vous suffit d'inclure deux fichiers js pour enregistrer un rappel pour le formulaire.soumettre.

Vous pouvez accomplir cela en utilisant jQuery et l'ajax() méthode:

<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

Firrst de tous utilisent $(document).ready(function()) à l'intérieur de cette utilisation ("formid').soumettre (fonction (événement)) et puis empêcher l'action par défaut aftyer qui appellent la soumission de formulaire ajax $.Ajax({, , , , }); il faudra paramètre u peut choisir selon votre condition puis appelez afunction success: function (data){ // faites ce que vous voulez mon exemple pour mettre la réponse html sur div }

Tout d'Abord, nous aurons besoin de 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;
};

Ensuite, vous faites un post de base et obtenez une réponse

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

});

J'ai le code suivant perfactly exécuté en utilisant ajax avec des données de formulaire 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!");
        }


    });


//

}

Vous pouvez utiliser jQuery.post () {[5] } et retourner des réponses JSON bien structurées à partir du serveur. Il vous permet également de valider / désinfecter vos données directement sur le serveur, ce qui est une bonne pratique car c'est plus sécurisé (et encore plus facile) que de le faire sur le client.

Par exemple, si vous avez besoin de poster un formulaire html sur le serveur (pour saveprofilechanges.php) avec les données utilisateur pour un enregistrement simple:

I. pièces 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. Script partie:

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

Vous devez utiliser AJAX. La soumission du formulaire entraîne généralement le chargement d'une nouvelle page par le navigateur.

Vous pouvez le faire sans ajax.

Écrivez votre comme ci-dessous.

.. .. ..

Puis dans " action.php "

Puis après frmLogin.soumettre ();

Lire la variable $ submit_return..

$ submit_return contient une valeur de retour.

Bonne chance.