Question

我不是一个网络程序员，但我正在创建一个简单的Web应用程序，其中有一个表单，用户可以输入一系列点（x，y，z），但我不知道有多少用户将要进入。我不想猜测可能的最大值（100可能？）并在表单上放置100个字段，因为它看起来很难看。当用户在不联系服务器的情况下输入数据时，添加更多字段（或取消隐藏字段）的最简单方法是什么。

目前我只是使用html＆amp; PHP，但我假设这样做我需要javascript？

目前我的代码看起来像这样，因为用户输入数据，我想要显示另一行。

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

任何想法最简单的方法？感谢...

Answer 1

我会使用jQuery和append新输入。

Answer 2

你很可能不得不使用javascript，是的。你可以使用它或者自己编写它作为参考：

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

Answer 3

我创造了类似的东西，我认为它会对你有所帮助。我使用jQuery动态创建输入字段。请检查此链接：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

你说的是你手写输入标签？或者你是说你想要一个动态的动作，用户点击一个按钮，它会添加更多的表行？

无论如何，对于你的代码，你只需要一个循环，就像这样。我假设$ data是你想要基于可能来自数据库的数组设置的任何数据：

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

当然你不能复制并超越上述内容，但这是一个很好的起点。

为了动态地执行它，你不能使用php。你想要使用的是javascript ajax和php组合。

Answer 6

在所有段落中添加一些HTML。

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

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

6 个答案: