Correct way with jquery to get values from multiple input and buttons

Question

I need to get value from input. But the forms are generated dynamically and they have the same class. How can i get for example the input value of only one? In the fiddle below if i click on modify always the first button get triggered.

<form class="myForm">
    <label for='newName'>file</label>
    <input type='text' class='newName' placeholder='new name'/>
    <input type='button' name='change' class='btnSelected' value='Modify'/>
</form>
<form class="myForm">
    <label for='newName'>file</label>
    <input type='text' class='newName' placeholder='new name'/>
    <input type='button' name='change' class='btnSelected' value='Modify'/>
</form>

<script>
$(document).ready(function(){

$(".myForm").on('click', '.btnSelected', function() {

        newName = $(".newName").val();
      console.log(newName);
});


});    
</script>

Fiddle: https://jsfiddle.net/jkwv0oha/2/

You need to find the ".newName" element that is a sibling of the button that was clicked. Many ways to do it — epascarello
– epascarello, Commented Jun 8, 2021 at 14:35
Thank you both of you it worked. I think we can close the question. thx — Aogiri14
– Aogiri14, Commented Jun 8, 2021 at 14:48
The for attribute of the label element should point to the id attribute of the element it labels, not the name. — Heretic Monkey
– Heretic Monkey, Commented Jun 8, 2021 at 15:18
Does this answer your question? jQuery: find input field closest to button — Heretic Monkey
– Heretic Monkey, Commented Jun 8, 2021 at 15:30

zer00ne · Accepted Answer · 2021-06-08 15:14:15Z

Without jQuery, register the <body> to listen for 'click' event then simply delegate the click event so that the event handler getValue() is fired only if the user clicked anything with class .btnSelected. In order to get the correct <input> value, .previousElementSibling and .value properties were applied to clicked button (referenced to as event.target).

const getValue = e => {
  if (e.target.classList.contains('btnSelected')) {
    console.log(e.target.previousElementSibling.value);
  }
};

document.body.onclick = getValue;

<form class="xForm">
  <label for='newName'>file</label>
  <input type='text' class='newName' placeholder='new name' />
  <input type='button' name='change' class='btnSelected' value='Modify' />
</form>
<form class="xForm">
  <label for='newName'>file</label>
  <input type='text' class='newName' placeholder='new name' />
  <input type='button' name='change' class='btnSelected' value='Modify' />
</form>

Collectives™ on Stack Overflow

Correct way with jquery to get values from multiple input and buttons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related