CODEWITHSUNDEEP
javascriptjquery
sequel
sequel

Reputation: 196

Retrieve input value using jQuery

I want to retrieve the value of an input using jQuery.

Here's the HTML:

<input type="text" name="a" id="a" />
<input type="button" name="b" id="b" value="Click here"/>

Here's the jQuery:

$(document).ready(function() {

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

});

Due to some reason the alert(normal); does not work whereas alert($('#a').val()); does. Why? Isn't normal and $('#a').val(); holding the same value?

In case you want a jsfiddle: http://jsfiddle.net/L2uX4/20/

Thanks

Upvotes: 0

Views: 60

Answers (4)

Jaya
Jaya

Reputation: 3911

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

Upvotes: 0

Arun
Arun

Reputation: 1719

Try this code 

$(document).ready(function() {


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

    });

Upvotes: 0

Niladri
Niladri

Reputation: 5962

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"/>

Upvotes: 2

Michael Evans
Michael Evans

Reputation: 1011

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.

Upvotes: 1

Related Questions