javascript - 清除html中的单个文本框

Question

我有一个包含十个文本框的表单。我也有一个提交按钮。我想在单击 html 中的按钮时清除行中的两个文本框。

以下是屏幕截图:

:

代码:

 <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>

当我单击特定行的红叉按钮时，我希望进入名称和号码文本框以获取名称和号码值。

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

如何实现这一目标？

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>标签。

编辑2:我似乎找不到<a>的开头在那一长行中标记。您可能需要调整 clearRow 的第一行考虑到“X 按钮”的进一步嵌套。