jQuery AJAX soumettre le formulaire
J'ai un formulaire avec le nom orderproductForm et un nombre indéfini d'entrées.
Je veux faire une sorte de jQuery.get ou ajax ou quelque chose du genre qui appelle une page via Ajax et envoie toutes les entrées du formulaire orderproductForm.
Je suppose qu’une façon serait de faire quelque chose comme
jQuery.get("myurl",
{action : document.orderproductForm.action.value,
cartproductid : document.orderproductForm.cartproductid.value,
productid : document.orderproductForm.productid.value,
...
Cependant, je ne connais pas exactement toutes les entrées de formulaire. Existe-t-il une fonctionnalité, une fonction ou quelque chose qui envoie simplement TOUTES les entrées de formulaire?
Vous pouvez utiliser les fonctions ajaxForm/ajaxSubmit de Ajax Form Plugin ou la fonction de sérialisation jQuery.
AjaxForm :
$("#theForm").ajaxForm({url: 'server.php', type: 'post'})
ou
$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})
ajaxForm sera envoyé lorsque le bouton de soumission est enfoncé. ajaxSubmit envoie immédiatement.
Sérialiser :
$.get('server.php?' + $('#theForm').serialize())
$.post('server.php', $('#theForm').serialize())
Ceci est une simple référence:
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
});
J'espère que ça t'aide.
Une autre solution similaire utilisant des attributs définis sur l'élément de formulaire:
<form id="contactForm1" action="/your_url" method="post">
<!-- Form input fields here (do not forget your name attributes). -->
</form>
<script type="text/javascript">
var frm = $('#contactForm1');
frm.submit(function (e) {
e.preventDefault();
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
console.log('Submission was successful.');
console.log(data);
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});
});
</script>
Il y a quelques choses que vous devez garder à l'esprit.
1. Il existe plusieurs façons de soumettre un formulaire
- en utilisant le bouton d'envoi
- en appuyant sur enter
- en déclenchant un événement de soumission en JavaScript
- peut-être plus en fonction de l'appareil ou de l'appareil à venir.
Nous devrions donc lier l’événement form submit, pas l’événement clic sur le bouton. Cela garantira que notre code fonctionne sur tous les appareils et toutes les technologies d'assistance, maintenant et à l'avenir.
2. Hijax
L'utilisateur ne peut pas avoir JavaScript activé. Un modèle hijax est bon ici, où nous prenons doucement le contrôle du formulaire en utilisant JavaScript, mais le laissons soumis si JavaScript échoue.
Nous devrions extraire l'URL et la méthode du formulaire. Par conséquent, si le code HTML change, nous n'avons pas besoin de mettre à jour le code JavaScript.
. JavaScript discret
Utiliser event.preventDefault () au lieu de return false est une bonne pratique car elle permet à l'événement de se propager. Cela permet à d'autres scripts de se lier à l'événement, par exemple des scripts d'analyse susceptibles de surveiller les interactions de l'utilisateur.
Vitesse
Nous devrions idéalement utiliser un script externe plutôt que d'insérer notre script en ligne. Nous pouvons créer un lien vers cela dans la section d'en-tête de la page à l'aide d'une balise de script ou au bas de la page pour plus de rapidité. Le script doit améliorer l'expérience de l'utilisateur, sans se gêner.
Code
En supposant que vous soyez d'accord avec tout ce qui précède et que vous souhaitez intercepter l'événement submit et le gérer via AJAX (un modèle hijax), vous pouvez procéder de la manière suivante:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
Vous pouvez manuellement déclencher une soumission de formulaire quand vous le souhaitez via JavaScript en utilisant quelque chose comme:
$(function() {
$('form.my_form').trigger('submit');
});
Edit:
J'ai récemment eu à faire cela et j'ai fini par écrire un plugin.
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
Ajoutez un attribut data-autosubmit à votre balise de formulaire et procédez comme suit:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});
Vous pouvez également utiliser FormData (mais non disponible dans IE):
var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector
$.ajax({
type: "POST",
url: "yourURL",// where you wanna post
data: formData,
processData: false,
contentType: false,
error: function(jqXHR, textStatus, errorMessage) {
console.log(errorMessage); // Optional
},
success: function(data) {console.log(data)}
});
Voici comment vous utilisez FormData .
Version simple (n'envoie pas d'images)
<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
(function($){
$("body").on("submit", ".my-form", function(e){
e.preventDefault();
var form = $(e.target);
$.post( form.attr("action"), form.serialize(), function(res){
console.log(res);
});
});
)(jQuery);
</script>
Copier et coller l'ajaxification d'un formulaire ou de tous les formulaires d'une page
C'est une version modifiée de Alfrekjv's answer
- Cela fonctionnera avec jQuery> = 1.3.2
- Vous pouvez l'exécuter avant que le document soit prêt
- Vous pouvez supprimer et ré-ajouter le formulaire et il fonctionnera toujours
- Il sera envoyé au même endroit que le formulaire normal, spécifié dans l'attribut "action" du formulaire.
JavaScript
jQuery(document).submit(function(e){
var form = jQuery(e.target);
if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
e.preventDefault();
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(), // serializes the form's elements.
success: function(data) {
console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
}
});
}
});
Je voulais modifier la réponse d'Alfrekjv, mais m'en écartant trop, j'ai donc décidé de l'afficher séparément.
N'envoie pas de fichiers, ne prend pas en charge les boutons. Par exemple, un bouton (y compris un bouton d'envoi) envoie sa valeur sous forme de données de formulaire. Toutefois, comme il s'agit d'une demande ajax, le clic du bouton ne sera pas envoyé.
Pour prendre en charge les boutons, vous pouvez capturer le clic de bouton réel au lieu du bouton Envoyer.
jQuery(document).click(function(e){
var self = jQuery(e.target);
if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
e.preventDefault();
var form = self.closest('form'), formdata = form.serialize();
//add the clicked button to the form data
if(self.attr('name')){
formdata += (formdata!=='')? '&':'';
formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
}
jQuery.ajax({
type: "POST",
url: form.attr("action"),
data: formdata,
success: function(data) {
console.log(data);
}
});
}
});
Sur le serveur, vous pouvez détecter une requête ajax avec cet en-tête que jquery définit HTTP_X_REQUESTED_WITH pour php
PHP
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
//is ajax
}
Ce code fonctionne même avec une entrée de fichier
$(document).on("submit", "form", function(event)
{
event.preventDefault();
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
dataType: "JSON",
data: new FormData(this),
processData: false,
contentType: false,
success: function (data, status)
{
},
error: function (xhr, desc, err)
{
}
});
});
J'ai vraiment aimé cette réponse par superluminaire et surtout la façon dont il est enveloppé est une solution dans un jQuery brancher. Merci donc à superluminaire pour une réponse très utile. Dans mon cas, cependant, je voulais un plugin qui me permettrait de définir le succès et l’erreur gestionnaires d’événements au moyen d’options lors de l’initialisation du plugin.
Alors voici ce que je suis venu avec:
;(function(defaults, $, undefined) {
var getSubmitHandler = function(onsubmit, success, error) {
return function(event) {
if (typeof onsubmit === 'function') {
onsubmit.call(this, event);
}
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function() {
if (typeof success === 'function') {
success.apply(this, arguments);
}
}).fail(function() {
if (typeof error === 'function') {
error.apply(this, arguments);
}
});
event.preventDefault();
};
};
$.fn.extend({
// Usage:
// jQuery(selector).ajaxForm({
// onsubmit:function() {},
// success:function() {},
// error: function() {}
// });
ajaxForm : function(options) {
options = $.extend({}, defaults, options);
return $(this).each(function() {
$(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
});
}
});
})({}, jQuery);
Ce plugin me permet très facilement "d'ajaxer" les formulaires HTML sur la page et de fournir lors de la soumission , succès et des gestionnaires d’événements d’erreur pour la mise en œuvre du retour à l’utilisateur du statut de la soumission du formulaire. Cela a permis d'utiliser le plugin comme suit:
$('form').ajaxForm({
onsubmit: function(event) {
// User submitted the form
},
success: function(data, textStatus, jqXHR) {
// The form was successfully submitted
},
error: function(jqXHR, textStatus, errorThrown) {
// The submit action failed
}
});
Notez que les gestionnaires d’événements success et error reçoivent les mêmes arguments que vous recevrait des événements correspondants de la méthode jQuery ajax .
J'ai ce qui suit pour moi:
formSubmit('#login-form', '/api/user/login', '/members/');
où
function formSubmit(form, url, target) {
$(form).submit(function(event) {
$.post(url, $(form).serialize())
.done(function(res) {
if (res.success) {
window.location = target;
}
else {
alert(res.error);
}
})
.fail(function(res) {
alert("Server Error: " + res.status + " " + res.statusText);
})
event.preventDefault();
});
}
Cela suppose que le message 'url' retourne un ajax sous la forme de {success: false, error:'my Error to display'}
Vous pouvez varier cela comme vous le souhaitez. N'hésitez pas à utiliser cet extrait.
jQuery AJAX soumettre le formulaire , n’est rien mais soumettez un formulaire en utilisant un ID de formulaire lorsque vous cliquez sur un bouton
S'il vous plaît suivez les étapes
Étape 1 - La balise de formulaire doit avoir un champ ID
<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>
Bouton sur lequel vous allez cliquer
<button>Save</button>
Étape 2 - L'événement submit est dans jQuery, ce qui facilite l'envoi d'un formulaire. dans le code ci-dessous, nous préparons une requête JSON à partir d'un élément HTML name .
$("#submitForm").submit(function(e) {
e.preventDefault();
var frm = $("#submitForm");
var data = {};
$.each(this, function(i, v){
var input = $(v);
data[input.attr("name")] = input.val();
delete data["undefined"];
});
$.ajax({
contentType:"application/json; charset=utf-8",
type:frm.attr("method"),
url:frm.attr("action"),
dataType:'json',
data:JSON.stringify(data),
success:function(data) {
alert(data.message);
}
});
});
pour une démonstration en direct, cliquez sur le lien ci-dessous
pensez à utiliser closest
$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
frm = $(ev.target).closest('form');
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert(data);
}
})
ev.preventDefault();
});
Pour éviter les envois multiples sous forme de données:
N'oubliez pas de dissocier l'événement de soumission avant que le formulaire ne soit soumis à nouveau, l'utilisateur peut appeler la fonction sumbit plusieurs fois, peut-être a-t-il oublié quelque chose ou a-t-il commis une erreur de validation.
$("#idForm").unbind().submit( function(e) {
....
Si vous utilisez form. Serialize () - vous devez attribuer un nom à chaque élément de formulaire de la manière suivante:
<input id="firstName" name="firstName" ...
Et le formulaire est sérialisé comme ceci:
firstName=Chris&lastName=Halcrow ...
Vous pouvez utiliser cette fonction sur la fonction d'envoi comme ci-dessous.
Formulaire HTML
<form class="form" action="" method="post">
<input type="text" name="name" id="name" >
<textarea name="text" id="message" placeholder="Write something to us"> </textarea>
<input type="button" onclick="return formSubmit();" value="Send">
</form>
fonction jQuery:
<script>
function formSubmit(){
var name = document.getElementById("name").value;
var message = document.getElementById("message").value;
var dataString = 'name='+ name + '&message=' + message;
jQuery.ajax({
url: "submit.php",
data: dataString,
type: "POST",
success: function(data){
$("#myForm").html(data);
},
error: function (){}
});
return true;
}
</script>
Pour plus de détails et un exemple de visite, visitez le site: http://www.spiderscode.com/simple-ajax-contact-form/
Juste un rappel amical que data peut aussi être un objet:
$('form#foo').submit(function () {
$.ajax({
url: 'http://foo.bar/some-ajax-script',
type: 'POST',
dataType: 'json',
data: {
'foo': 'some-foo',
'bar': 'some-bar'
}
}).always(function (data) {
console.log(data);
});
return false;
});
Ce n'est pas la réponse à la question de OP,
mais si vous ne pouvez pas utiliser la forme statique DOM, vous pouvez également essayer comme ceci.
var $form = $('<form/>').append(
$('<input/>', {name: 'username'}).val('John Doe'),
$('<input/>', {name: 'user_id'}).val('john.1234')
);
$.ajax({
url: 'api/user/search',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
data: $form.serialize(),
success: function(data, textStatus, jqXHR) {
console.info(data);
},
error: function(jqXHR, textStatus, errorThrown) {
var errorMessage = jqXHR.responseText;
if (errorMessage.length > 0) {
alert(errorMessage);
}
}
});