CODEWITHSUNDEEP
javascripthtmlbuttoninputsearch-box
Hameed Basha
Hameed Basha

Reputation: 149

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

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>

Upvotes: 2

Views: 3816

Answers (3)

Yosvel Quintero
Yosvel Quintero

Reputation: 19080

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>

Upvotes: 2

vicky patel
vicky patel

Reputation: 705

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>

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

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

Upvotes: 3

Related Questions