html – How to get text box value in JavaScript-ThrowExceptions

Exception or error:

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”?

How to solve:

+1 Gumbo: ‘id’ is the easiest way to access page elements. IE (pre version 8) will return things with a matching ‘name’ if it can’t find anything with the given ID, but this is a bug.

i am getting only “software”.

id-vs-name won’t affect this; I suspect what’s happened is that (contrary to the example code) you’ve forgotten to quote your ‘value’ attribute:

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


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
var word = document.forms[0].elements[0].value;//by index
//word = a word from form input
var kodlandi = escape(word);//apply url encoding


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

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

function urlencode( str ) 
// http://kevin.vanzonneveld.net3.    
// +   original by: Philip Peterson4.    
// +   improved by: Kevin van Zonneveld (    
// *     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;

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


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

function displayname() {
    document.getElementById("demo").innerHTML = 


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



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


If it is in a form then it would be:

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

Then you would say in javascript:

var val= document.jojo.jobtitle.value



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

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

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


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.




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


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.


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=””.


You Need to change your code as below:-

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

    <input type="submit" onclick="myFunction()" style="position: absolute; left: 450px"/>
function myFunction(){
    $a= document.getElementById("mainText").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


 var jobValue=document.FormName.txtJob.value;

Try that code above.

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


This should be simple using jquery:


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


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


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();

Leave a Reply

Your email address will not be published. Required fields are marked *