12

i have some html code like this

<form name="first"><input name="firstText" type="text" value="General" /> 
<input name="secondText" type="text" value="General" /> 
<input name="ThirdText" type="text" value="General" /> 
<input name="FourthText" type="text" value="General" /> 
<input name="FifthText" type="text" value="General" />
</form>

<form name="second"><input name="firstText" type="text" value="General" /> 
<input name="secondText" type="text" value="General" /> 
<input name="ThirdText" type="text" value="General" /> 
<input name="FourthText" type="text" value="General" /> 
<input name="FifthText" type="text" value="General" />
</form>

i want to select "secondText" of form "second" using jquery or javascript and i want to change value of it using jquery.

0

7 Answers 7

18

Using jQuery:

var element = $("form[name='second'] input[name='secondText']");

Using vanilla JS:

var element = document.querySelector("form[name='second'] input[name='secondText']");

Changing the value: element.val(value) or element.value = value, depending of what you are using.

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

Comments

4

To the point with pure JS:

document.querySelector('form[name=particular-form] input[name=particular-input]')

Update:

This selector will return the input named "particular-input" inside form named "particular-form" if exists, otherwise returns null.

The selector filter "form[name=particular-form]" will look for all forms with name equals "particular-form": <form name="particular-form">

The selector filter "input[name=particular-input]" will look for all input elements with name equals "particular-input": <input name="particular-input">

Combining both filters with a white space, I mean:

"form[name=particular-name] input[name=particular-input]"

We are asking for querySelector(): Hey, find all inputs with name equals "particular-input" nested in all forms with name equals "particular-form".

Consider:

<form name="particular-form">
  <input name="generic-input">
  <input name="particular-input">
</form>
<form name="another-form">
  <input name="particular-input">
</form>
<script>
  document.querySelector('form[name=particular-form] input[name=particular-input]').style.background = "#f00"
</script>

This code will change the background color only of the second input, no matter the third input have same name. It is because we are selecting only inputs named "particular-input" nested in form named "particular form"

I hope it's more clear now.

;)

By the way, unfortunately I didn't found good/simple documentation about querySelector filters, if you know any reference, please post here.

1 Comment

Please explain what your answer is doing.
2
// Define the target element
elem = jQuery( 'form[name="second"] input[name="secondText"]' );

// Set the new value
elem.val( 'test' );

Comments

0

Try

$("form[name='second'] input[name='secondText']").val("ENTER-YOUR-VALUE");

Comments

0

You can do it like this:

jQuery

$("form[name='second'] input[name='secondText']").val("yourNewValue");

Demo: http://jsfiddle.net/YLgcC/

Or:

Native Javascript

Old browsers:

var myInput = [];
myInput = document.getElementsByTagName("input");

for (var i = 0; i < myInput.length; i++) {
    if (myInput[i].parentNode.name === "second" &&
       myInput[i].name === "secondText") {
        myInput[i].value = "yourNewValue";
    }
}

Demo: http://jsfiddle.net/YLgcC/1/

New browsers:

document.querySelector("form[name='second'] input[name='secondText']").value = "yourNewValue";

Demo: http://jsfiddle.net/YLgcC/2/

Comments

0

You can try this line too:

$('input[name="elements[174ec04d-a9e1-406a-8b17-36fadf79afdf][0][value]"').mask("999.999.999-99",{placeholder:" "});

Comments

-1

Add button in both forms. On Button click find nearest form using closest() function of jquery. then using find()(jquery function) get all input values. closest() goes in upward direction in dom tree for search and find() goes in downward direction in dom tree for search. Read here

Another way is to use sibling() (jquery function). On button click get sibling input field values.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.