Soumettre un formulaire en utilisant jQuery
22 réponses
Cela dépend si vous soumettez le formulaire normalement ou via un appel AJAX. Vous pouvez trouver beaucoup d'informations à jquery.com , y compris la documentation avec des exemples. Pour soumettre un formulaire normalement, consultez la méthode submit()
à ce site. Pour AJAX , Il ya beaucoup de possibilités différentes, bien que vous voulez probablement utiliser soit le ajax()
ou post()
méthodes. Notez que post()
est vraiment juste une façon commode 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 marquer d'un signet est comment jQuery fonctionne . Il y a des tutoriels sur l'utilisation de jQuery et la navigation à gauche donne accès à toute la documentation.
exemples:
Normal
$('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...
}
});
});
noter que les méthodes ajax()
et post()
ci-dessus sont équivalentes. Il y a des paramètres supplémentaires que vous pouvez ajouter à la requête ajax()
pour gérer les erreurs, etc.
, Vous devrez utiliser $("#formId").submit()
.
vous l'appelleriez généralement de l'intérieur d'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 Jquery .
à jQuery je préférerais le suivant:
$("#form-id").submit()
mais encore une fois, vous n'avez vraiment pas besoin de jQuery pour effectuer cette tâche - il suffit d'utiliser JavaScript régulier:
document.getElementById("form-id").submit()
quand vous avez un formulaire existant, qui devrait maintenant fonctionner avec jquery - ajax/post maintenant, vous pourriez:
- d'accrocher les soumettre votre formulaire
- prévenir les fonctionnalités par défaut de soumettre
-
faire vos propres trucs
$(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 forme doivent avoir leur attribut name
défini.
exemple du 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 en utilisant POST dans cet échantillon, donc cela signifie que vous pouvez accéder à vos données via
$_POST['dataproperty1']
, où dataproperty1 est un" nom variable " dans votre json.
voici un exemple de syntaxe si vous utilisez CodeIgniter:
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
ceci enverra un formulaire avec pré-chargeur:
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 forme réformé avec la méthode aléatoire http://www.jackart4.com/article.html
notez que si vous avez déjà installé un écouteur d'événements submit pour votre formulaire, l'appel innner à soumettre ()
jQuery('#<form-id>').submit( function(e){
e.preventDefault();
// maybe some validation in here
if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});
ne fonctionnera pas alors qu'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 directement à L'élément HTML lui-même (unwrap de jQquery) et appeler 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();
});
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>
vous pouvez également utiliser le plugin jQuery form Pour soumettre en utilisant ajax aswell:
jQuery("a[id=atag]").click( function(){
jQuery('#form-id').submit();
**OR**
jQuery(this).parents("#form-id").submit();
});
notez que dans Internet Explorer il y a des problèmes avec les formes créées dynamiquement. 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 le faire fonctionner dans IE créer l'élément de formulaire et le joindre avant de soumettre comme ceci:
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 la forme comme dans l'exemple 1 et ensuite l'attacher ne fonctionnera pas - dans IE9 il lance une erreur JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)
Accessoires pour Tommy W @ https://stackoverflow.com/a/6694054/694325
les solutions jusqu'à présent exigent que vous connaissiez L'ID du formulaire.
utilisez ce code pour soumettre le formulaire sans avoir besoin de connaître L'ID:
function handleForm(field) {
$(field).closest("form").submit();
}
par exemple si vous vouliez manipuler l'événement de clic pour un bouton, vous pouvez utiliser
$("#buttonID").click(function() {
handleForm(this);
});
pour information
si quelqu'un utilise
$('#formId').submit();
n'utilisez pas de
<button name = "sumit">
il a fallu de nombreuses heures pour me trouver que submit() ne fonctionnera pas comme ceci.
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 pouvez l'utiliser comme ceci :
$('#formId').submit();
ou
document.formName.submit();
c'est à dire l'astuce pour des formes dynamiques:
$('#someform').find('input,select,textarea').serialize();
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 donné via AJAX.
mon approche légèrement différente changer le bouton en soumettre bouton, puis cliquez sur
$("#submit").click(function(event) {
$(this).attr('type','submit');
$(this).click();
});
je recommande une solution générique pour que vous n'ayez pas à ajouter le code pour chaque forme. Utilisez le plugin jquery form (http://jquery.malsup.com/form/) et ajouter 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(){ ... });
j'ai également utilisé ce qui suit pour soumettre un formulaire (sans le soumettre réellement) via Ajax:
jQuery.get("process_form.php"+$("#form_id").serialize(), {},
function() {
alert("Okay!");
});