0

我在一个页面中有多个表单，我想为每个表单创建一个 ajax 调用。我想通过创建表单元素名称和值的对象来实现它，然后将它们传递给 ajax 调用 - 通过循环每个表单，所以我正在寻找的结果是这样的：

<form>
      <input type="text" name="name_1">

      <input type="password" name="password_1">

      <input type="email" name="email_1">

      <input type="submit" id="submit_1">    
</form>

在jQuery中

var formInputs = $(form);

for(var i=0; i < formInputs.length; i++){
   var formInputItem = formInputs[i];

   var formSubmitId = formInputItem - get the submit id // not sure how to do it

   $(formSubmitId).click(function(e){

    e.preventDefault();

    // var name = $(formInputItem input[name=name]).val(); not show how to extract the element to achive this 
    var name = $("input[name=name]").val(); 

    var password = $("input[name=password]").val();

    var email = $("input[name=email]").val();

    $.ajax({

       type:'POST',

       url:'/ajaxRequest',

       data:{name:name, password:password, email:email},

       success:function(data){

          alert(data.success);

       }

    });



});

}

我知道我的解释有点含糊，但想法很简单，我有多个表单，并且由于每个表单都有不同的提交按钮的 id 以及不同的输入名称 - 我如何将数据传递给 Ajax 调用？

4

3 回答 3

1

我不知道这是否是你的目标。但我希望它有所帮助。

HTML

<div id="myForm"></div>

Javascript

$(document).ready(function(){
    var data ='';

    for (var i = 0; i < 2; i++) {
     data += '<form id="form_'+i+'" class="form">';
     data += '<input type="text" id="name_form_'+i+'"><br>';
     data += '<input type="password" id="password_form_'+i+'"><br>';
     data += '<input type="email" id="email_form_'+i+'"><br>';
     data += '<input type="submit" id="submit_form_'+i+'"><br>';
     data += '</form>';
     data += '<br>';
    }
    $("#myForm").html(data);


  $('.form').on('submit', function(e){
    e.preventDefault();
    var id = $(this).attr('id');
    //alert(id); you can alert the form id to check it.
    var name = $("#name_"+id).val();
    var password = $("#password_"+id).val();
    var email = $("#email_"+id).val();

    alert('Name:'+name+' Password:'+password+' Email:'+email);
  });

});

正如您从 javascript 中看到的，我只是使用 for 循环添加多个表单。我添加id+（循环中的增量）并首先将其显示到 div 。

另一个我把类放在表单标签上，即class="form"。

并添加 onsubmit 功能。

试试： https ://jsfiddle.net/26rmpewx/57/

于 2019-08-19T07:56:18.000 回答
0 
<form>
  <input type="text" name="name_1">
  <input type="password" name="password_1">
  <input type="email" name="email_1">
  <input type="submit" id="submit_1">    
</form>

$(document).ready(function() {

// Submit form with id function.

  $("#btn_id").click(function() {
      var name = $("#name").val(); 
      var email = $("#email").val();

      $.ajax({
      type:'POST',
      url:'/ajaxRequest',
      data:{name:name, email:email},
      success:function(data){
          alert(data.success);
        }
      });
  });

只需尝试使用提交 id 来单击 jquery 中的功能，如向上代码。

于 2019-08-19T07:32:34.567 回答
0

知道了，

 <form>
  <input class="useremail" type="email" name="email_1" value="John@123.com" />
  <input class="username" type="text" name="username_1" value="John" />
  <input type="button" id="submit_1" value="send" />
</form>

<form>
  <input class="useremail" type="email" name="email_2" value="ben@123.com" />
  <input class="username" type="text" name="username_2" value="Ben" />
  <input type="button" id="submit_2" value="send" />
</form>

脚本.js

  $("form").each(function() {
    var userEmail = $(this).find('.useremail').val();
    var userName = $(this).find('.username').val();
    var sendIdButton = $(this).find(':input[type="button"]');

    var ajaxDataObj = {
      name: userName,
      email: userEmail,
    } 

  $('#' + sendIdButton.attr('id')).on('click', function() {
    console.log(ajaxDataObj);

    $.ajax({

       type:'POST',

       url:'/ajaxRequest',

       data:ajaxDataObj,

       success:function(data){

          alert(data.success);

       }

    });
  })
});

这将在 ajax 请求中生成以下有效负载。

姓名：本邮箱：ben@123.com

这是一个例子。

于 2019-08-19T21:20:11.840 回答