javascript - jquery 在点击提交时获取答案(从数据库获取数据)

Question

你好，我这里有一段代码，它从数据库中获取数据(问题和选项)。我需要的帮助是我想通过单击“提交”按钮获得所有答案

    <?php
$res = $conn->query("select * from questions where category_id='$category' ORDER BY RAND()") ;
$rows = mysqli_num_rows($res);
$i=1;
while($result=mysqli_fetch_array($res)){?>

    <?php if($i==1){?>        
    <div id='question<?php echo $i;?>' class='cont'>
        <p class='questions' id="qname<?php echo $i;?>"> <?php echo $i?>.<?php echo $result['question_name'];?></p>
        <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
        <br/>
        <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
        <br/>
        <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
        <br/>
        <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
        <br/>
        <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                     
        <br/>
        <button id='next<?php echo $i;?>' class='next btn btn-success' type='button'>Next</button>
    </div>    

    <?php }elseif($i<1 || $i<$rows){?>
    <div id='question<?php echo $i;?>' class='cont'>
        <p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
        <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
        <br/>
        <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
        <br/>
        <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
        <br/>
        <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
        <br/>
        <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                     
        <br/>
        <button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>       
        <button id='next<?php echo $i;?>' class='next btn btn-success' type='button' >Next</button>
    </div>

    <?php }elseif($i==$rows){?>
    <div id='question<?php echo $i;?>' class='cont'>
        <p class='questions' id="qname<?php echo $i;?>"><?php echo $i?>.<?php echo $result['question_name'];?></p>
        <input type="radio" value="1" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer1'];?>
        <br/>
        <input type="radio" value="2" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer2'];?>
        <br/>
        <input type="radio" value="3" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer3'];?>
        <br/>
        <input type="radio" value="4" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/><?php echo $result['answer4'];?>
        <br/>
        <input type="radio" checked='checked' style='display:none' value="5" id='radio1_<?php echo $result['id'];?>' name='<?php echo $result['id'];?>'/>                     
        <br/>
        <button id='pre<?php echo $i;?>' class='previous btn btn-success' type='button'>Previous</button>       
        <button id='next<?php echo $i;?>' class='next btn btn-success submit' type='submit'>Finish</button>
        </div>
    <?php 

    } 
$i++;
} ?>

</form>

请指导我一个jquery代码，它可以在提交时获取所有答案。 这是我在下面尝试过的

  $(document).on('click','.submit',function(){
 var answer = [];
$. each($(this.checked), function(){
 answers. push($(this). val());
 });
 alert("your answers are: " + answers. join(", "));

Answer 1

试试这个:

$('form').on('submit',function(){
    var answer = [];
    $(this).find('input[type="radio"]:checked').each(function(){
        answers.push($(this).val());
    });
    alert("your answers are: " + answers.join(", "));

    //return false to prevent submission
});

这部分

  $(this.checked)

毫无意义，在此上下文中的 this 是 .submit 按钮。所以这并没有告诉我们如何找到复选框/单选按钮。

在任何情况下，在 jQuery 中我们都可以使用 :checked 作为复选框/单选按钮，这样你就可以执行上面的操作或 if($(foo).is(':checked')) 例如。

相反，我们应该使用表单的提交操作作为事件，因为 this 是包含复选框/单选按钮的表单。这样就更容易找到它们。您可以使用按钮单击事件，但是您需要执行以下操作:

 //instead of $(this).find('input[type="radio"]:checked').each( ... )
 $('.submit').click(function(){
        $(this).closest('form').find('input[type="radio"]:checked').each( ... );

        //...
 });

因为 $(this) 将是按钮，所以我们必须获取父表单，然后获取复选框/单选按钮。