Question

我已动态生成导航丸。它们中的每一个都包含一个表单，用户可以通过选中单选按钮来回答问题。我使用jquery提交表单，因此它不会刷新页面。现在的问题是，只有第一个药丸提交而没有刷新页面，其他药丸在提交时刷新页面。我将如何修改下面的代码，以便所有的nav-pills都能在不刷新页面的情况下提交。我的代码如下所示。

HTML

<!--The first pill is always displayed by default-->
if($i == '1'){
    $tab_menu .= "
    <li class='active'><a href='#$test_id' data-toggle='tab'>$i </a></li>
    ";

    $tab_content .= " <div id='$test_id' class='tab-pane fade in active'>
    ";
}
<!--Other nav-pills display when clicked-->
else{
    $tab_menu .= "
    <li><a href='#$test_id' data-toggle='tab'>$i </a></li>
    ";
    $tab_content .= " <div id='$test_id' class='tab-pane fade'>";
}

FORM

$tab_content .= 

"<form id='radioForm' action='radio_no_refresh.php' method='post'>

     <h4>Question No $i</h4>
     <input type='text' name='quest1' value='$question' hidden>
     A <input type='radio' name='radio' value='A'>$option_a
     B <input type='radio' name='radio' value='B'>$option_b
     C <input type='radio' name='radio' value='C'>$option_c
     D <input type='radio' name='radio' value='D'>$option_c

     <button id='subm' name='enter' style='float:right' class='btn btn-success' ><b>Save & Next</b></button>

</form>  ";

Jquery的

$("#subm").click( function() {
$.post( $("#radioForm").attr("action"), $("#radioForm").serialize(), function(info){ $("#result").html(info); } );
clearInput();
});

$("#radioForm").submit( function() {
    return false;
});

function clearInput() {

$("#radioForm")[0].reset(); 
}

PHP

$questn1 = $_POST['quest1'];
$radio_ans1 = $_POST['radio'];

$query = "insert into answers (question,answer,) values ('$questn1','$radio_ans1')";
$run_query = mysqli_query($con, $query);
if($run_query){
echo "<script>alert('Answer inserted)</script>";
}
else{
    echo "Insertion Failed";
}

只有第一个nav-pill按钮提交表单而没有刷新页面

0 个答案: