2

I'm trying to use a textbox and a submit button to change a div on the page. I want to take the text that has been typed in the textbox and put it in the div when the button is clicked. I have this code:

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 } 
<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction()" />
</form>
<br/>
<div id="myDiv"></div>

But nothing happens. When I try it in the browser it just refreshes the page and adds ?textbox=someValueHere to the end of the URL. How can I get the div to display the textbox value?

Improve this question
5
  • The snippet works as expected. What browser(s) have you tested? Commented Apr 30, 2015 at 19:32
  • 2
    If you're not altering the HTML of the div, use textContent over innerHTML. Also, you should use external event handling instead of inline. Commented Apr 30, 2015 at 19:32
  • 1
    You're not doing anything to stop the form from being submitted. return false? Commented Apr 30, 2015 at 19:33
  • 1
    you can also change the type from submit to button to prevent submission Commented Apr 30, 2015 at 19:34
  • I added the jQuery tag in case there's a better way with jQuery. I'm testing it in Chrome. I changed it from submit to button and now it's working. It was reloading the page right away and I wasn't noticing. Thanks! Commented Apr 30, 2015 at 19:38

4 Answers 4

Reset to default
3

The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work

<input type="button"name="button" id="button" onclick="myfunction()" />
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@SterlingArcher - no, that's only if no type is defined.
@j08691 really? I thought it was any button
@SterlingArcher - if a <button> element has no type, then like an <input> with no type, it also defaults to submit. But there's no button in the question or this answer.
also I tried this and I did not get this to work properly.... I typed something wrong
@CayceK - Because of SO's security settings on snippets: Blocked form submission to 'http://stacksnippets.net/js' because the form's frame is sandboxed and the 'allow-forms' permission is not set.
|
1

The form is submitting. You need to stop that by adding return false; (if you are using Jquery) Or remove the form entirely it is not required.

function myfunction() { 
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
    return false;
 }
Improve this answer

Comments

0

Nothing happens because the form is being submitted. You need to prevent the default action from happening, which is the form submission. See preventDefault() or return false in the MDN for more details on how to prevent an events default action from occurring.

Improve this answer

2 Comments

Is return false really in the MDN? I thought this was an old de facto standard that has never been officially sanctioned. Do you have a link?
@Barmar bad wording, I meant it to preventDefault lol. I will check though
0

Call event.preventDefault() to prevent the normal form submission.

function myfunction(e) { 
    e.preventDefault();
    var myText = document.getElementById("textbox").value;
    document.getElementById('myDiv').innerHTML = myText;
 } 

<form>
<input type="text" name="textbox" id="textbox" />
<input type="submit" name="button" id="button" onclick="myfunction(event)" />
</form>
<br/>
<div id="myDiv"></div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.