Javascript:如何通过单击更改表单字段值

时间:2010-01-24 06:00:29

标签: javascript

我正在尝试使用onclick函数设置三个不同输入文本字段的值。

我有一张包含此代码的图片......

<img src="images/delete_row.png" width="25" onClick="clearRow(0);" />

我有三个输入文本字段,其id都为“0”。

当我点击我的图像时,我想将所有三个字段的值设置为空。

有人可以帮我写一个可以做到这一点的功能吗?

谢谢!

3 个答案:

答案 0 :(得分:1)

首先,您需要使id值不同。您不应该在同一页面上两次使用相同的ID。因此,我们将此作为示例HTML:

<input type="text" id="name_0"  name="name" />
<input type="text" id="phone_0" name="phone" />
<input type="text" id="email_0" name="email" />

您可以使用此JavaScript函数:

<script type='text/javascript'>
  function clearRow(id){
     var name  = document.getElementById('name_' + id),
         phone = document.getElementById('phone_' + id),
         email = document.getElementById('email_' + id);

     // Clear values
     name.value = phone.value = email.value = "";
  }
</script>

您的img代码将保持不变:

<img src="images/delete_row.png" width="25" onClick="clearRow(0);" />

答案 1 :(得分:1)

  

我有三个输入文本字段   所有人都有“0”的身份。

这是完全错误的。在文档中,您不能拥有具有相同ID的元素。为这些文本字段使用名称或类名,并使它们的ID不同。

<script type="text/javascript">
    function Change()
    {
        var elems = document.getElementsByName ( "myfields");
        for ( var i = 0;i < elems.length; i++)
        {
            elems[i].value = "";
        }
    }
</script>
<input name="myfields" type="text" id="txt1" />
<input name="myfields" type="text" id="txt2" />
<input name="myfields" type="text" id="txt3" />
<img onclick="Change();" alt="test" src="yourimagpath" />

答案 2 :(得分:0)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $('#pic').click(function() {
    alert('Clicked on pic - resetting fields')
    $('.field').val('')
  })
}
</script>

<img id="pic" src="image.png">
<input class="field" value="1">
<input class="field" value="2">
<input class="field" value="4">
<input class="field" value="5">
<input class="field" value="6">
<input class="field" value="7">
<input class="field" value="8">
<input class="field" value="9">
<input class="field" value="10">