How to get the search box value in
tag - HTML,JS

Question

Am new to javascript i foud this one in w3schools.com - Entering pincode in search box will show in <p> tag !! How to do ? any help appreciated. Thanks in advance

HTML :

<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit" formaction="search-pincode.html" onclick="myFunction()">Check</button>
</form>

JS SCRIPT :

    <script>
    function myFunction() {
    var x = document.getElementById("user-pincode").value;
    document.getElementById("user-pincode-show").innerHTML = x;
    }
    </script>

OUTPUT : search-pincode.html

                <h1 class="search-h1-contact">
                Yes, we install CCTV in <p id="user-pincode-show"></p>
                </h1>

score 3 · Accepted Answer · answered Nov 16 '17 at 09:55

3

For one, you will not see the result long enough because after clicking the button, you are being redirected to search-pincode.html. Try changing type="submit" to type="button"

function myFunction() {
  var x = document.getElementById("user-pincode").value;
  document.getElementById("user-pincode-show").innerHTML = x;
}

<form class="form1" role="search" method="get" action="search-pincode.html">
  <input type="number" placeholder="Enter Postcode" id="user-pincode">
  <button type="button" onclick="myFunction()">Check</button>
</form>

<h1 class="search-h1-contact">
  Yes, we install CCTV in
  <p id="user-pincode-show"></p>
</h1>

If what you are planning is to pass the value of the input to search-pincode.html, and user-pincode-show is inside it, then using JavaScript is not proper way to do it

answered Nov 16 '17 at 09:55

Carl Binalla

5,393
5
27
46

1

Great ! It works. Can you suggest me which way better to pass the value ? – Hameed Basha Nov 16 '17 at 10:03
Well, if it just passing in the same page, this is enough, or use Jquery for a shorter version, but still the same function – Carl Binalla Nov 16 '17 at 10:05
Yes, using search-box in every page now again trying to pass the value from index page.Its not working :'( well moving to jquery – Hameed Basha Nov 16 '17 at 10:17

Yosvel Quintero · Answer 2 · 2017-11-16T10:46:05.937

If you want to avoid redirecting on form submition you can declare an event listener using EventTarget.addEventListener() to handle the click event and call e.preventDefault in the function handler..

Also notice that there is no need to add formaction="search-pincode.html" in the button element because the form has the attribute action="search-pincode.html"

And last thing: With in the h1 element you can better use a span element instead of p.

<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>

Code example:

document
  .querySelector('button.submit')
  .addEventListener('click', function (e) {
    e.preventDefault();
    var x = document.querySelector('#user-pincode');
    document.querySelector('#user-pincode-show').innerHTML = x.value;
  });

<form class="form1" role="search" method="get" action="search-pincode.html">
  <input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
  <button class="submit" type="submit">Check</button>
</form>

<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>

score 1 · Answer 3 · answered Nov 16 '17 at 10:10

function myFunction() {
   var x = document.getElementById("user-pincode");
document.getElementById('user-pincode-show').innerHTML = x.value;
    }

<form class="form1" role="search" method="get" action="search-pincode.html">
  <input type="number" placeholder="Enter Postcode" id="user-pincode">
  <button type="button" onclick="myFunction()">Check</button>
</form>

<h1 class="search-h1-contact">
                Yes, we install CCTV in
<p id="user-pincode-show"></p></h1>

How to get the search box value in tag - HTML,JS

3 Answers3

How to get the search box value in
tag - HTML,JS