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

300k55 gold badges462 silver badges511 bronze badges

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

Comments

user2063626 · 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 Comments

Blender Over a year ago

OP never said anything about using jQuery.

JAAulde Over a year ago

@user2063626, where do you ever see the OP mention jQuery being available or in use (or something he would even recognize)?

asifsid88 Over a year ago

Infact there is not even a jQuery tag assigned to the question

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 badges25 silver badges27 bronze badges

2 Comments

JAAulde Over a year ago

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.

bluetoft Over a year ago

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

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

0

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/

answered Feb 21, 2013 at 5:49

user1573365

1357 bronze badges

Collectives™ on Stack Overflow

set value of input tag to another value using javascript

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related