CODEWITHSUNDEEP
jquery
Derek Jee
Derek Jee

Reputation: 147

Get value and element id from input on button click

I have many repeats of this code below where a value in the input needs a calculation made to it on button click. Please can someone tell me how to get the value and replace it with a new one or get the id of the input element and I can update it. I have tried various bits of code like this

alert($(this).parent().prev().attr('id'));

but am obviously missing something as the elements are not adjacent. So clicking on the button must change the value in the input box. Thank you for your help in advance.

<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input1" name="p1TotalRevenue"/>
    </td>
    <td >
        <button id="button1" type="button">Test</button>
    </td>
</tr>

Upvotes: 0

Views: 68

Answers (4)

davidgiesemann
davidgiesemann

Reputation: 1010

One more way to do it is the context-variable of jQuery(selector,context):

$(document).on("click","button",function(){
  const value = $( "input", $(this).closest("tr") ).val() 

  alert(value)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input1" name="p1TotalRevenue"/>
    </td>
    <td >
        <button id="button1" type="button">Test</button>
    </td>
</tr>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input2" name="p2TotalRevenue"/>
    </td>
    <td >
        <button id="button2" type="button">Test</button>
    </td>
</tr>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input3" name="p3TotalRevenue"/>
    </td>
    <td >
        <button id="button3" type="button">Test</button>
    </td>
</tr>
</table>

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76573

You can reach it by getting the parentNode of the parentNode.

function getSomeValue() {
    return parseInt(Math.random() * 10) + 1;
}

function doIt(context) {
    context.parentNode.parentNode.querySelector("input").value = getSomeValue();
}
<table>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input1" name="p1TotalRevenue"/>
    </td>
    <td >
        <button id="button1" type="button" onclick="doIt(this)">Test</button>
    </td>
</tr>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input2" name="p2TotalRevenue"/>
    </td>
    <td >
        <button id="button2" type="button" onclick="doIt(this)">Test</button>
    </td>
</tr>
<tr class="tr-odd">
    <th>Total Revenue</th>
    <td>
        <input id="input3" name="p3TotalRevenue"/>
    </td>
    <td >
        <button id="button3" type="button" onclick="doIt(this)">Test</button>
    </td>
</tr>
</table>

Upvotes: 0

freefaller
freefaller

Reputation: 19953

Your example code alert($(this).parent().prev().attr('id')); doesn't go UP into the appropriate <td> element, so it's looking for the id of the <td> itself.

Change it to the following, and it should work...

alert($(this).parent().prev().find("input").attr('id'));

Alternatively, I would recommend giving the <input> a specific class and referencing it like that instead...

$(function() {
  $("button").on("click", function() {
     console.log($(this).closest("tr").find(".myInput").attr("id"));
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="tr-odd">
      <th>Total Revenue</th>
      <td>
          <input id="input1" name="p1TotalRevenue" class="myInput" />
      </td>
      <td >
          <button id="button1" type="button">Test</button>
      </td>
  </tr>
  <tr class="tr-odd">
      <th>Total Revenue</th>
      <td>
          <input id="input2" name="p1TotalRevenue" class="myInput" />
      </td>
      <td >
          <button id="button2" type="button">Test</button>
      </td>
  </tr>
</table>

The advantage of using a class is that you can target a specific input, should there be more than one within your <tr>. Otherwise you can ignore the class and simply use .find("input") instead of .find(".myInput")

Upvotes: 0

chingo81
chingo81

Reputation: 61

Hi I hope this one helps.


     $("button").on("click", function() {
           $(this).closest("tr").find("input").first().val("set");
     });

Upvotes: 1

Related Questions