Je veux soumettre un formulaire en utilisant jQuery. Quelqu'un peut-il fournir un code, une démo ou un exemple de lien?
Réponses
Trop de publicités?Cela dépend si vous soumettez le formulaire normalement ou via un appel AJAX. Vous pouvez trouver beaucoup d'informations à http://jquery.com, y compris la documentation avec des exemples. Pour la soumission d'un formulaire normalement, découvrez le submit() la méthode à ce site. Pour l' AJAX, il y a beaucoup de possibilités différentes, mais vous voudrez probablement utiliser l' ajax() ou post() méthodes. Notez que post()
est vraiment juste une façon commode d'appeler l' ajax()
méthode simplifiée et limitée, de l'interface.
Une ressource critique, celui que j'utilise tous les jours, que vous devriez signet est Comment jQuery Fonctionne. Il a des tutoriels sur l'utilisation de jQuery et de navigation de 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...
}
});
});
Notez que l' ajax()
et post()
méthodes ci-dessus sont équivalentes. Il y a des paramètres supplémentaires que vous pouvez ajouter à l' ajax()
demande de gérer les erreurs, etc.
Vous devrez utiliser $("#formId").submit()
.
Vous appelez généralement ceci à partir 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 Web de Jquery .
lorsque vous avez un formulaire existant, qui doit maintenant travailler avec jquery - ajax/post maintenant, vous pouvez:
- accrocher le soumettre - événement de 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: 'json', data: $("#myform").serialize(), success: function(data) { ... do something with the data... } }); }); });
Exemple de la forme:
<form id="myform" method="post" action="http://mydomain.com/do_recieve_request">
<input type="text" size="20" value="default value" name="my_input_field">
..
.
</form>
@PtF - les données sont envoyées à l'aide de POST dans cet exemple, cela signifie que vous pouvez accéder à vos données via
$_POST['dataproperty1']
où dataproperty1 est une "variable-name" dans votre json.
voici un exemple de syntaxe si vous utilisez CodeIgniter:
$pdata = $this->input->post();
$prop1 = $pdata['prop1'];
$prop1 = $pdata['prop2'];
Du manuel: jQuery Doc
$("form:first").submit();