Question

http://jsfiddle.net/oh9Ltpxm/

当用户填写信息并决定通过单击删除单选按钮删除该人时，我试图获取该表单我希望它清除所有数据。我尝试创建一些java来清除基于name =＆＃34;＆＃34;的输入。但我似乎无法让它发挥作用。我究竟做错了什么？忘了添加这个表单有多个删除按钮和多个名称，gen，ssn，ddn，dob字段。我只希望它删除其受人尊敬的字段

HTML

 add a person<br/>
 <input type="radio" id="bn" name="age2" value="Yes" class="aboveage2" onclick="ClearFields();"/> Remove
 <input type="radio" id="bn" name="age2" value="No" class="aboveage2" /> Yes
 <br/>
 <div id="righttxt">
 <input type="text" name="name" class="box" max=40 placeholder=""/><br/>
 <input type="date" name="dob" class="box" placeholder="MM/DD/YYYY" maxlength="10" min="1" max="10"  onKeyPress="return numbersonly(this, event)"/><br/>
 <input type="text" name="ddn" class="box" placeholder=""/><br/>
 <input type="text" name="ssn" max=11 class="box" placeholder="" onKeyPress="return numbersonly(this, event)"/><br/>
 <input id="bn" name="gen" type="radio" value="Male">Male
 <input id="bn" name="gen" type="radio" value="Female">Female
 </div><!--righttext-->

的javascript

function ClearFields() {
  document.getElementByname "name".value = "";
  document.getElementByname "bod".value = "";
  document.getElementByname "ddn".value = "";
  document.getElementByname "ssn".value = "";
  document.getElementByname "gen".value = "";  
}

Answer 1

document.getElementByname的语法不正确。正确的函数名称为getElementsByName。它还返回一个节点列表，因此您的代码应更合适：

function ClearFields() {
  document.getElementsByName("name")[0].value = "";
  document.getElementsByName("bod")[0].value = "";
  document.getElementsByName("ddn")[0].value = "";
  document.getElementsByName("ssn")[0].value = "";
  document.getElementsByName("gen")[0].value = "";   
}

您应该只有一个ID为bn的元素。

我也不会在HTML中使用onclick等，而是使用更现代的技术：

document.getElementById('bn').addEventListener('click', ClearFields , false);

希望有所帮助！

Answer 2

你的语法就在这里，试试这个：

function clearFields() {
  document.getElementsByName("name").value = "";
  document.getElementsByName("bod").value = "";
  document.getElementsByName("ddn").value = "";
  document.getElementsByName("ssn").value = "";
  document.getElementsByName("gen").value = "";  
}

Answer 3

像这样：

function clearFields(name, val) {
  document.getElementByName(name)[0].value = val;
}
clearFields("name", "");
clearFields("bod", "");
clearFields("ddn", "");
clearFields("ssn", "");
clearFields("gen", "");

Answer 4

正如其他人所指出的，正确的方法是document.getElementsByName()。但是，这将返回具有给定名称的所有字段。

OP在评论中添加

忘了添加这个表单有多个删除按钮和多个名称，gen，ssn，ddn，dob字段。我只希望它删除其受人尊敬的领域。

鉴于字段名称在其他地方重复，不可能直接选择元素，因为它会重置不相关的。

我建议您将所有这些字段放在容器中，并使用jQuery重置其中的各种输入。

尝试类似

的内容

<h3>add a person</h3>
<fieldset style="border:none;">
<div>
    <input type="radio" id="bn" name="age2" value="Yes" class="aboveage2" onclick="ClearFields($(this));"/> 
    <label>Remove</label>
    <input type="radio" id="bn" name="age2" value="No" class="aboveage2" />
    <label>Yes</label>
</div>

<div id="righttxt">
    <div><input type="text" name="name" class="box" max=40 placeholder=""/></div>
    <div><input type="date" name="dob" class="box" placeholder="MM/DD/YYYY" maxlength="10" min="1" max="10"  onKeyPress="return numbersonly(this, event)"/></div>
    <div><input type="text" name="ddn" class="box" placeholder=""/></div>
    <div><input type="text" name="ssn" max=11 class="box" placeholder="" onKeyPress="return numbersonly(this, event)"/></div>

    <div>
        <input id="bn" name="gen" type="radio" value="Male"/>
        <label>Male</label>
        <input id="bn" name="gen" type="radio" value="Female"/>
        <label>Female</label>
    </div>
</div><!--righttext-->
</fieldset>

和javascript可以是

function ClearFields(ctrl) {
    var fieldset = ctrl.closest('fieldset');
    $('input[type="radio"]').prop('checked', false);
    $('input[type="text"]').val("");
}

这将重置被调用者父字段集中的所有无线电和文本输入字段。

小提琴 - http://jsfiddle.net/oh9Ltpxm/8/

选择单选按钮时，使表单字段清除

4 个答案: