Jquery get the value of input text field

Question

I have a textbox in which I can provide a string. When I ran the debugger (both IE and Chrome), I can see that the string it reads does not contain my input, but instead "" (an empty string). -Actually there are two textboxes, but they are similar.

The box and my code looks like this, Html part:

<table>
        <tbody><tr><td>Type value here</td><td>Type second value here</td></tr>
        <tr><td><input id="MTY1" type="text"></td><td><input id="MTY2" type="text"></td></tr>
        <tr><td></td><td><button name="btnGetPerson" onclick="GetPerson();">Retrieve info</button></td></tr>

Jquery part:

MyTypedValue1 = $('#MTY1').val();
MyTypedValue2 = $('#MTY2').val();

I found many closely related answers to this question. And I have tried the following:

MyTypedValue1 = $('#MTY1').value();
MyTypedValue2 = $('#MTY2').value();

MyTypedValue1 = $('#MTY1');
MyTypedValue2 = $('#MTY2');

I have also tried the Js form:

var MyTypedValue1 = document.getElementById("MTY1").value;
var MyTypedValue2 = document.getElementById("MTY2").value;

w3school has a great working example. But still I get the empty string. https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_val_get.

I have tried all of the above with and without the type 'var' and the element in single and double '' "". Also I have been instructed to make this in Jquery and not JavaScript. But atm. I will accept anything that works.

Can anyone tell what I am doing wrong?

Thanks.

Edit: To recap, since the error was another place in the code, the Jquery code bit being used is correct:

MyTypedValue1 = $('#MTY1').val();
MyTypedValue2 = $('#MTY2').val();

You haven't given a full example of your code, but the pieces together work fine: jsfiddle.net/07wfq6rh — Rory McCrossan
– Rory McCrossan, Commented Jul 14, 2017 at 12:24
The code is much larger. Also the structure is tested and works with hardcoded values. — ToFo
– ToFo, Commented Jul 14, 2017 at 12:25
Can you check if there are more than 1 ids present with same name (say MTY). Ids should be unique throughout the page. This seems to be only option left after @Rory McCrossan jsfiddle. — Dave Ranjan
– Dave Ranjan, Commented Jul 14, 2017 at 12:29

Dave Ranjan · Accepted Answer · 2017-07-14 12:37:15Z

1

There should be more than one id (say MTY1) present on the same page. Html ids should be unique throughout the page.

This seems to be only option left after @Rory McCrossan jsfiddle.

answered Jul 14, 2017 at 12:37

Dave Ranjan

2,99429 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roland Ruul · Accepted Answer · 2017-07-14 12:31:44Z

0

Is your function in global scope? If not, it wont trigger.. What I mean by that is that you have to put your script before the button is loaded into DOM.

Other way to achive what you're looking for:

Add id to your button and remove onclick event:

<button name="btnGetPerson" id="getPerson">Retrieve info</button>

And jquery:

$(function() {

    $('#getPerson').on('click', function() {
        var val1 = $('#MTY1').val(),
            val2 = $('#MTY2').val();

        console.log(val1 + ' ' + val2);
    });

});

answered Jul 14, 2017 at 12:31

Roland Ruul

1,2529 silver badges15 bronze badges

Comments

user8294656 · Accepted Answer · 2017-07-14 12:38:19Z

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

});

function GetPerson()
{
var value=  document.getElementById("MTY1").value;
var Value2= document.getElementById("MTY2").value;
alert(value+" "+Value2);

}
</script>
</head>
<body>

<table>
        <tbody><tr><td>Type value here</td><td>Type second value here</td></tr>
        <tr><td><input id="MTY1" type="text"></td><td><input id="MTY2" type="text"></td></tr>
        <tr><td></td><td><button name="btnGetPerson" onclick="GetPerson();">Retrieve info</button></td></tr>
</body>
</html>


I checked this code and it's working. Please check it once.

Collectives™ on Stack Overflow

Jquery get the value of input text field

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related