1

Just in case! Possible duplicates:

PHP-Jquery-AJAX, show popup message
Form submission PHP ajax
Form submission PHP ajax
Show a success message after PHP form submission using AJAX
jquery popup after form submission
How to show a success message after PHP form submission?
PHP Ajax Form Submission

I am trying to show a "notification popup box" after successful form submission to DB.

I tested it with alert(); and its working fine, but the issue is the auto redirect.

HTML form:

<form action="form-process" id="reportsForm" method="POST"></form>

routes.php:

//Reports pages
get('/all-reports', '/pages/reports/all-reports.php');
get('/add-new-report', '/pages/reports/add-new-report.php');

//Reports form subbmision
post('/form-process', '/backend/form-process.php');

Ajax:

$(document).ready(function() {
    $("#reportsForm").submit(function() {
        var cccEmployee = $("#ccc_employee").val();
        var irNumber = $("#IR_number").val();
        var caseType = $("#case_type").val();
        var caseLocation = $("#caseLocation").val();
        var startDateTime = $("#startDate").val();
        var endDateTime = $("#endDate").val();
        var caseDesc = $("#case_description").val();
        var actionsTaken = $("#action_taken").val();
        var caseDetails = $("#details").val();
        var caseNotes = $("#notes").val();
        var caseRecommendation = $("#recommendation").val();
        $.ajax({
            type: "POST",
            url: "./backend/form-process.php",
            success: function() {
                alert("sucess");
            }
        });
    });
});

I tried to redirect using window.location & headers() then the code fails. I am using PHP routing library and because of it somehow it's ruining my Ajax request?

Abdulrahman Mushref
  • 1,012
  • 2
  • 18
  • 40
  • **the issue is the auto redirect** Do you mean (1) you cannot show the popup after ajax return ? or (2) you want to get redirected after popup display but failed ? – Ken Lee Nov 18 '21 at 01:04
  • @KenLee when "submit" is clicked, it shows the alert THEN redirects to white page after clicking "OK". I want to show the alert and stay in the form page. – Abdulrahman Mushref Nov 18 '21 at 01:07

1 Answers1

2

Try stop default handle of form ( use attribute action as process URL ) with preventDefault

$("#reportsForm").submit(function(e) {
    e.preventDefault(); // add this
    var cccEmployee = $("#ccc_employee").val();
    ....
Mòe
  • 269
  • 2
  • 7
  • OK it's not redirecting and showing the alert, good. But the data is not saved to DB... – Abdulrahman Mushref Nov 18 '21 at 02:35
  • I saw you just sent post request to URL without data. Append it and tell me about result. – Mòe Nov 18 '21 at 02:40
  • @Mòe u need to send data to the php file do some survey on how to send data in ajax, `data: this.serialize(),` something like this. – Mohammed Khurram Nov 18 '21 at 07:50
  • I kept trying to use "data:" in every way I found in my search...doesn't work yet.. – Abdulrahman Mushref Nov 18 '21 at 19:35
  • Yeah I give up...I tried everything I could...here is where I stopped: https://imgur.com/IHRBtvh – Abdulrahman Mushref Nov 18 '21 at 21:00
  • Be patient, my friend. You almost get result. Just find a way to debug. First, did you send a right format, right url, and correct variable ?, use chrome debug ( or other browsers) to detect . On server, just var_dump all posted variable, check it, process and return result. Debug step by step. ( Some change maybe have effect : type of ajax must be uppercase, set contentType to json ...). Good luck – Mòe Nov 19 '21 at 02:09