5

How do I change the value of this button? I am looking at a tutorial, but only the url seems to change, and not the button.

<form name="form" id="form">
<button name="button" id="button">Click Me!</button>
</form>

<script type="text/javascript">
document.form.button.value=new Date();
</script>
droidus
  • 613
  • 5
  • 14
  • 25
  • 1
    Do you want the form to be submitted when you click the button? If so, this will cause a page refresh, which kinda makes changing the button's label pointless. If all you're trying to do is to see the text of a button change when you click on it, then you don't really have any need for a form. – Travesty3 Apr 18 '12 at 19:03

4 Answers4

10

I added an onclick to your button to change the value with the function.

If you add onsubmit="return false" to the form tag, it won't refresh the page.

<form name="form" id="form" onsubmit="return false">
    <button name="button" id="button" onclick="changeValue();" value="before" >Click Me!</button>
</form>

<script type="text/javascript">
    function changeValue()
    {
        // Changes the value of the button
        document.form.button.value = new Date();

        // Changes the text on the button
        document.form.button.innerHTML = new Date();
    }
</script>
Jonathan Payne
  • 2,223
  • 13
  • 11
  • it works, but does not change the button text... it changes the url to this... www.mywebsite.com/javascript.html?button=Thu+Jan+18+2020+14%3A51%3A00+GMT-0400+%28Eastern+Daylight+Time%29 – droidus Apr 18 '12 at 18:52
  • @droidus I've edited my post, there are 2 different things, the value of the button, and the text on the button. My example now does both. – Jonathan Payne Apr 18 '12 at 18:55
  • it now changes the url and adds "?button=after" at the end – droidus Apr 18 '12 at 18:57
  • @JonathanPayne I guess, that it was you , that downvoted my and 'Travesty3's answers...Undo the downvotes. You don't know what 'droidus' wants: "when the user clicks the button, the text inside of the button should change"(from 'droidus'). – Engineer Apr 18 '12 at 18:58
  • ah, i just saw something... after the pop-ups, there is a quick instant where the date/time appears, then it quickly disappears... – droidus Apr 18 '12 at 18:58
  • i need like a sleep/timeout added, right? since the page is being submitted, that is why it is disappearing? – droidus Apr 18 '12 at 19:01
  • @droidus i've updated the code again, when you click the button, it submits the form, so if you add onsubmit="return false" to the form, it won't submit it, but rather stay on the page. Look at the code if you have questions. – Jonathan Payne Apr 18 '12 at 19:03
9
document.form.button.innerHTML = new Date();

EDIT:

If what you're trying to is to make the text on the button change to the current date when you click it, this is what you want to do:

<script type="text/Javascript">
    function changeLabel()
    {
        document.getElementById('button').innerHTML = new Date();
    }
</script>

<button id="button" onclick="changeLabel()">Click Me!</button>
Travesty3
  • 14,351
  • 6
  • 61
  • 98
  • window.onload(function(){document.form.button.innerHTML = new Date();}); – standup75 Apr 18 '12 at 18:43
  • what about something along these lines: document.getElementById('button1').innerHTML = '...' – droidus Apr 18 '12 at 18:44
  • He wants to change the value, not the text on the button ( innerHTML ) – Jonathan Payne Apr 18 '12 at 18:44
  • @JonathanPayne: What's the point in putting a value on a button tag? In any case, in the question, the complaint is that "only the url seems to change, and not the button." Sounds like we need more information as to what the desired outcome really is. – Travesty3 Apr 18 '12 at 18:48
  • @droidus: That should do the same thing (assuming that your button actually has the ID 'button1' and not 'button'). What do you want to change about the button. Are you looking for the text on the button to change, or something else? When do you want it to change? When the user clicks the button? – Travesty3 Apr 18 '12 at 18:51
  • @Travesty3 in his action, after the submit, he would be able to see the value of the button - not the innerHTML? – Jonathan Payne Apr 18 '12 at 18:53
  • when the user clicks the button, the text inside of the button should change. – droidus Apr 18 '12 at 18:54
5

This works for sure...

onclick="changeValue(this);"

function changeValue(button)
{
    // Changes the value of the button
    button.value = new Date();
}
0

Use innerHTML:

document.form1.button1.innerHTML=new Date();

UPDATE: Alternative you could define your button like:

<input name="button" id="button" type="button" value="Click Me!" />

In that case 

document.form.button.value=new Date();

should work as you had expected .

Engineer
  • 47,849
  • 12
  • 88
  • 91