如果没有答案,如何防止提交表格的最后一个问题

时间:2015-04-26 07:35:45

标签: jquery forms validation submit

我有一个问题调查表。首先,我隐藏所有问题,然后使用按钮Next一个接一个地显示。我已经进行了验证,但它只能用于最后一个问题,但它不起作用。如果有人没有启用JavaScript,我还提供了Php验证。现在当你没有为最后一个问题选择答案时,它不会提交表格,但它会返回第一个调查问题,你必须再次选择它们。那是我的问题 - 如何验证最后的问题?这是我的代码:

$(function () {
    $( document ).ready(hideAllRows);
    $( document ).ready(showFirst);
    $('#button').hide();
});

function hideAllRows(){
    $('#questionsTable tr').each(function() {
        $(this).hide();
    });
}

$(function () {
    $("#next").click(showNextQuestion);
});

var currentInd = 1;
var prevInd = 1;
function showNextQuestion(){
    $(function () {
        var indId = "#"+currentInd;
        prevInd = currentInd - 1;
        var prevId = "#"+prevInd;

        //validation
        var isAnyClicked = false;​
        if ($(prevId + " input[type='radio']:checked").val()) {
            isAnyClicked = true;
        }

        if(currentInd > 0 && currentInd  != $('#questions_count').val() && isAnyClicked == false) {
            alert('Моля, отговорете!');
        }

        else {
            //hide previous question
            $(prevId).hide();

            //show next question 
            var indId = "#"+currentInd;
            $(indId).show();
            currentInd++;
            if(currentInd  == $('#questions_count').val()) {
                $('#button').show();
                $("#next").hide();
            }
        }
    });
}

function showFirst(){
    $(function () {
        $('#0').each(function() {
            $(this).show();
        });
    });
}

<?php

$att=array('id'=>'form');
echo form_open('index/survey_fill/' .$survey_id .'/'. $question_id , $att); ?>
<input type='hidden' name='questions_count' id='questions_count' value='<?php echo count($question); ?>' />
<table id='questionsTable' >
  <thead>
    <tr><th>Question</th></tr>
  </thead>   
  <tbody>
  <?php
    echo validation_errors();​
 $index = 0;
    foreach ($question as $row)
    {
        echo "<tr id='$index'>";
        $index++;
    ?>

        <td> 
        <?php echo "$row->question"; ?><br/>
        <?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
        <?php 

        $data=array(
            'name' =>  'answer['.$row->question_id.']',
            'value' => '5',
            'class' => 'answer'

        );

        echo "<input type='hidden' name='survey_id' value='$row->survey_id'>"; 

        echo form_radio($data); 
        echo " 5 ";
        $data=array(
            'name' =>  'answer['.$row->question_id.']',
            'value' => '4',
            'class' => 'answer'
        );
        echo form_radio($data);​
         echo "4";
</td></tr>

    <?php 
    }

?>      

</table>
 <?php echo "<input type='hidden' name='question_id' value='$row->question_id' />"; ?>
  <?php  echo '<input type="submit" id="button" name = "submit" value="Submit" class="btn btn-success">';
  ?>
<input type="button" id="next" name = "next" value="Next" class="btn btn-success">
</form>
</div>

</body>​

我试过这个:

$(document).ready(function() {
    var currentInd=1;      
    $('form').on('submit', function(e){
        isAnyClicked = false;

        if (currentInd  = $('#questions_count').val() &&
                ($(currentInd + " input[type='radio']:checked").val())) {
             isAnyClicked = true;
             $(currentInd ).hide();
             alert(" answer selected");
        } if (currentInd  = $('#questions_count').val() && isAnyClicked == false)  {    
            $('tr' + currentInd).css({ display: 'block' });

             e.preventDefault();
             alert("select answer");
             currentInd++;
         } 
    });
});​

它阻止表单提交,但即使我选择了答案,表单也不提交。如果你选择了答案,那么如何制作第一个条件?它始终运行第二个条件,表单不提交。谢谢!

1 个答案:

答案 0 :(得分:0)

您可以使用以下代码阻止表单提交:

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!AllFieldsAreValid) {
      e.preventDefault();
    }
  });
});

当所有字段都正确填充时,您可以将AllFieldsAreValid定义为True或False。