【问题标题】:jQuery: Add Infinite Inputs and Process Form DatajQuery:添加无限输入和处理表单数据
【发布时间】:2012-11-24 20:55:27
【问题描述】:

我有一个联系人数据库表单,用户可以在其中单击加号并添加无限数量的电话输入字段、电子邮件字段、地址字段。我已经从回答的其他问题中找到了如何做到这一点。

现在我需要知道如何处理这些数据。每个可以无限添加的字段都具有相同的名称。我在想这些将被添加到一个数组中,我可以在其中使用 for 或 .each 并循环遍历它。

最后一件事是我通过 jQuery Ajax 将这些信息发送到一个 PHP 页面,该页面将处理所有数据。我在 PHP 方面比在 jQuery 方面更熟练,但 jQuery 显然对于不必刷新页面很有用。我的问题是这是不好的做法吗?它似乎有点慢。我知道我可以错误检查并处理 js 中的数据,然后将处理后的数据发送到 PHP 页面以输入到数据库中,但我担心使用 js 进行错误检查有多难。

【问题讨论】:

  • 哪一点你不知道该怎么做?

标签: jquery html css forms


【解决方案1】:

在添加表单元素时,注意如果在名称末尾加上方括号,则发布的数据将被构造为类似数组的对象:

<input type="text" name="extrainput[]"/>

然后您可以迭代结果并处理用户输入。

因此,例如,如果您需要无限数量的文本框供用户输入其语言,您可以使用:

$('#addbutton').click(function(){
    $('#myform').append('<input type="text" name="languages[]"/>')
});

其中addbutton 是用户单击以添加另一个输入的按钮的 ID。

要遍历这些表单元素,您可以使用:

$('[name="languages[]"]').each(...)

【讨论】:

  • 我忘了说我知道你可以做到这一点,但你如何在 jQuery 中处理呢?
  • 您现在如何创建字段?
  • @TylerDusty 编辑了我的答案
  • @Asad 我已经有了创建输入的方法。我正在使用完全相同的东西,但没有 []。我要问的是你如何处理 jQuery 中的所有语言[]。比如我如何获取值并存储它们?
  • @TylerDusty 你想把它们存放在哪里?我的意思是它们在您的页面中,如果您想遍历它们,请使用 $('[name="languages[]"]').each(...)
【解决方案2】:

两种处理方式,在 PHP 中都有相似的结果

第 1 行

<input type="text" name="fullname[]" />
<input type="text" name="telephone[]" />

第 2 行

<input type="text" name="fullname[]" />
<input type="text" name="telephone[]" />

等等

$_POST 将有一个值数组,其索引显示它们属于哪一行

第 1 行

<input type="text" name="row[1][fullname]" />
<input type="text" name="row[1][telephone]" />

第 2 行

<input type="text" name="row[2][fullname]" />
<input type="text" name="row[2][telephone]" />

$_POST 每行有一个数组

【讨论】:

  • 不知道为什么有人会反对,但如果我在名称字段中使用phone[],那么在PHP 中foreach($_POST('phone') as $p){//do something for each} 会起作用吗?
  • 很明显,提出问题的人知道这部分过程,而且问题是关于 jquery 的。下次 - 检查标签!
  • 我的下一个问题是如何通过 Jquery Ajax 将大量表单数据(在这种情况下可能是无限的)发送到 PHP 页面?我已经看到将所有表单数据添加到 FormData obj 中,但这并没有得到很好的解释。
【解决方案3】:

你可以简单地使用 jQuery(yourDiv).data('mydata', anyObject); 然后迭代

jQuery(selector of your divs).each(function(item){
    var obj = jQuery(item).data('mydata');
    // do anything you want here
})

【讨论】:

    【解决方案4】:

    您可以在 html 中使用数组作为名称:

    var i = 0;
    $('.add').click(function(){
       var newE = $('<input/>').attr({type:'text',name:'data[]',value:i,'class':'inputs'});
       $('.myform').append(newE).hide().fadeIn('1000');
    });
    

    以及使用 ajax 发送:

    var data = {};
    $.each($('.inputs'),function(i,val){
          data[i] = $(val).val();
    });
    callajaxfunction(data);  
    

    然后你可以用 php 得到这个数组:

    foreach($_POST['data'] as $key => $value){
       echo $key.':'.$value.'<br>';
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-31
      • 1970-01-01
      相关资源
      最近更新 更多