Why the form submitted using AJAX is redirecting to next page and the error/success messages are not displayed into alert on the same page?

Question

I'm using PHP, Smarty, jQuery, AJAX, etc. for my website.Following is HTML code of my form which I'm submitting using AJAX:

<form name="question_issue_form" id="question_issue_form" action="http://localhost/xyz/pqr/web/control/modules/questions/question_issue.php">
      <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
      <input type="hidden" name="op" id="op" value="question_issue"/>
      <input type="hidden" name="question_id" id="question_id" value="35718"/>

      <table class="trnsction_details" width="100%" cellpadding="5">
        <tbody>    
          <tr>
            <td></td>
            <td>
              <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>                
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
          </tr>
          <tr>
            <td></td>
            <td class="set_message" style="display:none;"><textarea name="que_issue_comment" id = "que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
          </tr>
        </tbody>
      </table>
    </form>

The AJAX code for submitting the form is as follows:

$(document).ready(function() {
$('#question_issue_form').submit(function() {
var ans = confirm("Are you sure to report the question issue?");
    if (!ans) { 
      return false;
    }
var post_url = $(this).attr('action');
$.ajax({
        type: "POST",
        url: post_url,
        data: $('#question_issue_form').serialize(),
        dataType: 'json',
        success: function(data) { alert(data);
          var error = data.error_message;
          if(error)
            alert(error);
          else {
            alert("Question issue has been reported successfully.");
            $.colorbox.close();
          }
        }
      });
    });
  });

The PHP code of a file(question_issue.php) where I'm submitting this form is as follows:

<?php 
  require_once("../../includes/application-header.php");

  $objQuestionIssue = new QuestionIssue(); 

  prepare_request();
  $request = $_POST ;
$user_type = $_SESSION[SESSION_NAME_CONTROL][STAFF_TYPE];

  if($user_type == 'super_admin' || $user_type == 'admin' || $user_type == 'data_entry_operator' || $user_type == 'owner' || $user_type == 'faculty' || $user_type == 'content_development_head' || $user_type == 'test_admin' || $user_type == 'student_admin')
    $requested_user_type = 'staff';
  else       
    $requested_user_type = 'student';

    $form_data = array();
    $form_data['question_id']        = $request['question_id'];
    $form_data['reported_site_id']   = SITE_ID;
    $form_data['reported_user_type'] = $requested_user_type;
    $form_data['reported_user_id']   = $_SESSION[SESSION_NAME_CONTROL][STAFF_ID];
    $form_data['que_issue']          = implode(",", $request['que_issue']);
    $form_data['que_issue_comment']  = $request['que_issue_comment'];
    $form_data['que_issue_date']     = time();
switch( $op ) { 
        case "question_issue":
          if($request['form_submitted']=='yes') {
                $ret = $objQuestionIssue->InsertQuetionIssue($form_data, $question_issue_error_messages);
                /*If condition : If there are any errors in submission of a report question form*/
                if(!$ret) {
                    $error_msg  = $objQuestionIssue->GetAllErrors();
                    $data = array();
                    $data['error_message'] = $error_msg['error_msgs'];
                    $data = json_encode($data);
                    echo $data;
                    die;
                /*Else condition : If there is no error in submission of a report question form*/   
                } else {
                    $data = array();
                    $data['success_message'] = "success";
                    $data = json_encode($data);
                    echo $data;
                    die;
                }
            } else {
                  $smarty->assign('question_id', $request['question_id']);
                  $file_to_show = 'question-issue.tpl';
                }           
                $smarty->display($file_to_show);
            break;  
            die;
  }  
?>

The issue I'm facing is when I click on Ok button of confirmation alert, the form gets submit but the error messages or success messages in json format are appearing on a blank screen.

Actually they should be appeared in a pop-up alert and page should not get redirected to other URL. But the error/success messages are printing on a blank white page and page is also redirected to the question_issue.php. Can someone please help me in avoiding these things and showing the error/success messages into an alert box on the same page?

Answer 1

I think you should prevent default behavior of the form, so it won't really submit but only ask for json:

$('#question_issue_form').submit(function(e) {
    e.preventDefault();
    // your code