Get value and element id from input on button click-CodePudding

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 >
    <th>Total Revenue</th>
    <td>
        <input id="input1" name="p1TotalRevenue"/>
    </td>
    <td >
        <button id="button1" type="button">Test</button>
    </td>
</tr>

CodePudding user response：

Hi I hope this one helps.


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

CodePudding user response：

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 >
      <th>Total Revenue</th>
      <td>
          <input id="input1" name="p1TotalRevenue"  />
      </td>
      <td >
          <button id="button1" type="button">Test</button>
      </td>
  </tr>
  <tr >
      <th>Total Revenue</th>
      <td>
          <input id="input2" name="p1TotalRevenue"  />
      </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")

CodePudding user response：

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 >
    <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 >
    <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 >
    <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>

CodePudding user response：

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 >
    <th>Total Revenue</th>
    <td>
        <input id="input1" name="p1TotalRevenue"/>
    </td>
    <td >
        <button id="button1" type="button">Test</button>
    </td>
</tr>
<tr >
    <th>Total Revenue</th>
    <td>
        <input id="input2" name="p2TotalRevenue"/>
    </td>
    <td >
        <button id="button2" type="button">Test</button>
    </td>
</tr>
<tr >
    <th>Total Revenue</th>
    <td>
        <input id="input3" name="p3TotalRevenue"/>
    </td>
    <td >
        <button id="button3" type="button">Test</button>
    </td>
</tr>
</table>

CodePudding user response：

// Add a click handler to all buttons

$('button').on('click', function(e){
  $(this).closest("tr").find('input').val('Filled in')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr >
      <th>Total Revenue</th>
      <td>
          <input id="input1" name="p1TotalRevenue"/>
      </td>
      <td >
          <button id="button1" type="button">Test</button>
      </td>
  </tr>
  <tr >
      <th>Total Revenue</th>
      <td>
          <input id="input2" name="p1TotalRevenue"/>
      </td>
      <td >
          <button id="button2" type="button">Test</button>
      </td>
  </tr>
</table>