web-dev-qa-db-fra.com

Envoyer des données de formulaire en utilisant ajax

Je veux envoyer toutes les entrées dans un formulaire avec ajax .J'ai un formulaire comme celui-ci.

<form action="target.php" method="post" >
    <input type="text" name="lname" />
    <input type="text" name="fname" />
    <input type="buttom" name ="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " >
</form>

Et dans le fichier .js, nous avons le code suivant:

function f (form ,fname ,lname ){
    att=form.attr("action") ;
    $.post(att ,{fname : fname , lname :lname}).done(function(data){
        alert(data);
    });
    return true;

Mais cela ne fonctionne pas. Je ne veux pas utiliser les données de formulaire.

javascriptphpjqueryajax
11
adib16

dans la mesure où nous souhaitons envoyer tous les champs de saisie de formulaire ayant un attribut name, vous pouvez le faire pour tous les formulaires, quel que soit le nom du champ:

Première solution 

function submitForm(form){
    var url = form.attr("action");
    var formData = {};
    $(form).find("input[name]").each(function (index, node) {
        formData[node.name] = node.value;
    });
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}

Deuxième solution : dans cette solution, vous pouvez créer un tableau de valeurs d'entrée:

function submitForm(form){
    var url = form.attr("action");
    var formData = $(form).serializeArray();
    $.post(url, formData).done(function (data) {
        alert(data);
    });
}
25
Mehran Hatami

Dans votre fonction form est un objet DOM, vous devez le convertir en objet jQuery pour utiliser attr().

function f(form, fname, lname) {
    action = $(form).attr("action");
    $.post(att, {fname : fname , lname :lname}).done(function (data) {
        alert(data);
    });
    return true;
}

Avec .serialize ()

function f(form, fname, lname) {
    action = $(form).attr("action");
    $.post(att, $(form).serialize() ).done(function (data) {
        alert(data);
    });
    return true;
}

De plus, vous pouvez utiliser .serialize ()

3
Satpal
$.ajax({
  url: "target.php",
  type: "post",
  data: "fname="+fname+"&lname="+lname,
}).done(function(data) {
  alert(data);
});
2
user3223863

Le code que vous avez posté a deux problèmes:

D'abord: <input type="buttom" devrait être <input type="button".... C'est probablement juste une faute de frappe mais sans button votre entrée sera traitée comme type="text" car le type d'entrée par défaut est text.

Deuxièmement: dans votre définition function f(), vous utilisez le paramètre form en pensant qu'il s'agit déjà d'un objet jQuery à l'aide de form.attr("action"). De même, dans l'appel à la méthode $.post, vous transmettez fname et lname qui sont HTMLInputElements. Je crois que ce que vous voulez, c'est l'URL d'action du formulaire et les valeurs de l'élément d'entrée.

Essayez avec les modifications suivantes:

HTML 

<form action="/echo/json/" method="post">
    <input type="text" name="lname" />
    <input type="text" name="fname" />

    <!-- change "buttom" to "button" -->
    <input type="button" name="send" onclick="return f(this.form ,this.form.fname ,this.form.lname) " />
</form>

JavaScript

function f(form, fname, lname) {
    att = form.action; // Use form.action
    $.post(att, {
        fname: fname.value, // Use fname.value
        lname: lname.value // Use lname.value
    }).done(function (data) {
        alert(data);
    });
    return true;
}

Voici le violon . 

2
vee

J'ai moi-même écrit une fonction qui convertit la plupart des éléments que l'on peut envoyer via AJAX en GET de la requête POST.
Suivre une partie de la fonction pourrait être intéressant:

  if(data.tagName!=null&&data.tagName.toUpperCase()=="FORM") {
    //Get all the input elements in form
    var elem = data.elements;
    //Loop through the element array
    for(var i = 0; i < elem.length; i++) {
      //Ignore elements that are not supposed to be sent
      if(elem[i].disabled!=null&&elem[i].disabled!=false||elem[i].type=="button"||elem[i].name==null||(elem[i].type=="checkbox"&&elem[i].checked==false))
        continue; 
      //Add & to any subsequent entries (that means every iteration except the first one) 
      if(data_string.length>0)
        data_string+="&";
      //Get data for selectbox
      if (elem[i].tagName.toUpperCase() == "SELECT")
      {
        data_string += elem[i].name + "=" + encodeURIComponent(elem[i].options[elem[i].selectedIndex].value) ;
      }
      //Get data from checkbox
      else if(elem[i].type=="checkbox")
      {
        data_string += elem[i].name + "="+(elem[i].value==null?"on":elem[i].value);
      }
      //Get data from textfield
      else
      {
        data_string += elem[i].name + (elem[i].value!=""?"=" + encodeURIComponent(elem[i].value):"=");
      }
    }
    return data_string; 
  }

Il n’a pas besoin de jQuery puisque je ne l’utilise pas. Mais je suis sûr que le $.post de jquery accepte la chaîne comme argument de seconde.

Voici la fonction entière, les autres parties ne sont cependant pas commentées. Je ne peux pas promettre qu'il n'y a pas de bugs dedans:

function ajax_create_request_string(data, recursion) {
  var data_string = '';
  //Zpracovani formulare
  if(data.tagName!=null&&data.tagName.toUpperCase()=="FORM") {
    //Get all the input elements in form
    var elem = data.elements;
    //Loop through the element array
    for(var i = 0; i < elem.length; i++) {
      //Ignore elements that are not supposed to be sent
      if(elem[i].disabled!=null&&elem[i].disabled!=false||elem[i].type=="button"||elem[i].name==null||(elem[i].type=="checkbox"&&elem[i].checked==false))
        continue; 
      //Add & to any subsequent entries (that means every iteration except the first one) 
      if(data_string.length>0)
        data_string+="&";
      //Get data for selectbox
      if (elem[i].tagName.toUpperCase() == "SELECT")
      {
        data_string += elem[i].name + "=" + encodeURIComponent(elem[i].options[elem[i].selectedIndex].value) ;
      }
      //Get data from checkbox
      else if(elem[i].type=="checkbox")
      {
        data_string += elem[i].name + "="+(elem[i].value==null?"on":elem[i].value);
      }
      //Get data from textfield
      else
      {
        if(elem[i].className.indexOf("autoempty")!=-1) {
          data_string += elem[i].name+"=";
        }
        else
          data_string += elem[i].name + (elem[i].value!=""?"=" + encodeURIComponent(elem[i].value):"=");
      }
    }
    return data_string; 
  }
  //Loop through array
  if(data instanceof Array) {
    for(var i=0; i<data.length; i++) {
      if(data_string!="")
        data_string+="&";
      data_string+=recursion+"["+i+"]="+data[i];
    }
    return data_string;
  }
  //Loop through object (like foreach)
  for(var i in data) {
    if(data_string!="")
      data_string+="&";
    if(typeof data[i]=="object") {
      if(recursion==null)
        data_string+= ajax_create_request_string(data[i], i);
      else
        data_string+= ajax_create_request_string(data[i], recursion+"["+i+"]");
    }
    else if(recursion==null)
      data_string+=i+"="+data[i];
    else 
      data_string+=recursion+"["+i+"]="+data[i];
  }
  return data_string;
}
2
Tomáš Zato

vous pouvez utiliser la méthode serialize de jquery pour obtenir les valeurs de formulaire. Essayez comme ça

<form action="target.php" method="post" >
<input type="text" name="lname" />
<input type="text" name="fname" />
<input type="buttom" name ="send" onclick="return f(this.form) " >
</form>

function f( form ){
    var formData = $(form).serialize();
    att=form.attr("action") ;
    $.post(att, formData).done(function(data){
        alert(data);
    });
    return true;
}
0
Subash Selvaraj

pouvez-vous essayer ceci:

function f (){
fname  = $("input[name='fname']").val();
lname  = $("input[name='fname']").val();
att=form.attr("action") ;
$.post(att ,{fname : fname , lname :lname}).done(function(data){
alert(data);
});
return true;
}
0
ImadOS