jQuery：添加无限输入并处理表单数据 [英] jQuery: Add Infinite Inputs and Process Form Data

问题描述

我有一个联系人数据库的表单，用户可以点击一个加号并添加无限数量的电话输入字段，电子邮件字段，地址字段。我已经找到了解决其他问题的方法。

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

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

解决方案

在添加表单元素时，请注意，如果您在名称的末尾添加方括号，则发布的数据将被结构化作为类似数组的对象：

 < input type =textname =extrainput []/> 
  

然后，您可以遍历结果并处理用户输入。

例如，如果您需要有无限数量的文本框供用户输入他的语言，您可以使用：

 < $ c $> $（'＃addbutton'）。click（function（）{
 $（'＃myform'）。append（'< input type =textname =languages []/ >'）
}）; 
  

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

要遍历这些表单元素，可以使用：

 $（'[name =languages []]'）。each（...）
  

I've got a form for a contact database where the user can click a plus symbol and add infinite number of phone entry fields, email fields, address fields. I've already found out how to do this from other questions answered.

Now I need to know how to process that data. Each field which can be added infinitely has the same name. I was thinking these would be added to an array in which I could use a for or .each and loop through it.

One last thing is that I was sending this information through jQuery Ajax to a PHP page which would process all the data. I'm much more skilled in PHP than I am in jQuery, but jQuery is useful for not having to refresh a page, obviously. My question is is this bad practice? It seems to be a little slower. I know I could error check and process the data in js then send the processed data to a PHP page to be input in a database but I'm worried on how much harder it is to error check with js.

解决方案

When adding form elements, note that if you add square brackets to the end of the name, the posted data will be structured as an array-like object:

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

You can then iterate over the results and process user input.

So for example if you needed to have an indefinite number of textboxes for the user to enter his languages, you would use:

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

where addbutton is the id of the button the user would click to add another input.

To iterate over these form elements, you can use:

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

这篇关于jQuery：添加无限输入并处理表单数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！