Retrieve input value using jQuery

if you declare var normal outside the click function handler then the initial value will be empty as there is no value in the text box once the DOM is ready . But if you declare it within the click event handler then the value will be assigned once you type something in the textbox and click the button. The below code works for me

$(document).ready(function() {

    
    $('#b').on("click", function() {
          var normal= $('#a').val();
         alert(normal);
        // same as alert($('#a').val());
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="a" id="a" />
<input type="button" name="b" id="b" value="Click here"/>

You're assigning normal upon document.ready() and not reassigning when you click, so normal will be whatever value you give to the input field when the page loads.

Try this code

$(document).ready(function() {


        $('#b').on("click", function() {
        var normal=$('#a').val();
        alert(normal);
      });

    });

Yes, you are right,

provided the text box with id= a had some text on load.

by that I mean something along the lines of

<input type="text" name="a" id="a" value= "foo"/>

Fiddle: http://jsfiddle.net/Jayas/vhjm8v31/2/

Now if you hit Clickhere button it will display foo.

In your case

1. When you assign the value of a to normal the text box is empty.

2. You dont have any handlers or events hooked up to reset/set the variable normalon something being typed or after something has got typed in. by that I mean something along the lines of having the value stored on input change along the lines of

   $(document).ready(function(){
    $('#a').bind('input propertychange', function() {
         normal = $('#a').val();
        }
    })
   

Fiddle http://jsfiddle.net/Jayas/vhjm8v31/4/

tl:dr - rebinding of the text to the declared variable does not "automagically" happen

So now when you click on the button after reassigning normal you will see the typed value.

or alternatively you can capture the value of normal on click event as you already have it , along the lines of

  $('#b').on("click", function() {
        var normal = $('#a').val();
        alert(normal);
  });