Question

$('#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(...的一侧如何添加更多脚本，以便将其发布到下一页？

在我的php页面中

2

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

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

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

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

Answer 2

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

Answer 3

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 */
    }
}

Answer 4

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

喜欢

$("#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; 
})

jquery追加输入字段和帖子

4 个答案: