Sheharose
Sheharose

Reputation: 295

How to get a specific form elements using jQuery

I have a multiple forms in a page and i would like to get the elements of a specific form. For example:

<form class="form" id="1">
  <input type="text" name="message" value="message">
  <button type="submit" value="submit">Submit</button> 
</form>
<form class="form" id="2">
  <input type="text" name="message" value="message">
  <button type="submit" value="submit">Submit</button> 
</form>

How to get the value of message of form id=2...... Thanks in advance

Upvotes: 0

Views: 9466

Answers (4)

Nerdy
Nerdy

Reputation: 192

You can use jQuery, or you can use basic JavaScript to return the message value. With basic JS, you would have to give your form a name, but then could return the message value.

Code:

function getValue() {
    var message = document.forms["form_name"]["message"].value;
}

You would then have to return the function when the form is submitted

<form class="form" name="form_name" onsubmit="return getValue()">

Upvotes: 0

jpschroeder
jpschroeder

Reputation: 6916

You really shouldn't use raw numbers for ids, let's rename those to form_1 and form_2, then your jquery selector would be:

$("#form_2 [name='message']").val();

Upvotes: 1

depperm
depperm

Reputation: 10746

Simply query the input from the id of the form you'd like

console.log($('#2 input').val());

//more specific
console.log($('#2 input[name="message"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" id="1">
  <input type="text" name="message" value="message">
  <button type="submit" value="submit">Submit</button> 
</form>
<form class="form" id="2">
  <input type="text" name="message" value="message">
  <button type="submit" value="submit">Submit</button> 
</form>

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

Just use attribute selectors

 $('form[id=2]') // get the form with id = 2
.find('input[name=message]') // locate the input element with attribute name = message
.attr("value"); //  get the attribute = value

Upvotes: 6

Related Questions