Javascript: how to change form fields value with single click

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!

Doug Neiner · Accepted Answer · 2010-01-24 06:06:20Z

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);" />

answered Jan 24, 2010 at 6:06

Doug Neiner

66.4k14 gold badges111 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahul · Accepted Answer · 2010-01-24 06:21:54Z

1

I have three input text fields that all have the id of "0".

This is entirely wrong. In a document you can't have element with the same id. Either use a name or a classname for these textfields and make their ids different.

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

edited Jan 24, 2010 at 6:21

answered Jan 24, 2010 at 6:07

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

jspcal · Accepted Answer · 2010-01-24 06:09:04Z

-1

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

edited Jan 24, 2010 at 6:09

answered Jan 24, 2010 at 6:01

jspcal

52k7 gold badges76 silver badges79 bronze badges

11 Comments

rahul Over a year ago

May be because of the use of jQuery.

jspcal Over a year ago

@Doug Neiner: jquery would be downloaded once (then cached for an entire year). you're missing the obvious benefit that using jquery will save the OP time when he needs to perform similar functions. (unless you're assuming this is the only javascript he will ever need). jquery is therefore a win, low-level js is less portable, more verbose, more time consuming, etc. your comment assumes a very short-term view (saving a few insignificant bytes, but costing the OP by not using a great all-purpose tool for similar reqs.)

Doug Neiner Over a year ago

@jspcal How will forcing the OP to learn a completely new framework save him time in this problem? I agree it is not likely this is his only JavaScript, but it is equally unlikely that he would go back and rewrite all his other code using jQuery because it was what was suggested for this one answer. Thus, he would end up with all of the overhead with none of the benefit. Like I said, I love jQuery (Check out my #2 placement: stackoverflow.com/questions/…), but it is not an end all solution.

jspcal Over a year ago

@Doug Neiner: no, not rewrite old scripts but use jquery when similar problems come up again. jquery is a best practice and a better approach. by your logic, there would never be a good time to take 2 minutes to try it. btw, a small design change like adding a field would break the getElementById script, but jquery is fine. why object to broadening someone's toolbox with a cheap and simple tool, especially since this is such a routine use-case for it.

jspcal Over a year ago

@Doug Neiner: you're assuming a pathological case. best practices like jquery should be the default. more likely is the client prefers more efficient development and a more powerful system. jquery is not something that requires caveats - it's portable, widely-adopted, and the preferred solution. rather than pre-emptively eschewing frameworks (in anticipation of the unlikely requirement that the client hates industry standards, or 56k cached would become a burden), it should be recommended as a good approach for this class of problems.

|

Collectives™ on Stack Overflow

Javascript: how to change form fields value with single click

3 Answers 3

Comments

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related