jQuery combining multiple functions for cleaner coding

Question

How do I make this code shorter? It works but I'd like to write better code and don't know how to combine the functions.

$(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q01"]').is(':checked')) {
            $('.q01').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

 $(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q04"]').is(':checked')) {
            $('.q04').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

 $(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q07"]').is(':checked')) {
            $('.q07').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

HTML is quite long but I added it al as requested. Thanks for sharing your skills with me.

                <div id="multiplequestions" class="quiz">                    
                    <ol id="multiplequestions-start" class="quiz__list">                    
                        <!-- question 1 -->
                        <li id="multiplequestions-q01">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">1.</div>
                                    <div class="quiz__question-text">
                                      <p>Queston 1</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e01"/><label for="multiplequestions-q01-e01">Answer 1</label><br/>                          
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e02"/><label for="multiplequestions-q01-e02">Answer 1a</label><br/>
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e03"/><label for="multiplequestions-q01-e03">Answer 1b</label><br/>
                                        <input type="radio" name="multiplequestions-q01" data-set="multiplequestions-q01" id="multiplequestions-q01-e04"/><label for="multiplequestions-q01-e04">Answer 1c</label><br/>
                                        <div class="q01 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                           
                        <!-- question 2 FREE TEXT-->
                        <li id="multiplequestions-q02">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">2.</div>
                                    <div class="quiz__question-text">
                                       <p>Question 2</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <textarea type="textarea" id="multiplequestions-q02-e01" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                        <!-- question 3 FREE TEXT -->
                        <li id="multiplequestions-q03">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">3.</div>
                                    <div class="quiz__question-text">
                                      Question 3
                                    </div>
                                </div>
                                <div class="quiz__answer">
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                        <!-- question 4 -->
                        <li id="multiplequestions-q04">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">4.</div>
                                    <div class="quiz__question-text">
                                     Question 4
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e01"/><label for="multiplequestions-q04-e01">Answer 4a</label><br/> 
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e02"/><label for="multiplequestions-q04-e02">Answer 4b</label><br/>
                                        <input type="radio" name="multiplequestions-q04" data-set="multiplequestions-q04" id="multiplequestions-q04-e03"/><label for="multiplequestions-q04-e03">Answer 4c</label><br/>
                                        <div class="q04 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>  
                        <!-- question 5 FREE TEXT -->
                        <li id="multiplequestions-q05">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">5.</div>
                                    <div class="quiz__question-text">
                                      <p>Queston 5</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li> 
                        <!-- question 6 FREE TEXT -->
                        <li id="multiplequestions-q06">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">6.</div>
                                    <div class="quiz__question-text">
                                        <p>Question 6</p>
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <textarea type="textarea" class="animated"></textarea>
                                        <div class="quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- question 7 -->
                        <li id="multiplequestions-q07">
                            <div class="quiz__item">
                                <div class="quiz__question">
                                    <div class="quiz__question-num">7.</div>
                                    <div class="quiz__question-text">
                                        Question 7
                                    </div>
                                </div>
                                <div class="quiz__answer">                                    
                                    <div class="quiz__control">
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e01"/><label for="multiplequestions-q07-e01">Answer 7a</label><br/> 
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e02"/><label for="multiplequestions-q07-e02">Answer 7b</label><br/>
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e03"/><label for="multiplequestions-q07-e03">Answer 7c</label><br/>
                                        <input type="radio" name="multiplequestions-q07" data-set="multiplequestions-q07" id="multiplequestions-q07-e04"/><label for="multiplequestions-q07-e04">Answer 7d</label><br/>
                                        <div class="q07 quiz__control-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </li>                            
                    </ol>
                    <!-- buttons -->
                    <div class="quiz__buttons">
                        <button id="check_activity" type="submit" class="quiz__check btn btn-primary feedme" title="Check my answers">Check</button>
                        <button type="reset" class="quiz__reset btn btn-default feednone" title="Clear my answers">Reset</button>
                    </div>
                </div>

i need html because i want to see where is your ".q07 , .q04" etc.. classes and radio buttons — JavidRathod
– JavidRathod, Commented Feb 12, 2016 at 4:06

Arun P Johny · Accepted Answer · 2016-02-12 04:13:01Z

You can have an array of question numbers and then process it by looping them

$(function() {
  $('#check_activity').on('click', function(e) {
    ['01', '04', '07'].forEach(function(no) {
      $('.q' + no + ' .noBlank').remove();
      if (!$('input[name="multiplequestions-q' + no + '"]').is(':checked')) {
        $('.q' + no).append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
        e.preventDefault();
      }
    })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="q01">
  <input name="multiplequestions-q01" type="radio" />
  <input name="multiplequestions-q01" type="radio" />
  <input name="multiplequestions-q01" type="radio" />
</div>
<div class="q04">
  <input name="multiplequestions-q04" type="radio" />
  <input name="multiplequestions-q04" type="radio" />
  <input name="multiplequestions-q04" type="radio" />
</div>
<div class="q07">
  <input name="multiplequestions-q07" type="radio" />
  <input name="multiplequestions-q07" type="radio" />
  <input name="multiplequestions-q07" type="radio" />
</div>
<button id="check_activity">Test</button>

Barmar · Accepted Answer · 2016-02-12 04:14:47Z

2

Give all the inputs that require you to select a radio button a class, like radio-required. Then you can use .each() to process them all in a loop.

$(function() {
    $('button#check_activity').on('click', function(e) {
        var button_groups = $.unique($('input.radio-required').map(function() {
            return this.name;
        }).get());
        $.each(button_groups, function(i, name) {
            if (!$('input[name=' + name + ']').is(':checked')) {
                var question = name.split('-')[1];
                $('.' + question).append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
                e.preventDefault();
            }
        });
    });
});

answered Feb 12, 2016 at 4:14

Barmar

789k57 gold badges555 silver badges669 bronze badges

Comments

S M · Accepted Answer · 2016-02-12 03:59:40Z

You can write it like below

$(function () {

$('button#check_activity').on('click' , function(e) {
        if (!$('input[name="multiplequestions-q01"]').is(':checked')) {
            $('.q01').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }

        if (!$('input[name="multiplequestions-q04"]').is(':checked')) {
            $('.q04').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }

        if (!$('input[name="multiplequestions-q07"]').is(':checked')) {
            $('.q07').append('<span class=\"noBlank clearfix\">You must select a radio button</span>');
            e.preventDefault();
        }
    });
});

Collectives™ on Stack Overflow

jQuery combining multiple functions for cleaner coding

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related