Comment capturer la réponse de form.submit
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 une fonction de rappel dans la méthode form1.submit?
Vous ne pourrez pas le faire facilement avec du javascript simple. 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 côté serveur. Autrement dit, la fonction submit() ne renvoie rien, elle envoie simplement les données de formulaire au serveur.
Si vous voulez vraiment obtenir la réponse en Javascript (sans rafraîchissement de la page), vous devrez alors utiliser AJAX, et lorsque vous commencerez à parler d’AJAX, vous aurez besoin utiliser une bibliothèque. jQuery est de loin le plus populaire et mon préféré. Il existe un excellent plugin pour jQuery appelé Form qui fera exactement ce que 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);
}
})
;
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 l'Ajax?
Note: / Je voulais juste mentionner cette alternative car certaines réponses affirment qu'il est impossible de réaliser cela sans Ajax.
Je le fais de cette façon et ça marche.
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(){
console.log('form submitted.');
}
});
return false;
});
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 POST, le type de contenu par défaut est "application/x-www-form-urlencoded", ce qui correspond à ce que nous envoyons dans l'extrait de code ci-dessus. Si vous voulez envoyer "d'autres trucs" ou le modifier, voyez ici pour des détails intéressants.
Je ne suis pas sûr que vous compreniez ce que submit () fait ...
Lorsque vous exécutez form1.submit();, les informations du formulaire sont envoyées au serveur Web.
Le serveur Web fera ce qu'il est supposé faire et renverra une nouvelle page Web au client (généralement la même page avec quelque chose de modifié).
Donc, vous ne pouvez pas "attraper" le retour d'une action form.submit ().
Il n'y a pas de rappel. C'est comme suivre un lien.
Si vous souhaitez capturer la réponse du serveur, utilisez AJAX ou envoyez-la à un Iframe et récupérez ce qui apparaît après l'événement onload() de l'iframe.
Futurs chercheurs d'internet:
Pour les nouveaux navigateurs (à compter de 2018: Chrome, Firefox, Safari, Opera, Edge et la plupart des navigateurs mobiles, mais pas pour IE), fetch est une API standard qui simplifie les appels réseau asynchrones (pour lesquels nous avions auparavant besoin de XMLHttpRequest ou $.ajax de jQuery).
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 que vous l'avez créé parce qu'il s'agit de HTML sémantique), vous pouvez alors 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 souhaitez l'appeler manuellement sans événement de soumission, insérez simplement le code fetch et transmettez 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/Learn/HTML/Forms/Sending_forms_through_JavaScript .__ Cette page de 2018 ne mentionne pas (encore) fetch . Mais il est mentionné que l'astuce target = "myIFrame" est obsolète . Et elle contient également un exemple de form.addEventListener pour l'événement 'submit'.
Vous pouvez event.preventDefault() dans le gestionnaire de clics de votre bouton d'envoi pour vous assurer que l'événement submit du formulaire HTML par défaut ne se déclenche pas (ce qui conduit à l'actualisation de la page).
Une autre solution consisterait à utiliser un balisage de formulaire plus hackier: c’est l’utilisation de <form> et type="submit" qui gêne le comportement souhaité ici; car ceux-ci mènent finalement à des événements de clic actualisant la page.
Si vous souhaitez toujours utiliser <form> et que vous ne voulez pas écrire de gestionnaires de clics personnalisés, vous pouvez utiliser la méthode ajax de jQuery, qui résume le problème dans son intégralité en exposant les méthodes de promesse pour success, error, etc.
Pour récapituler, vous pouvez résoudre votre problème de l'une des manières suivantes:
• prévention du comportement par défaut dans la fonction de traitement à l'aide de event.preventDefault()
• utiliser des éléments qui n'ont pas de comportement par défaut (par exemple, <form>)
• en utilisant 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)
$.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
}
});
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>
En me basant sur la réponse de @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), je gère les erreurs de publication et le succès des formulaires:
$('#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 HTML soit renvoyé en cas de succès. Je la restitue donc et je remplace la page actuelle. Dans mon cas, j'attends une redirection vers la page de connexion si la session expire, donc j'intercepte cette redirection afin de préserver l'état de la page.
Désormais, les utilisateurs peuvent se connecter via un autre onglet et réessayer de les envoyer.
Si vous souhaitez capturer la sortie d'une demande AJAX à l'aide de Chrome, vous pouvez suivre ces étapes simples:
- Ouvrez la boîte à outils du programmeur
- Allez à la console et n'importe où à l'intérieur
- Dans le menu qui apparaît, cliquez sur "Activer la journalisation XMXHTTPRequest".
- Après cela, chaque fois que vous ferez une demande à AJAX, un message commençant par "XHR aura fini de charger: http: // ......" apparaîtra dans votre console.
- En cliquant sur le lien qui apparaît, vous obtiendrez l'onglet "Ressources" où vous pourrez voir les en-têtes et le contenu de la réponse!
Vous pouvez utiliser jQuery.post () et renvoyer des réponses JSON bien structurées à partir du serveur. Il vous permet également de valider/assainir vos données directement sur le serveur, ce qui est une bonne pratique car il est plus sécurisé (et même plus facile) que de le faire sur le client.
Par exemple, si vous devez publier un formulaire html sur un serveur (pour enregistrer un fichier de sauvegarde), avec les données de l'utilisateur pour un enregistrement simple:
I. parties 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 du 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. 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. En soumettant le formulaire, le navigateur charge généralement une nouvelle page.
Vous pouvez le faire en utilisant javascript et la technologie AJAX. Jetez un oeil à jquery et à ce plugin form . Vous devez uniquement inclure deux fichiers js pour enregistrer un rappel pour le formulaire form.submit.
J'ai le code suivant fonctionne parfaitement en utilisant ajax avec des données de formulaire multipart
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 accomplir cela en utilisant jQuery et la 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>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;
};
alors 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
}
});
$(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 tout usage $ (document) .ready (fonction ()) à l'intérieur de cette utilisation ('formidable'). submit (fonction (événement)) et ensuite empêcher l'action par défaut après qui appelent soumission de formulaire ajax $. ajax ({,}); cela prendra le paramètre que vous pouvez choisir en fonction de vos besoins puis appelez le succès de la fonction: function (data) { // faites ce que vous voulez pour que mon exemple mette la réponse html sur div}