如何动态地将输入字段添加到表单？

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

Answer 1

我会使用jQuery并附加新的输入。

Answer 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

Answer 3

I created soemthing similar and I think it would help you. I used jQuery to create input fields dynamically. Please check this link : Dynamically add form fields

Answer 4

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

Answer 5

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.

Answer 6

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>