[javascript] How to get text box value in JavaScript

I am trying to use JavaScript to get the value from an HTML text box but value is not coming after white space

For example:

<input type="text" name="txtJob" value="software engineer">

I only get: "software" from the above. I am using a script like this:

var jobValue = document.getElementById('txtJob').value

How do I get the full value: "software engineer"?

This question is related to javascript html

The answer is


If you are using any user control and want to get any text box values then you can use the below code:

var result = document.getElementById('LE_OtherCostsDetails_txtHomeOwnerInsurance').value;

Here, LE_OtherCostsDetails, is the name of the user control and txtHomeOwnerInsurance is the id of the text box.


Set id for the textbox. ie,

<input type="text" name="txtJob" value="software engineer" id="txtJob"> 

In javascript

var jobValue = document.getElementById('txtJob').value

In Jquery

 var jobValue =  $("#txtJob").val();



The problem is that you made a Tiny mistake!

This is the JS code I use:

var jobName = document.getElementById("txtJob").value;

You should not use name="". instead use id="".


<!DOCTYPE html>
<html>
<body>
<label>Enter your Name here: </label><br>
<input type= text id="namehere" onchange="displayname()"><br>


<script>
function displayname() {
    document.getElementById("demo").innerHTML = 
document.getElementById("namehere").value;
}

</script>


<p id="demo"></p>

</body>
</html> 

Set the id attribute of the input to txtJob. Your browser is acting quirky when you call getElementById.


If you are using ASP.NET, the server-side code tags in these examples below will provide the exact control ID, even if you are using Master pages.

Javascript:

document.getElementById("<%=MyControlName.ClientID%>").value;

JQuery:

$("#<%= MyControlName.ClientID %>").val();

Here is a simple way

document.getElemmentByName("txtJob").getAttribute("value")

because you used space between software engineer html/php will not support space between value under textbox, you have to use this code <input type="text" name="txtJob" value=software_engineer> It will work


Provided when you want the text box value. Simple one:

<input type="text" value="software engineer" id="textbox">

var result = document.getElementById("textbox").value;

 var jobValue=document.FormName.txtJob.value;

Try that code above.

jobValue : variable name.
FormName : Name of the form in html.
txtJob : Textbox name


Your element does not have an ID but just a name. So you could either use getElementsByName() method to get a list of all elements with this name:

var jobValue = document.getElementsByName('txtJob')[0].value  // first element in DOM  (index 0) with name="txtJob"

Or you assign an ID to the element:

<input type="text" name="txtJob" id="txtJob" value="software engineer">

var word = document.getElementById("word").value;//by id
or
var word = document.forms[0].elements[0].value;//by index
//word = a word from form input
var kodlandi = escape(word);//apply url encoding

alert(escape(word));
or
alert(kodlandi);

the problem you are not using encoding for input values from form so not browser adds ones to ...

ontop has some problems as unicode encoding/decoding operations so use this function encoding strings/arrays

function urlencode( str ) 
{
// http://kevin.vanzonneveld.net3.    
// +   original by: Philip Peterson4.    
// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)5.    
// *     example 1: urlencode('Kevin van Zonneveld!');
// *     returns 1: 'Kevin+van+Zonneveld%21'7. 
   var ret = str; 
   ret = ret.toString();
   ret = encodeURIComponent(ret);
   ret = ret.replace(/%20/g, '+');
   return ret;
}


ex.
var word = "some word";
word = urlencode(word);

You Need to change your code as below:-

<html>
<body>
<div>
<form align="center" method=post>
    <input id="mainText" type="text" align="center"placeholder="Search">

    <input type="submit" onclick="myFunction()" style="position: absolute; left: 450px"/>
</form>
</div>
<script>
function myFunction(){
    $a= document.getElementById("mainText").value;
    alert($a);
        }
</script>
</body>
</html>

This should be simple using jquery:

HTML:

  <input type="text" name="txtJob" value="software engineer">

JS:

  var jobValue = $('#txtJob').val(); //Get the text field value
  $('#txtJob').val(jobValue);        //Set the text field value

If it is in a form then it would be:

<form name="jojo">
<input name="jobtitle">
</form>

Then you would say in javascript:

var val= document.jojo.jobtitle.value

document.formname.elementname