set value of input tag to another value using javascript

Question

I have an HTML input tag and I want to change the value of it when clicking on a button, all before submitting the whole form.

I am trying to use getElementById(idOfInput).value = "value I want to set it to", but that doesn't seem to work.

Check out the jsfiddle here: http://jsfiddle.net/dchaddock/83NZu/1/

<input id="resetTesting" value="Testing" />
<button type="button" onclck="resetInput();">Testing</button>

function resetInput() {
    document.getElementById("resetTesting").value = "I'm reset!";
}

Thanks!

Is the onclck attribute of your button a typo on this posting, or does it exist in your page? If the latter, that's at least part of your problem. — JAAulde, Commented Feb 21, 2013 at 4:28

Blender · Accepted Answer · 2013-02-21 04:27:48Z

6

You misspelled onclick:

<button type="button" onclck="resetInput();">Testing</button>
                         ^

Demo: http://jsfiddle.net/83NZu/2/

answered Feb 21, 2013 at 4:27

Blender

299k55 gold badges458 silver badges510 bronze badges

Add a comment |

user2063626user2063626 · Accepted Answer · 2013-02-21 04:30:17Z

0

Here is jsFiddle Link

http://jsfiddle.net/83NZu/3/

<input id="resetTesting" value="Testing" />
<button type="button" id="btnSubmit" >Testing</button>

    $(function(){
        $("#btnSubmit").click(function(){
            $("#resetTesting").val('test'); // Set the Value
            alert($("#resetTesting").val()); // Get the Value
        })
    })

answered Feb 21, 2013 at 4:30

user2063626

3

OP never said anything about using jQuery.
– Blender
Commented Feb 21, 2013 at 4:30
2

@user2063626, where do you ever see the OP mention jQuery being available or in use (or something he would even recognize)?
– JAAulde
Commented Feb 21, 2013 at 4:31
2

Infact there is not even a jQuery tag assigned to the question
– asifsid88
Commented Feb 21, 2013 at 5:10

Add a comment |

bluetoft · Accepted Answer · 2013-02-21 05:06:49Z

0

Your function isn't defined when your javascript compiler hits your onclick="resetInput();". Place the script before the html and you should be good to go.

<script type="text/javascript">
    function resetInput() {

    document.getElementById("resetTesting").value = "I'm reset!";
}
</script>
<input id="resetTesting" value="Testing" />
<button type="button" onClick="resetInput();">Testing</button>

http://jsfiddle.net/83NZu/6/

also... as everyone else mentioned... its onclick ;)

edit

This is incorrect. The problem with the original jsfiddle was both the typo and the setting of onLoad vs no-wrap (head) fwiw

edited Feb 21, 2013 at 5:06

answered Feb 21, 2013 at 4:37

bluetoft

5,4432 gold badges24 silver badges27 bronze badges

That is not the problem. An inline event handler is the same as the body of a function. The value of onclick is not run until click, at which point resetInput has been defined (even if you clicked during the split second it wasn't defined, subsequent clicks would be fine). Your example works because you corrected the real issue of the typo'd attribute.
– JAAulde
Commented Feb 21, 2013 at 4:40
You're absolutely correct. Thanks for the lesson. The problem with the original post jsfiddle was that they had framework setting as onLoad... not sure why that broke the jsfiddle, fwiw
– bluetoft
Commented Feb 21, 2013 at 5:05

Add a comment |

user1573365 · Accepted Answer · 2013-02-21 05:49:45Z

The problem is the default option "onload" and the error spell onclck:

The "onLoad" option means:wrap the code so it will run in onLoad window event

HTML code:

<input id="resetTesting" value="Testing" />
<button id="btn" type="button">Testing</button>

JavaScript code:

document.getElementById("btn").onclick = function(){
  document.getElementById("resetTesting").value="I'm reset";
}

http://jsfiddle.net/83NZu/8/

or choose the option"no wrap(head)",it means:do not wrap the JavaScript code, place it in <head> section

http://jsfiddle.net/83NZu/7/

Collectives™ on Stack Overflow

set value of input tag to another value using javascript

4 Answers 4

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Related