JSON post data from HTMLto PHP and alert the user is the process is successful or not

Question

Case
I create a new registration form and save it into database.The save process was succeed but I want to add some user interaction like when the data is successfully saved, the system notify user by toastr.I have create the code but it is not working.Please help.Below is the code.

Javascript and HTML

//toast a message upon successful registration
$(document).on('click', '.submit_button', function(e) {
  console.log("submit button clicked");
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: $("#regtenantform").attr('action'),
        data: $("#regtenantform").serialize(),
        success: function(response) {
             if (response === "Success") {
              $.toast({
            heading: 'Welcome to my Elite admin',
            text: 'Use the predefined ones, or specify a custom position object.',
            position: 'top-right',
            loaderBg:'#ff6849',
            icon: 'success',
            hideAfter: 3500, 
            stack: 6
          });
                  window.reload;
             } else {
                   alert("invalid username/password.  Please try again");
             }
        }
    });
});

<form id="regtenantform" name="regtenantform" class="form-material form-horizontal" method="post" action="../controllers/tenantcontroller.php" onsubmit="return ray.ajax()">
      <div class="form-group">
        <label class="col-md-12">Fullname <span class="help"> e.g. "Azizul"</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="Fullname" id="name" name="name" required="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-12" for="example-email">Identification Number <span class="help"> e.g. "860102075555" (without "-" or space)</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="Id Number" id="ic" name="ic" required="">
        </div>
      </div>
      <div class="form-group">
        <label class="col-md-12">Phone Number <span class="help"> e.g. "0123456789"</span></label>
        <div class="col-md-12">
          <input type="text" class="form-control form-control-line" placeholder="No." id="contact" name="contact" required="">
        </div>
      </div>
          
      <div class="form-group m-b-0">
          <div class="col-sm-offset-3 col-sm-9 text-right">
            <button type="button" class="btn btn-inverse waves-effect waves-light m-r-10" id="reset" name="reset">Reset</button>
            <button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
          </div>
      </div>

    </form>

You need to provide your PHP script as well, we cannot see what your response would be. If you are returning JSON for example, you'd need to use the http://api.jquery.com/jquery.getjson/ as this will parse the response correctly. If you are returning just a string, it could be whitespace that is causing your if statement to fail. Try using .trim(); — R. Chappell, Aug 23 '16 at 15:44
For starters you should listen for the `
`'s native submit handler rather than the click of the submit button. [**See my previous answer for details.**](http://stackoverflow.com/a/20150474/2191572) — MonkeyZeus, Aug 23 '16 at 15:45
just console.log() whats the response on success. You will see it won't be "Success" but most like some kind of object. — Danmoreng, Aug 23 '16 at 15:46
@user2415266 i try to console but nothing happen, that mean it dont run my json code — mior farhan, Aug 23 '16 at 15:52
@R.Chappell i just provide my php code just a simple as that — mior farhan, Aug 23 '16 at 15:52
@RiggsFolly thanks for the link, but now im looking why the json code wont run. — mior farhan, Aug 23 '16 at 15:54
Then check the network traffic and what the server actually responds on your request: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_details — Danmoreng, Aug 23 '16 at 15:55

score 1 · Answer 1 · answered Aug 23 '16 at 15:54

1

Here:

$(document).on('click', '.submit_button', function(e) {
                         ^---CSS class


<button type="submit" class="btn btn-info waves-effect waves-light" id="submit_button" name="submit_button">Save</button>
                             ^^----nowhere do you have a "submit_button" class

You have an ID of submit_button, so your click handler should be looking for #submit_button, not .submit_button

answered Aug 23 '16 at 15:54

Marc B

356,200
43
426
500

1

exactly HOW could it be called? you told jquery to attach the click handler to something that doesn't exist. How can you click on something that doesn't exist, or react to an event on something that doesn't exist? "let me just wait around for Elvis to swing by for a visit... gee, why am I still waiting?" – Marc B Aug 23 '16 at 15:57
thanks for noticing me @MarcB I just give the wrong function to be called – mior farhan Aug 23 '16 at 16:52

JSON post data from HTMLto PHP and alert the user is the process is successful or not

1 Answers1