ci_lover ci_lover - 3 months ago 8
jQuery Question

How to prevent submit last questionof a form if there is no answer

I have a form of a survey with questions. First I hide all questions and I show one after another with button Next. I've made validation and it works but only for the last question it is not working. I've provided also Php validation if someone doesn't have JavaScript enabled. Now when you have not chosen an answer for the last question,it does not submit form, but it returns to the first question of survey and you have to choose them again. That's my problem - how to validate last quesion? Here's my code:

$(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>​


I tried with this:

$(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++;
}
});
});​


It prevents form submit, but even I have selected answer, form does not submit. How to make first condition if you have chosen answer, form to subit? It always run second condition and form does not submit. Thanks!

Answer

You can prevent form to be submitted with following code:

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

You can define AllFieldsAreValid as True or False when all fields are filled correctly or not.

Comments