HTML input into Javascript variable

Question

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?

    $(document).ready(function(){
      $("#submit").on("click",function(){
        var test = document.getElementById("searchInput");
        $("#text").html(test);
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
          <input type ="text" id ="searchInput"><br>
          <button id = "submit">Search</button>
          <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
      </form>
    
      <div id = "text">
        <h1>test</h1>
      </div>

EDIT: I have attempted to change

var test = document.getElementById("searchInput");

to

var test = document.getElementById("searchInput").value;

previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.

EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.

`document.getElementById("searchInput");` this gets the `` and not the value, make sure this is what you want. — Kevin Kloet, Nov 07 '16 at 09:40
Possible duplicate of [JavaScript: how to get value of text input field?](http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field) — roberrrt-s, Nov 07 '16 at 09:43

score 0 · Answer 1 · answered Nov 07 '16 at 09:53

Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:

Use this to always replace #text element contents with #searchInput value:

$("#text").html($("#searchInput").val());

Use this to append #searchInput value to #text element:

$("#text").append($("#searchInput").val());

But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:

$(document).ready(function(){
  $("#submit").on("click",function(e) {
    e.preventDefault();
    $("#text").html($("#searchInput").val());
  })
});

or having the #text element inside the form for submitting:

<form>
    <input type="hidden" id="text" name="text">
    <input type ="text" id ="searchInput"><br>
    <button id = "submit">Search</button>
    <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>

I'm not attempting to change part of form, I am attempting to get whatever the string input is into a variable within JS when i click the submit button. — kimpster, Nov 07 '16 at 09:59
When you hit the submit button, the browser will submit the form and the page will be refreshed with the submitted data. The `#text` field is outside the form, so it won't be passed to the `POST`/`GET` data to display or use. You should either move the `#text` element inside the form so the data will be passed to the refreshed page, or cancel the submit event. — Christos Lytras, Nov 07 '16 at 10:05

score 0 · Answer 2 · answered Nov 07 '16 at 10:15

You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.

     <input type ="text" id ="searchInput"><br>
      <button id = "submit">Search</button>
      <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>


  <div id ="text">
    <h1 id="welc"></h1>
  </div>

  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
  <script>
  $(document).ready(function(){
    $("#submit").on("click",function(){     
    var test = $('#searchInput').val();  
    $("h1").html(test);
  });
});
  </script>

Just Remove tag, and check it.

score -1 · Answer 3 · answered Nov 07 '16 at 09:40

-1

You need to find the element's value and then set it as HTML.

$("#text").html(test.value);

answered Nov 07 '16 at 09:40

void

36,090
8
62
107

score -1 · Answer 4 · answered Nov 07 '16 at 09:42

I have updated your question mate check this one .

    $(document).ready(function(){
      $("#submit").on("click",function(){
        var test = document.getElementById("searchInput").value;
        $("#text").html(test);
      })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
          <input type ="text" id ="searchInput"><br>
          <button id = "submit">Search</button>
          <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
      </form>
    
      <div id = "text">
        <h1>test</h1>
      </div>

score -1 · Answer 5 · answered Nov 07 '16 at 09:47

-1

I think this will work for you.

<! doctype HTML>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
    <form>
        <input type="text" id="searchInput">
        <br>
        <button type="button" id="submit">Search</button>
        <button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
    </form>

    <div id="text">
        <h1>test</h1>
    </div>
</body>
<script>
    $(document).ready(function () {
        $("#submit").on("click", function () {
            $("#text").html($("#searchInput").val());
        })
    });
</script>

</html>

answered Nov 07 '16 at 09:47

Nitheesh

19,238
3
22
49

i would say the downvote is becouse no explanation why this code should work. Dont know exactly sometimes there are downvoters just becouse they can. – opelhatza Nov 07 '16 at 10:09
This is not a complex code at all. Anyone can look into it and its self explanatory. If any explanations are required you can just put in the comment. Its not a big deal to add a 2 line explanation for a 20 line code. Also we are willing to give explanations if needed. – Nitheesh Nov 07 '16 at 10:12

score -2 · Answer 6 · answered Nov 07 '16 at 09:42

-2

Edit your JS code please try: EDIT:

$(document).ready(function(){
  $("#submit").on("click",function(){
    var test = $("#searchInput").val();
    $("#text").html(test);
  })
});

answered Nov 07 '16 at 09:42

pawan sen

716
5
14

HTML input into Javascript variable

6 Answers6