I checked through the questions and answers and I'm nearly there. Just need a bit of help to complete.
If a user check a checkbox and leaves the textarea empty inser message. If checkbox is checked and textare is not empty, show the answer.
I only want the action to run on each row as its check box is checked. Currently it affects all rows. Thanks for any help
Table
<table id="activity">
<thead>
<tr>
<th scope="col">1</th>
<th scope="col">2</th>
<th scope="col">3</th>
<th scope="col">4</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="answer" /></td>
<td>concrete</td>
<td><textarea id="response1" name="response1" title="response1" rows="3" class="form-control"></textarea></td>
<td class="answer_block"><span>Answer 1</span></td>
</tr>
<tr>
<td><input type="checkbox" class="answer" /></td>
<td>concrete</td>
<td><textarea id="response2" name="response2" title="response2" rows="3" class="form-control"></textarea></td>
<td class="answer_block"><span>Answer 2</span></td>
</tr>
<tr>
<td><input type="checkbox" class="answer" /></td>
<td>concrete</td>
<td><textarea id="response3" name="response3" title="response3" rows="3" class="form-control"></textarea></td>
<td class="answer_block"><span>Answer 3</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"><button type="submit" name="check" id="button-check">Check</button> <button type="reset" name="reset" value="reset" id="button-reset">Reset</button></td>
</tr>
</tfoot>
</table>
script
$('button#button-check').on('click' , function() {
$('.answer').each(function() {
if ($(this).is(':checked') && !$.trim($(".form-control").val()).length ){
$('.form-control').val('Input can not be left blank');
$(this).parent().siblings().children('span').hide();
} else {
$(this).parent().siblings().children('span').show();
}
});
});
Aucun commentaire:
Enregistrer un commentaire