Question

I’m trying to set the value of three different input text fields with an onclick function.

I have an image that has this code…

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

And I have three input text fields that all have the id of “0”.

When I click my image I want to set the value of all three fields to empty.

Can someone please help me write a function that can do this?

Thanks!

Answer 1

First, you need your id values to be different. You should never have the same ID twice on the same page. So lets use this as the example 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" />

You could use this JavaScript function:

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

And your img tag would remain unchanged:

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