获取表单域以在选择单选按钮时清除

Getting form fields to clear when radio button is selected

本文关键字：单选按钮 清除 选择 表单 获取      更新时间：2023-09-26

>http://jsfiddle.net/oh9Ltpxm/

当用户填写信息并决定通过单击删除单选按钮删除该人时，我正在尝试获取表单，我希望它清除所有数据。我试图创建一些 java 来清除基于 name=" 的输入，但我似乎无法让它工作。我做错了什么？忘了添加此表单有多个删除按钮和多个名称、世代、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 = "";  
}

您的语法对于 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);

希望对您有所帮助！

你的语法在这里很不对劲，试试这个：

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

像这样：

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

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

正如OP在评论中添加的那样

忘了添加此表单有多个删除按钮和多个名称、世代、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/

相关文章：