jquery追加输入字段并发布答案

【问题标题】：jquery append input field and postjquery追加输入字段并发布
【发布时间】：2014-03-10 13:04:10
【问题描述】：

$('#submit').click(function(){
    $.post(
        '/foo.php',{
            name:myform.name.value, 
            interest:myform.interest.value,
            interest2:myform.interest2.value...
        }        
});

<input type="button" value="Add more interest" />

我有一个使用 jquery 的表单。有一个按钮可以追加更多的输入类型文本。

我的问题

1 当用户单击并附加更多输入字段时，在$.post(... 一侧如何添加更多脚本，以便将其发布到下一页？

2 在我的 php 页面中

if(isset($_POST['interest1'], $_POST['interest2']...)){}

我如何知道用户添加了多少额外的输入字段？

3 如何限制用户最多可以附加 3 个输入字段？

【问题讨论】：

对于 2：您可以在输入名称中使用 [] 语法：，然后 $_POST['interest'] 将是一个包含所有字段的数组

标签： javascript php jquery

【解决方案1】：

您是否在发布请求中手动设置表单字段？坏主意，你最好使用jQuery的序列化方法：

$.post("/foo.php", $("#myForm" ).serialize() );

第二个问题：在表单元素上使用数组命名：

<input type="text" name="interest[]">
<input type="text" name="interest[]">
<input type="text" name="interest[]">
<input type="text" name="interest[]">

这样你就可以在你的 post 数组中得到一个数组，并且可以像这样使用它：

foreach ($_POST['interest'] as $interest) {
    doStuff();
}

对于您的第三个问题，我假设您编写了一个 JS 方法向表单添加输入字段？如果是这样，您可以实施这样的限制：

window.formFieldCount = 1;
function addFormField() {
    if (window.formFieldCount >= 3) {
        alert('You can only add three interests!');
        return false;
    }

    // Do your form magic here
    window.formFieldCount++;
}

【讨论】：

【解决方案2】：

请在表单提交前使用前置功能

喜欢

$("#myForm").prepend("<input type=\"text\" name=\"interest"+counter+"\"").submit(function(){
 console.log($("#myForm" ).serializeArray())
 $.post(Event.target.action, $(Event.target).serializeArray(), function(data){
        // your code here
 })
 return false; 
})

【讨论】：

【解决方案3】：

HTML：

<form name="some_name">
  <div id="interests">
    <input type="text" name="interests[]" />
  </div>
  <input id="more-interests" type="button" value="Add more interest" />
  <input id="submit" type="button" value="Submit" />
</form>

Javascript：

$(document).ready(function(){
  var maximumNumberOfInterests = 3;
  $('#more-interests').click(function(e){
    if ($("input[name='interests[]']").size() < maximumNumberOfInterests) {
      $('#interests').append('<input type="text" name="interests[]" />');
    } else {
      alert('The maximum number of interests has been reached!');
    }
  });

  $('#submit').click(function(){
    $.post('/foo.php', $('form').serialize());
  });
});

PHP：

if (count($_POST['interests'])) {
  foreach ($_POST['interests'] as $interest) {
    echo $interest;
  }
}

HTML/Javascript 部分的Here is a DEMO

【讨论】：

【解决方案4】：

q2。你能像这样改变形式吗：

静态输入

<input name='static[something]'>
<input name='static[somebody]'>
<input name='static[etc]'>

和动态生成的输入

<input name='dynamic[]'>
<input name='dynamic[]'>
<input name='dynamic[]'>

php

if (isset($_POST['dynamic']))
{
    foreach ($_POST['dynamic'] as $key => $value) 
    {
        /* do some shit with dynamic inputs */
    }
}

【讨论】：