JQuery / Javascript set input box in table based on radio selection

user_7828747 0
Viewed 135

I am trying to delete the value inside an input box based on a radio selection inside a table. The fact it is a table is where it is causing problems for me.

In the fun example I provided, I want to delete their favorite food if they say they don't like tacos on the radio buttons. This has been one of my attempts at trying to solve my issue, but it is not working or doing anything. 

$(function() {
  $
  var $row = $(this).closest('tr')
  $('.likesTacos').change(function() {
    if (!$row.find(".likesTacos[value=['1']").is(":checked")) {
      $row.find('.favFood').val("")
    } else {
      console.log("Good choice in food!")
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

html jquery javascript
3 Answers

You could blank it but also put it back if they change their mind :)

Here I walk you through the code line by line

// reference to food
let fd = $(this).closest('tr').find('.favFood');
// food value, if blank, get the origial stored
let v = fd.val() == "" ? fd.data('org') : fd.val();
// store our value v
fd.data('org', v);
// blank or not depending on the value
fd.val(($(this).val() == 1) ? v : "");


$(function() {
  $('.likesTacos').on('change', function() {
    let fd = $(this).closest('tr').find('.favFood');
    let v = fd.val() == "" ? fd.data('org') : fd.val();
    fd.data('org', v);
    fd.val(($(this).val() == 1) ? v : "");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

user_1259810

You was so close, you've just to push the row definition inside the event to give the $(this) object a context.

Like this, the keyword this refers to the changed radio and the closest will get the parent tr of the changed radio button.

NOTE 1: remove the extra dollar sign $ after the ready function definition.

NOTE 2: You could simplify your condition using .val() like :

if ($(this).val() == 0) {

Shorten version could be in one line :

$(this).val() == 0 ? $(this).closest('tr').find('.favFood').val("") : console.log("Good choice in food!");


$(function() {
  $('.likesTacos').change(function() {
    var row = $(this).closest('tr');

    if ( $(this).val() == 0 ) {
      row.find('.favFood').val("");
    } else {
      console.log("Good choice in food!");
    }
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=1/>Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
      </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
  <tr>
    <td>Bart</td>
    <td>Starr</td>
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
      </div>
      <div>
        <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
      </div>
    </td>
  </tr>
</table>

user_42817790

Perhaps you could take a simpler approach, by just checking the value of the clicked/changed radio button, like so:

$(function () {

$('.likesTacos').change(function() {
  var row = $(this).closest('tr');

    // Just examine the value of the changed radio button. 
    // If it's zero, then consider this a "no" answer
    if ($(this).val() == '0') {
      row.find('.favFood').val("")
    } else {
      console.log("Good choice in food!")
    }
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Favorite Food</th>
    <th>Likes Tacos</th>
  </tr>
  <tr>
    <td>Aaron</td>
    <td>Rodgers</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
    <td>                        
    <div>
    <label><input type="radio" name="tacos1" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos1" class="likesTacos" value=0 />No</label>
    </div>
  </tr>
  <tr>
    <td>Brett</td>
    <td>Favre</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
        <td>
        <div>
    <label><input type="radio" name="tacos2" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos2" class="likesTacos" value=0 />No</label>
    </div>
    </td>
  </tr>
    <tr>
    <td>Bart</td>
    <td>Starr</td> 
    <td><input textbox class="favFood" value="Tacos"></td>
        <td>
        <div>
    <label><input type="radio" name="tacos3" class="likesTacos" value=1 />Yes</label>
    </div>
    <div>
    <label><input type="radio" name="tacos3" class="likesTacos" value=0 />No</label>
    </div>
    </td>
  </tr>
</table>

user_85267050
Related