How to pass html textbox value to a javascript function

Question

I have a HTML textbox where user will input some string which i want to pass to a JavaScript function:

<input type="text" id="ad_search_query" style="width:295px">&nbsp;
<input type="button" value="<s:text name="button.search"/>" class="p-userButton"
 onClick="ADSEARCHGF.showTable('');"/> 

Please suggest how can i do it.

Answer 1

If the event is raised by the button, you will not have the text input object to pass to the function without getting it first, getting it by id is the best way.

You can use the id of the text box:

var searchValue = document.getElementById('ad_search_query').value;

in your function, or use Ahsan Rathod's method to use this code as parameter.

Answer 2

<script>
function showTable(obj){
alert(obj.value)
}
</script>

<input type="text" id="ad_search_query" style="width:295px">&nbsp; 
<input type="button" value="search" class="p-userButton" onClick="showTable(document.getElementById('ad_search_query'));"/>

Answer 3

Do this:

JS:

<script> function showTable(val) {alert(val);} </script>

HTML:

<input type="text" id="ad_search_query" style="width:295px">&nbsp; 
<input type="button" value="search" class="p-userButton" onClick="showTable(document.getElementById('ad_search_query').value);"/>

See this Demo: http://jsfiddle.net/rathoreahsan/8ddbD/

Answer 4

In javascript function you can access textbox value like this

var text = document.getElementsByName("textbox1").value;