Soumettez un formulaire en utilisant jQuery
Je veux soumettre un formulaire en utilisant jQuery. Quelqu'un peut-il fournir le code, une démonstration ou un exemple de lien?
Cela dépend si vous soumettez le formulaire normalement ou via un appel AJAX. Vous pouvez trouver de nombreuses informations sur jquery.com , y compris une documentation avec des exemples. Pour soumettre un formulaire normalement, consultez la méthode submit() sur ce site. Pour AJAX , il existe de nombreuses possibilités, bien que vous souhaitiez probablement utiliser la fonction ajax() ou post() méthodes. Notez que post() n'est en réalité qu'un moyen pratique d'appeler la méthode ajax() avec une interface simplifiée et limitée.
Une ressource critique, que j'utilise tous les jours, que vous devriez mettre en favori est . Comment jQuery fonctionne . Il contient des tutoriels sur l’utilisation de jQuery et la navigation de gauche donne accès à toute la documentation.
Exemples:
Ordinaire
$('form#myForm').submit();
AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
... do something with the data...
}
});
});
Notez que les méthodes ajax() et post() ci-dessus sont équivalentes. Vous pouvez ajouter des paramètres supplémentaires à la requête ajax() pour gérer les erreurs, etc.
Vous devrez utiliser $("#formId").submit().
Vous appelez généralement cela depuis une fonction.
Par exemple:
<input type='button' value='Submit form' onClick='submitDetailsForm()' />
<script language="javascript" type="text/javascript">
function submitDetailsForm() {
$("#formId").submit();
}
</script>
Vous pouvez obtenir plus d'informations à ce sujet sur le site Web de Jquery .
Dans jQuery, je préférerais ce qui suit:
$("#form-id").submit()
Mais encore une fois, vous n'avez vraiment pas besoin de jQuery pour effectuer cette tâche - utilisez simplement du JavaScript standard:
document.getElementById("form-id").submit()
quand vous avez un formulaire existant, cela devrait maintenant fonctionner avec jquery - ajax/post maintenant, vous pouvez:
- accrocher sur le submit - événement de votre formulaire
- empêcher la fonctionnalité par défaut de soumettre
fais tes propres affaires
$(function() { //hang on event of form with id=myform $("#myform").submit(function(e) { //prevent Default functionality e.preventDefault(); //get the action-url of the form var actionurl = e.currentTarget.action; //do your own request an handle the results $.ajax({ url: actionurl, type: 'post', dataType: 'application/json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); });
Veuillez noter que, pour que la fonction serialize() fonctionne dans l'exemple ci-dessus, tous les éléments de formulaire doivent avoir leur attribut name défini.
Exemple de formulaire:
<form id="myform" method="post" action="http://example.com/do_recieve_request">
<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>
@PtF - les données sont soumises à l'aide de POST dans cet exemple, ce qui signifie que vous pouvez accéder à vos données via
$_POST['dataproperty1']
, où dataproperty1 est un "nom de variable" dans votre json.
voici un exemple de syntaxe si vous utilisez CodeIgniter:
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
À partir du manuel: jQuery Doc
$("form:first").submit();
Pour information
si quelqu'un utilise
$('#formId').submit();
Ne pas quelque chose comme ça
<button name = "submit">
Il m'a fallu de nombreuses heures pour me trouver que submit () ne fonctionnera pas comme ça.
Utilisez-le pour soumettre votre formulaire en utilisant jquery. Voici le lien http://api.jquery.com/submit/
<form id="form" method="post" action="#">
<input type="text" id="input">
<input type="button" id="button" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function () {
$( "#button" ).click(function() {
$( "#form" ).submit();
});
});
</script>
ceci enverra un formulaire avec Preloader:
var a=$('#yourform').serialize();
$.ajax({
type:'post',
url:'receiver url',
data:a,
beforeSend:function(){
launchpreloader();
},
complete:function(){
stopPreloader();
},
success:function(result){
alert(result);
}
});
j'ai un truc pour faire un post de données de formulaire reformé avec la méthode aléatoire http://www.jackart4.com/article.html
Notez que si vous avez déjà installé un écouteur d’événement submit pour votre formulaire, l’appel innner to submit ()
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// maybe some validation in here
if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});
not fonctionne car il essaie d'installer un nouvel écouteur d'événements pour l'événement submit de ce formulaire (qui échoue). Vous devez donc accéder à l'élément HTML lui-même (décompresser de jQquery) et appeler directement submit () sur cet élément:
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// note the [0] array access:
if ( <form-is-valid> ) jQuery('#<form-id>')[0].submit();
});
$("form:first").submit();
Voir events/submit .
Vous pouvez également utiliser le plugin jquery form pour soumettre en utilisant ajax aswell:
Notez que dans Internet Explorer, les formulaires créés de manière dynamique posent des problèmes. Un formulaire créé comme celui-ci ne sera pas soumis dans IE (9):
var form = $('<form method="post" action="/test/Delete/">' +
'<input type="hidden" name="id" value="' + myid + '"></form>');
$(form).submit();
Pour que cela fonctionne dans IE, créez l'élément de formulaire et attachez-le avant de le soumettre de la manière suivante:
var form = document.createElement("form");
$(form).attr("action", "/test/Delete")
.attr("method", "post");
$(form).html('<input type="hidden" name="id" value="' + myid + '" />');
document.body.appendChild(form);
$(form).submit();
document.body.removeChild(form);
Créer le formulaire comme dans l'exemple 1 puis le joindre ne fonctionnera pas - dans IE9, une erreur JScript est renvoyée DOM Exception: HIERARCHY_REQUEST_ERR (3)
Accessoires de Tommy W @ https://stackoverflow.com/a/6694054/694325
Jusqu'à présent, les solutions nécessitent que vous connaissiez l'ID du formulaire.
Utilisez ce code pour soumettre le formulaire sans avoir besoin de connaître l'identifiant:
function handleForm(field) {
$(field).closest("form").submit();
}
Par exemple, si vous souhaitez gérer l'événement click pour un bouton, vous pouvez utiliser
$("#buttonID").click(function() {
handleForm(this);
});
jQuery("a[id=atag]").click( function(){
jQuery('#form-id').submit();
**OR**
jQuery(this).parents("#form-id").submit();
});
Si le bouton est situé entre les balises de formulaire, je préfère cette version:
$('.my-button').click(function (event) {
var $target = $( event.target );
$target.closest("form").submit();
});
vous pourriez l'utiliser comme ceci:
$('#formId').submit();
OR
document.formName.submit();
Astuce IE pour les formulaires dynamiques:
$('#someform').find('input,select,textarea').serialize();
Mon approche légèrement différente Remplacez le bouton par le bouton Envoyer, puis cliquez sur
$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});
function form_submit(form_id,filename){
$.post(filename,$("#"+form_id).serialize(), function(data){
alert(data);
});
}
Il affichera les données du formulaire sur votre nom de fichier via AJAX.
Je recommande une solution générique afin que vous n'ayez pas à ajouter le code pour chaque formulaire. Utilisez le plugin jquery form (http://jquery.malsup.com/form/) et ajoutez ce code.
$(function(){
$('form.ajax_submit').submit(function() {
$(this).ajaxSubmit();
//validation and other stuff
return false;
});
});
vous pourriez le faire comme ceci:
$('#myform').bind('submit', function(){ ... });