Javascript Checkbox add value Textarea

Question

I have a code like these:

var fails = 'fail';
var sucs = 'success';

function showResult(state){
	if(state){
      document.getElementById("hasil").value=sucs;
    }else{
      document.getElementById("hasil").value=fails;
    }									
}

<form>
  <table border='1'>
    <tr>
      <th>TARGET</th>
      <th>RESULT</th>
      <th>NOTES</th>
    </tr>
    <tr>
      <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
      <td><textarea name='result[]' id='hasil'>fail</textarea></td>       <td><textarea name='notes[]' class='form-control'></textarea></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
      <td><textarea name='result[]' id='hasil'>fail</textarea></td>       <td><textarea name='notes[]' class='form-control'></textarea></td>
    </tr>
    <tr>
      <td><input type='checkbox' name='target' onclick='showResult(this.checked);' /></td>
      <td><textarea name='result[]' id='hasil'>fail</textarea></td>       <td><textarea name='notes[]' class='form-control'></textarea></td>
    </tr>
</form>

I want to create that checkbox, if it's clicked, it will change textarea on that row to success. If I uncheck, it will change back to fail. Can anyone help me?

getElementsByClassName is not name, getElementsByClassName returns a collection.... — epascarello
– epascarello, Commented Oct 11, 2016 at 4:03
I try to change it with ID but it only works for the first row... — Cross Vander
– Cross Vander, Commented Oct 11, 2016 at 4:06
Because ids are singular. Hopefully someone can show you how to get the reference to the checkbox. Select the parent tr, find the text area and set the value. I can not code that on my phone. — epascarello
– epascarello, Commented Oct 11, 2016 at 5:09

Divyang Desai · Accepted Answer · 2016-10-11 05:59:42Z

1

it only works for the first row.

As @epascarello said, because ids are singular. so you need to select the parent tr, find the text area and set the value.

You can do in this way.

$('[type=checkbox]').change(function() {

  if ($(this).is(":checked")) {
    var $row = $(this).parents('tr');
    $row.find('textarea[name="result[]"]').text("sucess");
  } else {
    var $row = $(this).parents('tr');
    $row.find('textarea[name="result[]"]').text("fail");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <table border='1'>
    <tr>
      <th>TARGET</th>
      <th>RESULT</th>
      <th>NOTES</th>
    </tr>
    <tr>
      <td>
        <input type='checkbox' name='target' />
      </td>
      <td>
        <textarea name='result[]' id='hasil'>fail</textarea>
      </td>
      <td>
        <textarea name='notes[]' class='form-control'></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' name='target' />
      </td>
      <td>
        <textarea name='result[]' id='hasil'>fail</textarea>
      </td>
      <td>
        <textarea name='notes[]' class='form-control'></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <input type='checkbox' name='target' />
      </td>
      <td>
        <textarea name='result[]' id='hasil'>fail</textarea>
      </td>
      <td>
        <textarea name='notes[]' class='form-control'></textarea>
      </td>
    </tr>
</form>

edited Oct 11, 2016 at 5:59

answered Oct 11, 2016 at 5:50

Divyang Desai

7,89414 gold badges56 silver badges83 bronze badges

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

3 Comments

Cross Vander Over a year ago

hello, it works smooth in snippet, but not in my code. Is it need to be placed on head or body? or it's not matter?

Divyang Desai Over a year ago

Could you tell me on which technology you are working with? and as of now considered HTML, so you can put this in header tag. in $(document).ready(function(){yourcode});

Cross Vander Over a year ago

I'm very sorry... I missed bracket after function.... It works perfectly now.. thank you so much!

Collectives™ on Stack Overflow

Javascript Checkbox add value Textarea

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related