通过AJAX和PHP提交表单

Question

Scenario:

On clicking Submit Button, the alert box having following message is displayed:

You won't be able to make any changes after submitting the form. Do you want to submit?

And when the user presses OK then the following message should be displayed:

Submitted

Here is my attempt:

This is the part of the Form :

Note : I am not showing the whole data of the form to be submitted as it will take space.I am only showing the main part of the form submit button.

<div id="container">

    <form action="<?php echo site_url('main/save_appraisal');?>"  
        method="post" id="appraisalForm" name="appraisalForm">

    <?php if($appr_status < '2'){?>
    <input type="button" name="submit" id="submitAppraisal" 
    value="Submit" /> 

    <?php }?>

<form>
</div>

This is the part of my controller :

public function submitAppraisal(){
        $emp_id = $this->input->post('empid');
        echo $this->appraisal_model->setAppraisalStatus($emp_id);
        echo 'Submitted';
} 

This is the part of my Model :

function setAppraisalStatus($employee_id=''){
if($employee_id == ''){
            return;
        }

        $login =  $this->session->userdata('username');     
        $loginid = $this->get_empid_exuname($login);

       $sql = "INSERT INTO appraisal_status 
 (id,employee_id,status,updated_on,updated_by)
 VALUES(seq_appraisal_status.nextval,$employee_id,$status,sysdate,'$login')";       
 $query = $this->db->query ( $sql );
}

Here is the part of the Form :

    <script>
<script type="text/javascript">
$(function () {

   $( "#submitAppraisal" ).click(function() {        
        submitAppraisal();
    }); 
});


function submitAppraisal(){

    <?php if($this->session->userdata('userid') == $supervisor){?>
    var valid = 0;
    $( '.suvinput' ).each(function() {
        var vals = $(this).val();
        $(this).css('border-color','#ccc');
        if(vals == ''){         
            $(this).css('border-color','#f00');
            valid++;
        }

    }); 

    var confirmSubmit = confirm("You won't be able to make any 
    changes after submitting the form. Do you want to submit? ");
        if(confirmSubmit == false){ 
            return;
        }

        var params = $('form#appraisalForm').serialize()+ '&submit=Save';
        console.log(params);
        $.ajax({
              url: '<?php echo site_url('main/submitAppraisal');?>',
              type: 'post',
              data: params,
              success: function(data) {
              },
              error: function(err) {
              }
            });
    }
    </script>

Here is my database table named appraisal_status :

ID   |   Employee_ID  | Status

Current Output:

When the user presses the Submit Button then following question is being asked:

You won't be able to make any changes after submitting the form. Do
you want to submit?

When the user presses Yes then the form should be submitted and the record should be inserted in the database but neither the form is being submitted nor the message is being displayed.

Expected Output:

After the user presses Submit button then the following message is being displayed which is fine.

You won't be able to make any changes after submitting the form. Do you want to submit?

And when the user presses OK button then the following message should be displayed:

Submitted

I am not being able to figure out where I went wrong?

What correction should be done? Suggestions are highly appreciated.

Answer 1

The entire point of Ajax is to pass the response to JavaScript instead of simply displaying it.

This is your success function:

      success: function(data) {
      },

It accepts the response into the variable data and then does nothing with it.

You are ignoring the output of your PHP program.

If you want to display the output, then you need to write code to display it.