How Can I Dynamically Add Input Fields To A Form?

July 25, 2024 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 :

<divclass="form-group app-edu"><labelfor="Example Details"class="col-xs-3 col-sm-2 control- label">Example Details</label><divclass="form-group add-field"><divclass="user"><selectname="xx[]"id="xx"required><optionvalue="">Education</option><optionvalue="Class 10">Class 10</option><optionvalue="Class 12">Class 12</option><optionvalue="Diploma">Diploma</option><optionvalue="PG Diploma">PG Diploma</option><optionvalue="Bachelors Degree">Bachelors Degree</option><optionvalue="Masters Degree">Masters Degree</option><optionvalue="Other Certifications">Other Certifications</option></select><inputtype="text"placeholder="Name of Board"name="xx[]"id="xx"required><inputtype="text"placeholder="Name of Institute"name="xx[]"requiredid="xx"><inputtype="text"placeholder="xx"name="xx[]"requiredid="xx"><selectname="xx[]"id="xx"required><optionvalue="">xx</option><optionvalue="xx">xx</option><optionvalue="xx">xx</option><optionvalue="xx">xx</option></select><inputtype="text"placeholder="Year and Month of Exam"name="date[]"requiredid="date"autocomplete="off"></div><divclass="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 allowedvar wrapper = $(".user"); //Fields wrappervar add_button = $(".add-more"); //Add button IDvar 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:

<?phpfor($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><scriptsrc="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 Manual