javascript - How to get the search box value in <p> tag - HTML,JS - Stack Overflow

Am new to javascript i foud this one in w3schools - 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>

Am new to javascript i foud this one in w3schools. - 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>

• javascript
• html
• button
• input
• search-box

Share Improve this question Follow edited Nov 16, 2017 at 9:54 Hameed Basha asked Nov 16, 2017 at 9:48 Hameed BashaHameed Basha 14911 silver badge1212 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

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>

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>