Q:

Form submission happening twice (using jQuery prompt)

My issue:
I have a button in a form that when pressed loads a prompt box, takes the input then assigns that input as the value to a form text box that is hidden and then submits the form. However this is submitting twice. The idea of this is using JavaScript prompt and inputting that as the reason they have to pause a job.
My code
Form:
<form action="" method="POST" id="pause_form">
    <input id="table-button-pause"  class="btn btn-warning" type="submit" name="pause_job" value="Pause Job">
    <input type="hidden" id="reason" class="form-control" name="note">
    <input type="hidden" id="note_user" value="<?php echo $_SESSION['staff_name']; ?>" class="form-control" name="note_user">
</form>

My script:
 $("#pause_form").submit(function(e){
    var status = prompt("Please specify a reason for pausing the job");
    if(status){
       $('#reason').val(status);
    } else if(status === null){
       e.preventDefault();
       location.reload();
    }
  });

Controller logic:
if(isset($_POST['pause_job'])){
  $this->jobs_model->pauseJob($_POST,$job_id);
}

Model/Function:
public function pauseJob($data,$job_id) {
    $data = $this->escapeArray($data);
    extract($data);
    $today = date('Y-m-d H:i:s');
    $sql = "INSERT INTO job_notes (job_id,note,note_date,note_user) VALUES ('$job_id','$note','$today','$note_user')";
    $this->query($sql);
}

(Please note I am aware about the pitfalls of extract and escaping strings instead of using bound params, this is old code and those issues will be addressed separately and I have tested and each variable is being passed through to the function fine).
The results:
In the database the query gets submitted twice (see below screen shot and excuse the poor redaction of staff names).
The data is all correct except the date time for the first (and I'm guessing incorrect submission).

Results I'm hoping to achieve:
Basically the function is working except it is submitting the query twice and the first submission is clearly incorrect as it does not have the datetime. What I want is one submission with the correct datetime like the second row in the picture. My leading guess is that the form is being submitted and my jQuery script is submitting it again, but as I'm new to jQuery I don't know. Plus if the datetime is defined in the function why is it not submitting that part correctly, surely if the function is loaded twice the date will always be there?

A:

Actually, it is not submitting twice. The form gets submitted in any case. Even if you use e.preventDefault(); or location.reload();.
This is your current example:

$(function() {
    $("#pause_form").submit(function(e){
        var status = prompt("Please specify a reason for pausing the job");
        if (status) {
            $('#reason').val(status);
            console.log('Form submitted properly.');
        } else if (status === null) {
            e.preventDefault();
            location.reload();
            console.log('Status is null but form submitted.');
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="pause_form">
    <input id="table-button-pause"  class="btn btn-warning" type="submit" name="pause_job" value="Pause Job">
    <input type="hidden" id="reason" class="form-control" name="note">
    <input type="hidden" id="note_user" value="" class="form-control" name="note_user">
</form>

To avoid this, you should use return statement.
$("#pause_form").submit(function(e) {
    var status = prompt("Please specify a reason for pausing the job");

    if (status) {
        $('#reason').val(status);
    } else if (status === null) {
        e.preventDefault();
        return;
    }
});

You may also simplify your code like so:
$("#pause_form").submit(function(e) {
    let status = prompt("Please specify a reason for pausing the job.");

    if (!status) {
        e.preventDefault();
        return;
    }

    $('#reason').val(status);
});

