Home/ Questions/Q 7631519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T06:22:27+00:00

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

  • 0
<!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>

This is the code of a dynamic form , however, currently the text box name and select box name is ‘inputadd’, i would like to change it to input1, input2, input3, that means when user add a field , it will be counter+1 and the name of text field , select field will be that string, and the same if remove counter -1 , How can i modify the code to achieve this?Thank you

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You should use input[] instead of 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>​​​​​​​​​​​​​​​​​

    This should give you the POST field data as an array of all the input[] elements, for example in PHP:

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

    that way you won’t have to keep count in JavaScript, you’ll only have to add another field with name="input[]".

    • 0