在html中清除单个文本框

Question

我有一个包含十个文本框的表单。我也有一个提交按钮。我想清楚一下，点击html中的一个按钮就会有两个文本框。

以下是截图：

：

CODE：

 <form action="store_number.php" method="POST" name="myform" class="addform" div id="container" enctype="multipart/form-data">
<fieldset>
    <legend>Number Details</legend><br>
    <div class="fieldwrapper">
    <div class="thefield">   
    <input type="text" class="hint" id="name1" onkeypress='validate1(event)' value="<?php echo $namearray[0];?>" onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $namearray[0];?>';}" size="25" name="name1" maxlength="30"/>   <input type="text" onkeypress='validate(event)' class="hint" id="number1" value="<?php echo $numberarray[0];?>"  onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }" onblur="if (this.value == '') { this.className = 'hint'; this.value = '<?php echo $numberarray[0];?>';}" size="20" name="number1" maxlength="10"/> <img src="img/clear.png" width="24" height="24"></a> </div>
 </div>
 </fieldset>
 <p align="center">
 <div class="buttonsdiv">
 <p align="center">
 <input type="submit" value="Submit"  name="submit" id="submit" class="button1" />
 </div>

 </form>

当我点击特定行的红色十字按钮时，我想命名和编号文本框以获得值名称和编号。

我尝试提交按钮按钮但是它与FORM发生冲突。重置也不起作用。

我如何实现这一目标？

Answer 1

没有实际的HTML很难说，但假设你的代码看起来像这样：

<div>
    <input type="text"><input type="text"><button>X</button>
</div>

你可能想要添加一个监听器<button onclick="clearRow(this)">和一个JS函数来清除输入字段：

function clearRow(button) {
    var inputs = button.parentNode.getElementsByTagName('INPUT');
    inputs[0].value = 'Name';
    inputs[1].value = 'Number';
}

编辑：您添加了HTML代码。只需将听众添加到<img>标记即可。

Edit2：我似乎无法在那一条长行中找到<a>标记的开头。您可能需要调整clearRow的第一行来解释“X按钮”的进一步嵌套。

Answer 2

这是一个概念证明，即使它相当丑陋和臃肿，它也可以完成工作。 有更好的方法可以解决这个问题，但这个方法应该很容易理解：

示例：http://codepen.io/anon/pen/JKtmh

<input type="text" id="1a" value="Name"/><input type="text" id="1b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('1a').value!='Name') || (document.getElementById('1b').value!='Number')) {((document.getElementById('1a').value='Name') && (document.getElementById('1b').value='Number'))};"/><br/>
<input type="text" id="2a" value="Name"/><input type="text" id="2b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('2a').value!='Name') || (document.getElementById('2b').value!='Number')) {((document.getElementById('2a').value='Name') && (document.getElementById('2b').value='Number'))};"/><br/>
<input type="text" id="3a" value="Name"/><input type="text" id="3b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('3a').value!='Name') || (document.getElementById('3b').value!='Number')) {((document.getElementById('3a').value='Name') && (document.getElementById('3b').value='Number'))};"/><br/>
<input type="text" id="4a" value="Name"/><input type="text" id="4b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('4a').value!='Name') || (document.getElementById('4b').value!='Number')) {((document.getElementById('4a').value='Name') && (document.getElementById('4b').value='Number'))};"/><br/>
<input type="text" id="5a" value="Name"/><input type="text" id="5b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('5a').value!='Name') || (document.getElementById('5b').value!='Number')) {((document.getElementById('5a').value='Name') && (document.getElementById('5b').value='Number'))};"/><br/>
<input type="text" id="6a" value="Name"/><input type="text" id="6b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('6a').value!='Name') || (document.getElementById('6b').value!='Number')) {((document.getElementById('6a').value='Name') && (document.getElementById('6b').value='Number'))};"/><br/>
<input type="text" id="7a" value="Name"/><input type="text" id="7b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('7a').value!='Name') || (document.getElementById('7b').value!='Number')) {((document.getElementById('7a').value='Name') && (document.getElementById('7b').value='Number'))};"/><br/>
<input type="text" id="8a" value="Name"/><input type="text" id="8b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('8a').value!='Name') || (document.getElementById('8b').value!='Number')) {((document.getElementById('8a').value='Name') && (document.getElementById('8b').value='Number'))};"/><br/>
<input type="text" id="9a" value="Name"/><input type="text" id="9b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('9a').value!='Name') || (document.getElementById('9b').value!='Number')) {((document.getElementById('9a').value='Name') && (document.getElementById('9b').value='Number'))};"/><br/>
<input type="text" id="10a" value="Name"/><input type="text" id="10b" value="Number"/>
<input type="button" value="x" onclick="if ((document.getElementById('10a').value!='Name') || (document.getElementById('10b').value!='Number')) {((document.getElementById('10a').value='Name') && (document.getElementById('10b').value='Number'))};"/>

PS：您应该使用不以数字开头的ID。 HTML验证器可能不喜欢它。

Answer 3

假设你的HTML是这样的：

<form>
    <div class="row">
        <input type="text" name="name-1" class="nameInput">   
        <input type="text" name="number-1" class="numberInput">   
        <button class="cross"> X </button>   
    </div>
    <div class="row">
        <input type="text" name="name-1" class="nameInput">   
        <input type="text" name="number-1" class="numberInput">   
        <button class="cross"> X </button>   
    </div>
</form>

如果你想使用jQuery;这将完成这项工作：

$(document).ready(function(){
    $('button.cross').click(function(){
        var $parent = $(this).parent('dv');
        $parent.find('input.nameInput').val('Name');
        $parent.find('input.numberInput').val('Number');
    })
});