Как создать счетчик в JQuery

-3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<script src="../plugin/jquery-1.6.1.min.js"></script> 
<script src="../plugin/jquery.validate.min.js"></script> 
<script src="../plugin/jquery.form.js"></script> 
<link rel="stylesheet" type="text/css" href="../style/form.css" /> 
<script> 
$(document).ready(function() { 
    $("#add").click(function() { 
     var id = "input" + $(this).attr("id").replace("field",""); 
     var intId = $("#buildyourform div").length + 1; 
     var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>"); 
     var fName = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" class=\"fieldname\" />"); 
     var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>"); 
     var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />"); 
     removeButton.click(function() { 
      $(this).parent().remove(); 
     }); 
     fieldWrapper.append(fName); 
     fieldWrapper.append(fType); 
     fieldWrapper.append(removeButton); 
     $("#buildyourform").append(fieldWrapper); 
    }); 
}); 

</script> 


</head> 
<body> 
<div id="stylized" class="myform"> 
<form id="edit" method="post" action="config.php" > 
<fieldset id="buildyourform"> 
    <legend>Build your own form!</legend> 
</fieldset> 
<input type="button" value="Add a field" class="add" id="add" /> 
<input type="submit"> 
<div class="spacer"></div> 

</form> 
</body> 
</html>

Это код динамической формы, однако, в настоящее время названия текстового поля и выберите имя окна «inputadd», я хотел бы изменить его input1, input2, вход3 , это означает, что когда пользователь добавляет поле, это будет счетчик + 1 и имя текстового поля, поле выбора будет этой строкой, и то же самое, если удалить счетчик -1. Как я могу изменить код для достижения этого?Как создать счетчик в JQuery

источник

2012-03-12 user782104

Я рекомендую использовать одиночную кавычку (') вместо двойных кавычек (") для строк в JavaScript. Ваш код будет waaaay более читаемым. –

Тогда ваши строки могут выглядеть примерно так:' ' '', потому что вам не нужно избегать двойных кавычек' '', когда они находятся внутри одинарных кавычек '' ' – Will

Имейте в виду , он работает и наоборот. Вам также не нужно избегать одиночных кавычек из внутренних двойных кавычек. Кроме того, может кто-нибудь объяснить, почему этот вопрос сидит на -3? В общем, если вы собираетесь спускать кого-то, кажется, стоит убедиться, что они знают * почему *. –

Вы должны использовать input[] вместо input1, input2, input3 ...

<form id="your-form"> 
    <li><input type="text" name="input[]" /></li> 
    <li><input type="text" name="input[]" /></li> 
    <li><input type="text" name="input[]" /></li> 
    <li><input type="text" name="input[]" /></li> 
    <li><input type="text" name="input[]" /></li> 
    <li><input type="text" name="input[]" /></li> 
    <input type="submit" /> 
</form>

Это должно дать вам полевые данные POST как массив всех input[] элементов, например, в PHP:

foreach ($_POST['input'] as $input) { 
    echo $input . PHP_EOL; 
}

Таким образом, вам не нужно будет учитывать количество в JavaScript, вам нужно будет добавить еще одно поле с name="input[]".

источник

2012-03-12 19:09:55 joar

Thankyou, как я могу добавить строку, например. Введите имя перед каждым полем ввода? – user782104

два пути - с глобальной переменной:

int formcount = 0; 

$(document).ready(function() { 
    $("#add").click(function() { 
     var id = formcount++; 
    }); 
});

Или подсчитывать, сколько элементов с классом 'fieldwrapper' есть в «#buildyourform» (предпочтительнее):

$(document).ready(function() { 
    $("#add").click(function() { 
     var id = $('#buildyourform .fieldwrapper').size(); 
    }); 
});

(Только помните, что идентификатор не может начинаться с цифрой, вы должны префиксом с буквенным символом)

источник

2012-03-12 19:02:12 Andre

Вы, вероятно, имели в виду '.length' вместо' .count() ' – gdoron

@gdoron На самом деле, я имел в виду [размер] (http://api.jquery.com/size/) - Исправлено, спасибо! – Andre

_ "Метод .size() функционально эквивалентен свойству .length, однако свойство .length является предпочтительным, поскольку оно не имеет накладных расходов на вызов функции." _ – gdoron

Как создать счетчик в JQuery

ответ

Смежные вопросы