get html form value using jquery through selectors

Question

<form id="Task1_1_1">
    Keywords: <input type="text" name="twitKey" value="iphone"><br><br> 
    Coordinates: <input type="text" name="twitLoc" value=""><br> <br> 
    Scope: <input type="text" name="scope" value="10" > km<br> <br>
    <button id="sendButton1_1_1">Search</button>
</form>

This is the form. I can get the values of the form through the following code.

$('#sendButton1_1_1').on('click', function(e) {
    console.log($('#Task1_1_1').val());
});

Here is the output from the js console

twitKey=iphone&twitLoc=&scope=10

My question is how to get the value of twitKey by using selectors? Or do I have to parse myself? I already know I get value by id Get the value from HTML form using jquery

I want to know whether I can get the value from value name such as

name="twitKey"

Sougata Bose · Accepted Answer · 2015-05-13T04:17:48.400

3

Try with -

console.log($('form#Task1_1_1 input[name=twitKey]').val());

Add a class/id to it -

<input type="text" name="twitKey" id="twitKey" value="iphone" >

And JS - console.log($('#twitKey').val());

edited May 13 '15 at 04:17

answered May 13 '15 at 04:05

Sougata Bose

31,517
8
49
87

If I use the first way, Is there any method that can ensure input[name=twitKey] come from the form with id"Task1_1_1"? – AlexWei May 13 '15 at 04:16

score 2 · Answer 2 · answered May 13 '15 at 04:08

Here is a snippet with multiple ways to grab the value of twitKey:

$('input[name="twitKey"]').val(); //iphone
$('input:first').val(); //iphone

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="Task1_1_1">
    Keywords: <input type="text" name="twitKey" value="iphone"><br><br> 
    Coordinates: <input type="text" name="twitLoc" value=""><br> <br> 
    Scope: <input type="text" name="scope" value="10" > km<br> <br>
    <button id="sendButton1_1_1">Search</button>
</form>

get html form value using jquery through selectors

2 Answers2