CODEWITHSUNDEEP
javascriptcsshtml
purple_dot
purple_dot

Reputation: 106

Submitting text input erases page element in JavaScript

I am working on something which lets you update text within the page. There is a submit button and it updates the text box above. Another way to trigger it is with the enter key when inside the text box input.

What is supposed to happen when the "Send" button or the enter key are pressed, is that the text will go in the text box. The problem is that when they are used, the text box above is also erased and the text blinks on there for a second. How do I make it so that the text says up in the upper text box?

Here is the code.:

<html>
   <head>
      <script type = "text/javascript">
            function SendMsg() {
              document.getElementById('ScrollBox').innerHTML = document.send.msg.value + "<br />" + "<br />" + document.getElementById('ScrollBox').innerHTML;
              document.getElementById('TextInputBox').value = "";
            }
      </script>
   </head>

   <body>
      <div id = "ScrollBox" style="height:480px;width:240px;border:1px solid #ccc;overflow:auto;"></div>
      <form name = "send" action = "">
         : <input type = "text" id = "TextInputBox" title = "Type what you want to send" name = "msg" onkeydown = "if (event.keyCode == 13)
                        SendMsg()"/>
         <input type = "submit" id = "btnSend" value = "Send" onclick = "SendMsg();"/>
      </form>
   </body>
</html>

A bonus would be if there was a way to make the cursor go back to the text input every time it is submitted.

I am very new to JavaScript and this is my first project so I am very unsure how to proceed.

Thank you very much for your help.

Upvotes: 0

Views: 52

Answers (3)

jvdmr
jvdmr

Reputation: 715

As @jack-bashford said, your form submit is causing a page refresh. For what you're trying to do, you don't actually need a form, so unless you're actually submitting that data to somewhere I'd suggest removing it.

Try this:

<html>
  <body>
    <div id="ScrollBox" style="height:480px;width:240px;border:1px solid #ccc;overflow:auto;"></div>
    : <input type="text" id="TextInputBox" title="Type what you want to send" name="msg" onkeydown="if (event.keyCode == 13) SendMsg();"/>
    <input type="button" id="btnSend" value="Send" onclick="SendMsg();"/>
    <script>
      function SendMsg() {
        document.getElementById('ScrollBox').innerHTML = document.getElementById("TextInputBox").value + "<br />" + "<br />" + document.getElementById('ScrollBox').innerHTML;
        document.getElementById('TextInputBox').value = "";
      }
    </script>
  </body>
</html>

Upvotes: 1

Najarana
Najarana

Reputation: 71

Problem is that you are using an submit input. This will break your page as it forces a reload.

See update below. Also added .focus() on your textinput after adding the value.

<html>
   <head>
      <script type = "text/javascript">
            function SendMsg() {
              document.getElementById('ScrollBox').innerHTML = document.send.msg.value + "<br />" + "<br />" + document.getElementById('ScrollBox').innerHTML;
              document.getElementById('TextInputBox').value = "";
              document.getElementById("TextInputBox").focus();
              
            }
      </script>
   </head>

   <body>
      <div id = "ScrollBox" style="height:480px;width:240px;border:1px solid #ccc;overflow:auto;"></div>
      <form name = "send" action = "">
         : <input type = "text" id = "TextInputBox" title = "Type what you want to send" name = "msg" onkeydown = "if (event.keyCode == 13)
                        SendMsg()"/>
         <input type = "button" id = "btnSend" value = "Send" onclick = "SendMsg();"/>
      </form>
   </body>
</html>

Upvotes: 2

Jack Bashford
Jack Bashford

Reputation: 44125

Your form is submitting which by default refreshes the page if no action is given. Add an event listener to prevent this happening:

document.querySelector("form").addEventListener("submit", e => e.preventDefault());

Upvotes: 2

Related Questions