Soumettez un formulaire en utilisant jQuery [fermé]

Je souhaite soumettre un formulaire à l'aide de jQuery. Quelqu'un peut-il fournir le code, une démo 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 de la documentation avec des exemples. Pour soumettre un formulaire normalement, consultez la submit()méthode sur ce site. Pour AJAX , il existe de nombreuses possibilités différentes, bien que vous souhaitiez probablement utiliser les méthodes ajax()ou post(). Notez que post()c'est vraiment juste un moyen pratique d'appeler la ajax()méthode avec une interface simplifiée et limitée.

Une ressource critique, que j'utilise tous les jours, que vous devriez mettre en signet est Comment fonctionne jQuery . 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. Il existe des paramètres supplémentaires que vous pouvez ajouter à la ajax()demande pour gérer les erreurs, etc.

Vous devrez utiliser $("#formId").submit().

Vous appelez généralement cela à 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, cela devrait maintenant fonctionner avec jquery - ajax / post maintenant vous pouvez:

• Accrochez-vous à la soumission - événement de votre formulaire
• empêcher la fonctionnalité par défaut de soumettre

• faites 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 serialize()fonction fonctionne dans l'exemple ci-dessus, tous les éléments du formulaire doivent avoir leur nameattribut 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'];

Dans jQuery, je préférerais ce qui suit:

$("#form-id").submit()

Mais là encore, vous n'avez vraiment pas besoin de jQuery pour effectuer cette tâche - utilisez simplement du JavaScript normal:

document.getElementById("form-id").submit()

Tiré 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 plusieurs heures pour découvrir que submit () ne fonctionnerait pas ainsi.

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>

cela 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 une astuce pour faire un post de données de formulaire réformé avec une méthode aléatoire http://www.jackart4.com/article.html

$("form:first").submit();

Voir les événements / soumettre .

Notez que si vous avez déjà installé un écouteur d'événement submit pour votre formulaire, l'appel interne à submit ()

jQuery('#<form-id>').submit( function(e){ 
    e.preventDefault();
    // maybe some validation in here
    if ( <form-is-valid> ) jQuery('#<form-id>').submit();
});

ne fonctionnera pas car il essaie d'installer un nouvel écouteur d'événements pour l'événement d'envoi 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();
    });

Vous pouvez également utiliser le plugin de formulaire jquery pour soumettre en utilisant ajax aswell:

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

jQuery("a[id=atag]").click( function(){

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

            **OR**

    jQuery(this).parents("#form-id").submit();
});

Notez que dans Internet Explorer, il existe des problèmes avec les formulaires créés 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éez l'élément de formulaire et attachez-le avant de le 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 le formulaire comme dans l'exemple 1, puis le joindre ne fonctionnera pas - dans IE9, il génère une erreur JScript DOM Exception: HIERARCHY_REQUEST_ERR (3)

Accessoires à 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'ID:

function handleForm(field) {
    $(field).closest("form").submit();
}

Par exemple, si vous souhaitez gérer l'événement de clic pour un bouton, vous pouvez utiliser

$("#buttonID").click(function() {
    handleForm(this);    
});

Si le bouton est situé entre les balises du 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();

Astuce IE pour les formulaires dynamiques:

$('#someform').find('input,select,textarea').serialize();

Mon approche légèrement différente Changez le bouton en bouton de soumission, 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 donné via AJAX.

Je recommande une solution générique pour que vous n'ayez pas à ajouter le code pour chaque formulaire. Utilisez le plugin de formulaire jquery (http://jquery.malsup.com/form/) et ajoutez ce code.

$(function(){
$('form.ajax_submit').submit(function() {
    $(this).ajaxSubmit();
            //validation and other stuff
        return false; 
});

});

vous pouvez le faire comme ceci:

$('#myform').bind('submit', function(){ ... });

J'ai également utilisé ce qui suit pour soumettre un formulaire (sans le soumettre) via Ajax:

  jQuery.get("process_form.php"+$("#form_id").serialize(), {}, 
    function() {
      alert("Okay!"); 
    });