Je pondère un code où l'utilisateur sélectionnera sa réponse pour les questions qui lui sont posées. Il y aurait plusieurs questions par page. Et je veux que toutes ces questions trouvent une réponse. Vous trouverez ci-dessous le code du formulaire de questions où les questions sont appelées dynamiquement à partir de la base de données dans une boucle.

<form id="radio-demo" class="radio-demo" action="<?php echo get_site_url(); ?>/register-response" method="POST">
    <?php
/* print_r($categories); */

/*loop to get questions for each categories*/
foreach($cat as $categories){       
$software = $wpdb->get_results("SELECT * FROM ". $wpdb->prefix ."statement where statement_category_id =".$categories->statement_category_id);
$j++;
    $table = $software;
    $c_id = $categories->statement_category_id;     
    $i = 0;

    ?>

     <div class="custom_hide" id="page_<?php echo $j;?>">
     <?php
     $cat_name = $categories->statement_category;
     /*loop for the number of questions per category */
    foreach($table as $software) {
        $i++; 
        ?>


        <div class="question_one">
            <p><?php echo $i.". ".$software->statement;?></p>



              <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="first-choice-<?php echo $i;?>" value="<?php echo 1*$software->weight;?>" required = "required"/> 
                <label for="first-choice">1</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="second-choice-<?php echo $i;?>" value="<?php echo 2*$software->weight;?>" required = "required"/> 
                <label for="second-choice">2</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="third-choice-<?php echo $i;?>" value="<?php echo 3*$software->weight;?>" required = "required"/> 
                <label for="third-choice">3</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="four-choice-<?php echo $i;?>" value="<?php echo 4*$software->weight;?>" required = "required"/> 
                <label for="four-choice">4</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="five-choice-<?php echo $i;?>" value="<?php echo 5*$software->weight;?>" required = "required"/> 
                <label for="five-choice">5</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="six-choice-<?php echo $i;?>" value="<?php echo 6*$software->weight;?>" required = "required"/> 
                <label for="six-choice">6</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="seven-choice-<?php echo $i;?>" value="<?php echo 7*$software->weight;?>" required = "required"/> 
                <label for="seven-choice">7</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eight-choice-<?php echo $i;?>" value="<?php echo 8*$software->weight;?>" required = "required"/> 
                <label for="eight-choice">8</label>
              </label>

               <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="nine-choice-<?php echo $i;?>" value="<?php echo 9*$software->weight;?>" required = "required"/> 
                <label for="nine-choice">9</label>
              </label>

              <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="ten-choice-<?php echo $i;?>" value="<?php echo 10*$software->weight;?>" required = "required"/> 
                <label for="ten-choice">10</label>
              </label>

              <label class="radio-inline">
                <input type="radio" name="<?php echo $c_id.'_'.$i;?>" id="eleven-choice-<?php echo $i;?>" value="<?php echo 0*$software->weight;?>" required = "required"/> 
                <label for="eleven-choice">No Opinion</label>
              </label>
             <!-- <input type="hidden" name="currentID" value="<?php echo $c_id; ?>" />-->


    </div> <?php }?>
    <div class="bottum_btn">
    <div class="">

        <?php if($j > 1){?>
        <div class="back_btn">
            <a onclick="custom_back(<?php echo $j-1;?>)"><i class="fa fa-chevron-circle-left">Back</i> </a>
        </div>
        <?php
        }
        if($j == $catcount){?>
        <div class="next_btn">
        <input name="submit" type="submit" id="submit_btn" value="submit""><i class="fa fa-chevron-circle-right"></i></input>
        </div>
        <!--<a name="submit"  id="submit_btn" onClick="PopUp()">submit<i class="fa fa-chevron-circle-right"></i>
        </a>-->
    <?php } else
    {
        ?>
        <div class="next_btn">
        <a onclick="custom_next(<?php echo $j+1;?>)">Next<i class="fa fa-chevron-circle-right"></i> </a>
        </div><?php
    }?>
    </div>
</div>
    </div>

<?php }?>

Le script que j'essaye est comme ci-dessous.

function custom_next(val) {
        var val1 = "#page_" + val;
        var val2 = "#page_" + (val - 1);            
        var questions = jQuery(".question_one");
        var maindiv = jQuery(val2);

        if (jQuery(val2+':not(:has(:radio:checked))').length > 1) {
            console.log(jQuery(val2+':not(:has(:radio:checked))').length);
            alert("At least one group is blank");
        }else{
                console.log(jQuery(val2+':not(:has(:radio:checked))').length);
                jQuery(val1).removeClass("custom_hide");
                jQuery(val1).addClass("custom_show");
                jQuery(val2).removeClass("custom_show");
                jQuery(val2).addClass("custom_hide");
        }}

Mais ce script vérifie " si l'un des groupes de boutons radio est coché ou non " où je veux que tous les groupes de boutons radio soient vérifiés.

1
user4497122 7 mars 2016 à 11:40

4 réponses

Meilleure réponse

J'ai analysé votre code et j'ai développé ce code pour votre script. Ce script vérifie si l'une de vos options de question est cochée ou non.

function custom_next(val) {
        var val1 = "#page_" + val;
        var val2 = "#page_" + (val - 1);        
        var i = 0;
        var j = 0;
        jQuery('div.custom_show input[type=radio]').each(function(){                            
            var status = jQuery(this).is(':checked');
            //alert(status);
            i=i+1;
            if(status == true){
                j=j+1;
            }               
        });         
        i= i/11;
        if(i == j){
            jQuery(val1).removeClass("custom_hide");
                jQuery(val1).addClass("custom_show");
                jQuery(val2).removeClass("custom_show");
                jQuery(val2).addClass("custom_hide");
        }else{
            alert("All Questions are mandetory!!");
        }
}   
0
Keyur Patel 8 mars 2016 à 06:46

Trouvez d'abord tous les groupes de boutons radio dans votre formulaire

var radio_groups = [];
$("#radio-demo :radio").each(function(){
    radio_groups.push(this.name);
});

Maintenant, parcourez-les tous pour voir si aucun n'est sélectionné

var isAnyUnselected = radio_groups.filter( function(vallue){

  return $(":radio[name='"+group+"']:checked").length == 0

} ).length > 0;

Vérifier si isAnyUnselected est true (certains ne sont pas sélectionnés) ou false (tous sont sélectionnés)

0
gurvinder372 7 mars 2016 à 08:51

Mais ce script vérifie «si l'un des groupes de boutons radio est coché ou non» où je veux que tous les groupes de boutons radio soient vérifiés.

Ce que vous devez faire est de vérifier s'il y a au moins une case radio qui n'est pas cochée. Petit exemple:

<input class="ans" type="radio"/>
<input class="ans" type="radio"/>

if ($('.ans').not(':checked').length)
{
    console.log('At least one not checked, please check all');
}
else
{
    console.log('All checked');
}
0
Almis 7 mars 2016 à 08:52

Si vous ne voulez pas changer le html, vous pouvez utiliser le sélecteur jQuery("input[type='radio']:not(:checked)") si le .length de ce sélecteur est supérieur à 1, il y a des entrées à vérifier. Exemple simple ici dans les journaux de la console.

Sinon, vous pouvez utiliser l'attribut requis link1 link2 .

0
Jose Rocha 7 mars 2016 à 09:23