How can I dynamically add input fields to a form?

Question

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 to enter. I don't want to guess the probable maximum (100 maybe?) and put 100 fields on the form because it would look ugly. What's the easiest way to add more fields (or unhide fields) as the user enters data without contacting the server.

Currently I'm just using html & php, but I assume to do this I'll need javascript?

Currently my code looks like this, as the user enters data, I want another row to appear.

<form action="edit.php" method="post"> 
  <table border=1> 
    <tr> 
      <td> 
      <td>X
      <td>Y
      <td>Z
    </tr> 
    <tr> 
      <td>1</td> 
      <td><input type=text name=x1 size=10 value="0.4318"></td> 
      <td><input type=text name=y1 size=10 value="0.0000"></td> 
      <td><input type=text name=z1 size=10 value="0.1842"></td> 
    </tr> 
    <tr> 
      <td>2</td> 
      <td><input type=text name=x2 size=10 value="0.4318"></td> 
      <td><input type=text name=y2 size=10 value="0.0000"></td> 
      <td><input type=text name=z2 size=10 value="-0.1842"></td> 
    </tr> 
    <tr> 
      <td>3</td> 
      <td><input type=text name=x3 size=10 value="-0.3556"></td> 
      <td><input type=text name=y3 size=10 value="0.0000"></td> 
      <td><input type=text name=z3 size=10 value="0.1636"></td> 
    </tr> 
    ... I want more to appear here...
  </table> 
  <button name="submit" value="submit" type="submit">Save</button> 
</form>

Any idea the easiest way? Thanks...

jjclarkson · Accepted Answer · 2009-08-14 18:55:17Z

9

I would use jQuery and append the new inputs.

answered Aug 14, 2009 at 18:55

jjclarkson

5,9647 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

cakeforcerberus · Accepted Answer · 2009-08-14 18:53:59Z

5

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

answered Aug 14, 2009 at 18:53

cakeforcerberus

4,6576 gold badges34 silver badges42 bronze badges

Comments

Harish Patel · Accepted Answer · 2018-04-09 11:52:36Z

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--;
    })

Daniel · Accepted Answer · 2009-08-14 20:21:30Z

0

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.

answered Aug 14, 2009 at 20:21

Daniel

3742 silver badges5 bronze badges

1 Comment

Roland Rabien Over a year ago

I want to do it the dynamic way.

Tejas Savaliya · Accepted Answer · 2013-06-26 10:24:04Z

0

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>

answered Jun 26, 2013 at 10:24

Tejas Savaliya

6389 silver badges9 bronze badges

Collectives™ on Stack Overflow

How can I dynamically add input fields to a form?

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related