How Can I Dynamically Add Input Fields To A Form?

October 29, 2022 Post a Comment

I'm not much of a web programmer, but I'm creating a simple web app that has a form where the user can enter a series of points (x,y,z) but I don't know how many the user is going

Solution 1:

I would use jQuery and append the new inputs.

Solution 2:

You will most likely have to use javascript, yes. You can use this or write your own using it as a reference:

http://www.mredkj.com/tutorials/tableaddrow.html

Solution 3:

1: HTML :

  <div class="form-group app-edu">
   <label for="Example Details" class="col-xs-3 col-sm-2 control- label">Example Details</label>
    <div class="form-group add-field">
        <div class="user">
            <select name="xx[]" id="xx" required>
                <option value="">Education</option>
                <option value="Class 10">Class 10</option>
                <option value="Class 12">Class 12</option>
                <option value="Diploma">Diploma</option>
                <option value="PG Diploma">PG Diploma</option>
                <option value="Bachelors Degree">Bachelors Degree</option>
                <option value="Masters Degree">Masters Degree</option>
                <option value="Other Certifications">Other Certifications</option>
            </select>   

        <input type="text" placeholder="Name of Board" name="xx[]" id="xx" required>                
        <input type="text" placeholder="Name of Institute" name="xx[]" required id="xx">
        <input type="text" placeholder="xx" name="xx[]" required id="xx">
        <select name="xx[]" id="xx" required>
            <option value="">xx</option>
            <option value="xx">xx</option>
            <option value="xx">xx</option>
            <option value="xx">xx</option>
        </select>
        <input type="text" placeholder="Year and Month of Exam" name="date[]" required id="date" autocomplete="off">
        </div>

        <div class="add-more"><span>+</span>Add More</div>
     </div>
   </div>

2: PHP

    if(isset($_POST['submit']))
    {

            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);
            $xx= json_encode($_POST["xx"]);

     $query=mysql_query("INSERT INTO `xxx` (`xx`, `xxx`, `xxx`) VALUES ('NULL', '$xx','$xx','$xx')");
    }

3: JS

    var data_fo = $('.add-field').html();
    var sd = '<div class="remove-add-more">Remove</div>';
    var data_combine = data_fo.concat(sd);
    var max_fields = 5; //maximum input boxes allowed
    var wrapper = $(".user"); //Fields wrapper
    var add_button = $(".add-more"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
      e.preventDefault();
      if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append(data_combine); //add input box
        //$(wrapper).append('<div class="remove-add-more">Remove</div>')
      }
      // console.log(data_fo);
    });

    $(wrapper).on("click",".remove-add-more", function(e){ //user click on remove text
        e.preventDefault();
        $(this).prev('.user').remove();
        $(this).remove();
        x--;
    })

Solution 4:

What you're saying is that you're hand writing the input tags? Or are you saying that you want a dynamic action where a user clicks a button and it adds more table rows?

In anycase, for your code, you just need a loop, like so. I assume $data is whatever data you want to set based on an array that is probably from the database or something:

<?php
for($i=0, $iMaxSize=count($data); $i<$iMaxSize; $i++)
{
?>
 <tr> 
  <td><?= $i+1 ?></td> 
  <td><input type=text name=x1 size=10 value="<?=$data[$i]['something']"></td> 
  <td><input type=text name=y1 size=10 value="<?=$data[$i]['somethingelse']"></td> 
  <td><input type=text name=z1 size=10 value="<?=$data[$i]['somethingelseagain']"></td> 
 </tr> 
<?php
} // end for 
?>

Of course you can't copy and past the above, but that's a good starting point.

For dynamically doing it, you can't use php. What it sounds like you want to use is javascript ajax, and php combination.

Solution 5:

Appends some HTML to all paragraphs.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:yellow; }
</style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <p>I would like to say: </p>
<script>
  $("p").append("<strong>Hello</`enter code here`strong>");
</script>

</body>
</html>

Html5 Code Review