Trimiteți datele din formular folosind ajax (Programare, Javascript, Php, Jquery, Ajax)

adib16 a intrebat.

Vreau să trimit toate datele de intrare într-un formular cu ajax .Am un formular ca acesta.

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

Și în fișierul .js avem următorul cod :

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

Dar acest lucru nu funcționează.nu vreau să folosesc datele din Formular .

Comentarii

  • dacă doriți o soluție generală fără hardcode, verificați răspunsul meu. –  > Por Mehran Hatami.
7 răspunsuri
Mehran Hatami

în măsura în care dorim să trimitem toate câmpurile de intrare din formular care au atributul name, puteți face acest lucru pentru toate formularele, indiferent de numele câmpurilor:

Prima soluție

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

A doua soluție: în această soluție poți crea un array de valori de intrare:

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

Comentarii

  • Minunat! Prima soluție funcționează pentru array-uri multidimensionale, cum ar fi ... name="item[0][id]" ! .serialize(), , pe de altă parte – nu va funcționa pentru array-uri multidimensionale! –  > Por Arnis Juraga.
  • @Musa – Cum se controlează serializarea elementelor de formular în cazul în care există un număr de câmpuri de formular, dar numai câteva trebuie trimise. De exemplu, ar putea exista unele intrări precompletate, cum ar fi tipul de document sau data curentă, care ar putea fi excluse din date. –  > Por user12379095.
  • @user12379095 puteți dezactiva câmpurile pe care nu le doriți serializate -.  > Por Musa.
Satpal

În funcția dvs. form este un obiect DOM, Pentru a utiliza attr() trebuie să îl convertiți în obiect jQuery.

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

Cu .serialize()

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

În plus, puteți utiliza .serialize()

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

Tomáš Zato – Reinstaurați-o pe Monica

Am scris eu însumi o funcție care convertește majoritatea lucrurilor pe care cineva ar putea dori să le trimită prin AJAX în interogare GET sau POST.
Următoarea parte a funcției ar putea fi de interes:

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

Nu are nevoie de jQuery, deoarece eu nu îl folosesc. Dar sunt sigur că funcția jquery’s $.post acceptă un șir de caractere ca argument secundar.

Iată întreaga funcție, celelalte părți nu sunt comentate totuși. Nu pot promite că nu există bug-uri în ea:

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

vee

Codul pe care l-ați postat are două probleme:

Prima: <input type="buttom" ar trebui să fie <input type="button".... Probabil că este doar o greșeală de scriere, dar fără button introducerea ta va fi tratată ca type="text" deoarece tipul de intrare implicit este text.

În al doilea rând: În pagina dvs. function f() utilizați tipul form crezând că este deja un parametru jQuery utilizând form.attr("action"). Apoi, în mod similar, în $.post treceți fname și lname care sunt HTMLInputElements. Cred că ceea ce doriți este url-ul de acțiune al formularului și valorile elementelor de intrare.

Încercați cu următoarele modificări:

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

Iată programul.

Subash Selvaraj

puteți utiliza metoda serialize a lui jquery pentru a obține valorile formularului. Încercați astfel

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

ImadOS

puteți încerca acest lucru :

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