$('#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 post. Существует кнопка, которая может добавить больше текста типа ввода.
Мои вопросы
1, когда пользователь нажимает и добавляет больше поля ввода, в стороне от $.post(... как добавить дополнительный скрипт, чтобы я мог опубликовать его на следующей странице?
2 на моей странице php
if(isset($_POST['interest1'], $_POST['interest2']...)){}
как я могу узнать, сколько добавленных дополнительных полей добавлено пользователем?
3 как я могу ограничить максимум 3 поля ввода, которые пользователь может добавить?
Вы настраиваете поля формы вручную в своем почтовом запросе? Плохая идея, вам лучше использовать метод сериализации 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++; }
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
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 */ } }
Пожалуйста, используйте функцию prepend перед отправкой формы.
подобно
$("#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; })