Soumettre 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 lien d'exemple?

389
demandé sur SharpC 2009-07-29 17:28:07

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.

405
répondu tvanfosson 2017-08-01 04:34:52

, 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 .

105
répondu Draco 2014-01-07 10:03:46

à 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()
62
répondu gernberg 2015-07-24 11:15:32

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'];
55
répondu womd 2017-04-27 10:16:56

du manuel: jQuery Doc

$("form:first").submit();
34
répondu AdamSane 2009-07-29 13:31:35

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

13
répondu jacky 2012-11-28 04:52:13

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();
    });
12
répondu gutschilla 2014-04-08 23:50:41
$("form:first").submit();

Voir événements/submit .

9
répondu Ahmed 2011-05-23 09:48:52

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>
9
répondu ChintanThummar 2018-01-23 08:57:04

vous pouvez également utiliser le plugin jQuery form Pour soumettre en utilisant ajax aswell:

http://malsup.com/jquery/form /

8
répondu Richard 2009-07-29 13:33:13
jQuery("a[id=atag]").click( function(){

    jQuery('#form-id').submit();      

            **OR**

    jQuery(this).parents("#form-id").submit();
});
7
répondu GKumar00 2011-09-27 06:30:21

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

7
répondu Nenotlep 2017-05-23 12:26:30

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);    
});
7
répondu muzzamo 2013-04-26 05:04:15

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.

7
répondu A.Z. Soft 2018-04-12 18:08:47

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();
});
5
répondu Tk421 2016-07-15 05:55:30

vous pouvez l'utiliser comme ceci :

  $('#formId').submit();

ou

document.formName.submit();
4
répondu Ram Ch. Bachkheti 2013-06-21 06:22:05

c'est à dire l'astuce pour des formes dynamiques:

$('#someform').find('input,select,textarea').serialize();
4
répondu user2320873 2013-09-12 11:45:30
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.

2
répondu kdniazi 2011-06-22 19:55:47

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();
});
2
répondu NaveenDA 2017-02-22 05:27:28

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; 
});

});
1
répondu danidacar 2011-02-27 19:38:52

vous pourriez le faire comme ceci:

$('#myform').bind('submit', function(){ ... });
1
répondu vdegenne 2011-11-14 10:27:45

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!"); 
    });
-2
répondu brian newman 2009-07-29 13:38:27