Skip to main content

How to get value from text field javascript?

 Hey guys,


To get value from input text field, it involves 4 steps:

1.Add  id or class attribute to the input text field you want to access.

2.Add a Button tag and add click event listener to display value.

3.Add a Paragraph tag,to display that value on button click.


<input type="text" id="name" placeholder="Name" />

<button onclick="function_to_show()">Show Value</button>

<p id="display_here"></p>


4.Now,write the code to get and display that value using javascript function.


<script>

 var name1;

 function function_to_show()

 {

 name1=document.getElementById("name").value; document.getElementById("display_here").textContent=name1;

 } 

</script>

Explanation:

In javascript, we declared a variable 'name1', where we will store value of input text field. After that we defined a function, in that function, we wrote DOM object model related to id, in that model, we kept the input field id name "name". Store that value in a variable, which is declared above. Then we have to display that value in Paragraph tag.To do that,again use DOM object model, and give the id of the element where you want to display. In this one, we are giving "display_here" id. So, value will be displayed in that place.

So, in the browser, when you click on "Show Value" button, the above function is executed and displays the value in given element.

Hope this finds helpful, Please do comment, if you have any doubts or facing problems in javascript or html, css, php, mysql, will do a post on it.

Thanks!






Comments

Post a Comment

If you have any doubts, Please do comment

Popular posts from this blog

Can we store php variable in javascript?

Hey guys, Today, We will see how to store php variable in javascript. Is this possible? The answer is yes.   Scenario 1: If value to be stored is an integer <?php  $value=1;   echo "<script> a=" . $value . ";  console.log(a); </script>";  ?> Explanation for Integer value: 1. We have to store an integer value in php variable "$value". 2. We have to keep javascript code inside a string. 3. Now assign "$value" to javascript variable "a" using this syntax " . $value . " 4. Output the javascript variable "a" in console . Scenario 2: If value to be stored is a string <?php  $value="Hello";   echo "<script> a=' " . $value . " ' ; console.log(a); </script>";  ?>   Explanation for String value: 1. It is similar to the first one, But only difference is, we will be keeping apostrophe ( ' ) before and after php variable "$value" using thi...
4 comments
Read more

How to get data from api javascript?

Hey guys, Fetching data from api involves 2 steps: 1.Add jquery CDN script to support jquery function <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 2.Use $.getJSON() function to fetch data. <script>  $.getJSON("API URL",function(response) {   console.log(response);  } );   </script> Explanation: In the above function, first parameter is the api url which you want to fetch data and second parameter is function to get the response of that api. The parameter passed to that function has the output stored in that variable on success. Then you can play around with that data. In this way, we fetch the api data using javascript. Hope this finds helpful, Please do comment, if you have any doubts or facing problems in javascript or html, css, php, mysql, will do a post on it. Thanks!
4 comments
Read more