Javascript PHP创建并添加另一个按钮_Javascript_Php_Html

Javascript PHP创建并添加另一个按钮

javascript php html

Javascript PHP创建并添加另一个按钮,javascript,php,html,Javascript,Php,Html,我正在为营地注册创建一个php页面，非常基本，我不想在页面上粘贴多个名称标签/文本框。我当时的想法是，默认情况下有一个文本框和一个标签，可能还有蓝色文本，上面写着“添加另一个”（甚至是一个按钮），当按下该按钮时，页面将保留当前数据，但添加一个额外的标签和文本框，以便添加更多信息。这就是我获取1的数据的方式，为了实现我的上述结果，可以很容易地对其进行修改吗 <td><label for="lblName">Campers Name:</label></td

我正在为营地注册创建一个

php

页面，非常基本，我不想在页面上粘贴多个名称标签/文本框。我当时的想法是，默认情况下有一个文本框和一个标签，可能还有蓝色文本，上面写着“添加另一个”（甚至是一个按钮），当按下该按钮时，页面将保留当前数据，但添加一个额外的标签和文本框，以便添加更多信息。这就是我获取1的数据的方式，为了实现我的上述结果，可以很容易地对其进行修改吗

<td><label for="lblName">Campers Name:</label></td>
<td class="style1"><input  type="text" name="txtName" 
    maxlength="100" size="30"></td>

露营者姓名：

编辑
当我点击链接广告时，它什么也不做，我确信它是我错过了明显的，但这里是完整的语法，我应该修改什么使它工作

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript">
    $("#newCamper").on('click', function() {
      $('#Campers').after(
        '<div id="Campers">' +
        '<td><label for="lblName">Campers Name: </label></td>' +
        '<td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>' +
        '<a href="#" id="rmCamper"> remove this</a>' +
        '</div>'
      );
    });
    $(document).on('click', '#rmCamper', function() {
      $(this).closest('#Campers').remove();
    });
</script>
</head>
<body>
    <div id="Campers">
       <td><label for="lblName">Campers Name:</label></td>
       <td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>
       <a href="#" id="newCamper">Add another</a>
    </div>
</body>
</html>


$（“#newCamper”）。在（'click'，function（）上{
$（“#露营者”）。之后(
'' +
'露营者姓名：'+
'' +
'' +
''
);
});
$（文档）。在（'单击'，'rmCamper'，函数（）上{
$（此）。最近的（“#露营者”）.remove（）；
});
露营者姓名：

编辑#2

当我在我的机器上转到localhost并按下Add按钮时，它会将URL更改为localhost#但没有向页面添加其他字段？

我知道您正在用PHP寻找答案，但对于您需要做的事情（DOM操纵），最好使用JavaScript。您可以创建另一个输入字段，并增加一个变量以附加到相同的ID字段。看见如果您跟踪以这种方式创建的输入字段总数，您可以在表单提交时迭代这些字段以捕获所有数据。

我认为您可以使用一点jquery代码来完成这项工作；）你所要做的就是包括在您的页面中

<div id="Campers">
   <td><label for="lblName">Campers Name:</label></td>
   <td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>
   <a href="#" id="newCamper">Add another</a>
</div>

// jquery code below:

$("#newCamper").on('click', function() {
  $('#Campers').after(
    '<div id="Campers">' +
    '<td><label for="lblName">Campers Name: </label></td>' +
    '<td class="style1"><input  type="text" name="txtName" maxlength="100" size="30"></td>' +
    '<a href="#" id="rmCamper"> remove this</a>' +
    '</div>'
  );
});
$(document).on('click', '#rmCamper', function() {
  $(this).closest('#Campers').remove();
});


露营者姓名：
//jquery代码如下：
$（“#newCamper”）。在（'click'，function（）上{
$（“#露营者”）。之后(
'' +
'露营者姓名：'+
'' +
'' +
''
);
});
$（文档）。在（'单击'，'rmCamper'，函数（）上{
$（此）。最近的（“#露营者”）.remove（）；
});

在现实生活中，使用javascript可能是最好的选择。然而，仅仅使用php是完全可能的。请看以下示例：

<?php
$names = isset($_GET['txt']) ? $_GET['txt'] : [];
$i = 0;
?>
<form method="get">
    <?php foreach ($names as $name) : ?>
        <label for="txt<?= $i ?>">member</label>
        <input name="txt[]" id="xt<?= $i ?>" value="<?= $name ?>">
        <br>
        <?php $i++ ?>
    <?php endforeach; ?>
    <label for="txt<?= $i ?>">member</label>
    <input name="txt[]" id="xt<?= $i ?>">
    <button type='submit'>
        add
    </button>
</form>


您想要一个有效地添加标签/文本输入对的按钮吗？因此，如果你按下按钮50次，你会得到50个输入，在其中输入你的数据？在JS中这样做，让name属性成为一个动态数组？@BobbyJack-好的观点。我可能应该限制它会增加多少额外的内容。@chris85-JS也是一个可行的解决方案，我不确定哪种方式更容易。为什么要在ID属性中增加一个变量（假设这就是你的意思）。甚至连ID属性都没有，name属性也可以轻松地转换为数组以防止出现任何问题。请确保不要在每个输入上使用name=“txtName”
。相反，添加使用name=“txtName”+i
，其中i随每个添加的输入而递增。是的，每个字段都应该是唯一的，以防止超调值，thx@SunKnight0:）是否可以始终在底部添加另一个按钮？或者这是太多的编码？看我的编辑，我不能得到语法正常运行，我错过了什么？