Comment faire pour capturer la réponse de la forme.soumettre

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

Remarque: je voulais juste parler de cette alternative depuis quelques réponses prétendent que c'est impossible d'atteindre cet objectif sans Ajax.

La non-jQuery façon, extrait de 12me21 commentaire:

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 POST's le 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 des "autres trucs" ou le personnaliser en quelque sorte de voir ici pour certains détails concrets.

Internet du futur, les chercheurs:

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

Ici est 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 ci-dessus est remis à vous (ou que vous avez créé parce qu'il est de la sémantique html), vous pouvez enrouler le fetch code 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'original de l'affiche que vous voulez l'appeler manuellement sans présenter des cas, il suffit de mettre le fetch code et passer une référence à la form élément au lieu d'utiliser event.target.)

Docs:

Fetch:
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 fait pas mention de fetch (encore).
Mais il mentionne que le target="myIFrame" astuce est obsolète.
Et il a aussi un exemple de formulaire.la méthode addEventListener pour "soumettre" de l'événement.

Vous pouvez event.preventDefault() dans le gestionnaire de clic de votre bouton soumettre pour s'assurer que le formulaire HTML par défaut submit événement n'a pas le feu (qui est ce qui conduit à la page d'actualisation).

Une autre alternative serait d'utiliser hackier formulaire de balisage: C'est l'utilisation de <form> et type="submit" que c'est la façon de le comportement souhaité ici; car ces en fin de compte conduire à cliquez sur les événements de l'actualisation de la page.

Si vous souhaitez toujours utiliser <form>, et vous ne voulez pas écrire personnalisé des gestionnaires de clic, vous pouvez utiliser du jQuery ajax méthode, qui fait abstraction de l'ensemble du problème par vous par l'exposition de la promesse méthodes pour success, error, etc.

---

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

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

• en utilisant des éléments qui n'ont pas le comportement par défaut (par exemple,<form>)

• à l'aide de jQuery ajax

---

(je viens de remarquer que cette question est à partir de 2008, ne sais pas pourquoi il est apparu dans mon alimentation; en tout cas, j'espère que c'est une réponse claire)

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>

Bâtiment sur la réponse de @rajesh_kw (https://stackoverflow.com/a/22567796/4946681), je m'occupe de post de formulaire d'erreurs et de 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 faire usage de this de sorte que ma logique est réutilisable, j'attends que le HTML soit de retour sur une réussite, donc je l'ai rendu et remplacer la page actuelle, et dans mon cas, je m'attends à une redirection vers la page de connexion si la session est expirée, j'ai donc intercepter une redirection dans le but de préserver l'état de la page.

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

Vous pouvez le faire à l'aide de javascript et AJAX technologie. Jetez un oeil à jquery et à ce bouchon de forme. Vous avez seulement besoin d'inclure deux fichiers js pour enregistrer un rappel pour la forme.soumettre.

 $(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 les utiliser $(document).ready(function()) à l'intérieur de cette utilisation ("formid').submit(function(event))
et puis d'empêcher action par défaut aftyer que l'appel ajax formulaire de soumission
$.ajax({, , , , });
il faudra du paramètre u peut choisir en fonction de vos besoins
appelez ensuite afunction success:function(data){
//faire ce que vous voulez de mon exemple pour mettre de la réponse html sur les div }

J'ai code Suivant perfactly exécuter à l'aide d'ajax avec multi-partie des données de formulaire

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 le faire sans ajax.

écrire votre comme ci-dessous.

..
..
..

puis dans "action.php"

puis après frmLogin.submit();

lire la variable $submit_return..

$submit_return contient la valeur de retour.

bonne chance.