jQuery的追加輸入字段，並張貼

$('#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崗位。有一個按鈕可以附加更多的輸入類型文本。jQuery的追加輸入字段，並張貼

我的問題

1當用戶點擊追加更多的投入領域，在$.post(...身邊，我怎麼可以添加更多的腳本，所以我可以將它發佈到下一個頁面？

2在我的PHP頁面

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

我怎麼能知道有多少額外的輸入字段用戶已添加？

3如何限制用戶可以追加的最大3個輸入字段？

來源

2014-02-12 Ben

對於2：可以使用[]語法在輸入名稱：，那麼$ _POST ['interest']將是一個包含所有字段的數組 – luxcem

您是否在發佈請求中手動設置表單域？餿主意，你會使用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[]">

這樣你得到一個數組的後陣列，並且可以使用它像這樣：

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

關於第三個問題，我假設你寫了一個JS方法增加了輸入域的對M＆如果是這樣，你可以實現的限制是這樣的：

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

來源

2014-02-12 09:42:24

請使用前面加上函數形式提交

像

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

來源

2014-02-12 09:44:51 Girish

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 Here is a DEMO/JavaScript部分

來源

2014-02-12 09:55:20

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

來源

2014-02-12 09:56:01

jQuery的追加輸入字段，並張貼

回答

相關問題