mercredi 6 mai 2015

Jquery if checkbox checked and textarea is empty, else

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