我可以使用JavaScript向表单添加输入字段吗？

问题：由于表单由另一家公司控制，他们只允许我添加跟踪代码，但我需要添加自己的表单输入字段，因此我认为使用JavaScript实现这一点是可能的：

原始表单如下所示：

<form method="post" action="http://subdomain.somewebsite.com">
<input type="hidden" name="client_id" value="160">
<input type="hidden" name="source" value="http://subdomain.somewebsite.com/survey/123">
<fieldset>
<div class="form-group input_text" id="fld-name">
  <label for="name">Name</label>
  <input  class="form-control" type="text" id="name" name="name" value="" placeholder="Name"  required/>
</div>
<div class="form-group input_text" id="fld-email">
  <label for="email">Email</label>
  <input  class="form-control" type="text" id="email" name="email" value="" placeholder="Email"  required/>
</div>
<div class="form-group input_text" id="fld-phone">
  <label for="phone">Phone</label>
  <input  class="form-control" type="text" id="phone" name="phone" value="" placeholder="Phone"  required/>
</div>
<button name="submit-now" id="submit-now" data-lb-name="Button Text" data-lb="editable-rich-text" data-lb-id="btn"> Save <b>$</b> Today! </button>
</fieldset>

var url = "http://example.com/clickto_status.php?click_id=123&phone_to_call=";

$('form').append('<input type="text" id="phone" name="phone" maxlength="10" size="10"><br>
<input type="submit" value="Click-to-Call"  onclick="window.open(url + getElementById('phone').value + '&key=123123123123123abc', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">');

这就是我需要通过js添加的内容：

<input type="text" id="phone" name="phone" maxlength="10" size="10"><br>
<input type="submit" value="Click-to-Call"  onclick="window.open('http://example.com/clickto_status.php?click_id=123&phone_to_call=' + getElementById('phone').value + '&key=123123123123123abc', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">

我可能会删除弹出代码，但还不确定

---

我很笨，请慢慢打字。提前谢谢你

是的，你可以这样做：

<form method="post" action="http://subdomain.somewebsite.com">
<input type="hidden" name="client_id" value="160">
<input type="hidden" name="source" value="http://subdomain.somewebsite.com/survey/123">
<fieldset>
<div class="form-group input_text" id="fld-name">
  <label for="name">Name</label>
  <input  class="form-control" type="text" id="name" name="name" value="" placeholder="Name"  required/>
</div>
<div class="form-group input_text" id="fld-email">
  <label for="email">Email</label>
  <input  class="form-control" type="text" id="email" name="email" value="" placeholder="Email"  required/>
</div>
<div class="form-group input_text" id="fld-phone">
  <label for="phone">Phone</label>
  <input  class="form-control" type="text" id="phone" name="phone" value="" placeholder="Phone"  required/>
</div>
<button name="submit-now" id="submit-now" data-lb-name="Button Text" data-lb="editable-rich-text" data-lb-id="btn"> Save <b>$</b> Today! </button>
</fieldset>

var url = "http://example.com/clickto_status.php?click_id=123&phone_to_call=";

$('form').append('<input type="text" id="phone" name="phone" maxlength="10" size="10"><br>
<input type="submit" value="Click-to-Call"  onclick="window.open(url + getElementById('phone').value + '&key=123123123123123abc', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">');

或者，如果您不想使用jquery，请执行此操作-

备选案文2：

给你的表格一个这样的id 然后再这样做

<form id='myform' ....// your html

document.getElementById('myform').append('<input type="text" id="phone" name="phone" maxlength="10" size="10"><br>
<input type="submit" value="Click-to-Call"  onclick="window.open(url + getElementById('phone').value + '&key=123123123123123abc', 'Clickto' , 'width=200,height=200,toolbar=no,location=no, menubar=no, scrollbars=no, copyhistory=no,resizable=no')">');

---

在谷歌搜索。您应该获得字段集的元素节点。然后对每个属性使用document.createElement，然后使用addAttribute，然后使用appendCHild。祝你好运，自己动手做比复印粘贴回答我的问题更有帮助