JQuery добавить поле ввода и пост

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(... как я могу добавить больше сценария, так что я могу отправить его на следующую страницу?

2 в моей странице PHP

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[]"> 

Таким образом, вы получите массив в вашем после массива и может использовать его следующим образом:

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

Пожалуйста, используйте функцию добавьте в начале, прежде чем отправки формы

Как

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

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

Here is a DEMO в HTML/Javascript часть

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