通过AJAX通过PHP发送表单，而无需刷新页面

Question

So I have this code to POST data with PHP and AJAX without redirecting page, I'm using the same script on the login page. The login page works like a charm but the other pages don't. The only diffeence between these is that login php script page uses if (empty($_POST) === false) {} and the other pages use if (isset($_POST['save-settings'])) {} . I don't know what do to.. Here below is the script I'm using.

HTML BUTTON

<input id="save-settings" class="submit" type="submit" name="save-settings" value="Save" onclick="return false;" />

JS SCRIPT

$(document).ready(function() {
        $("#save-settings").click(function() {
            var name        = $("#webname").val();
            var charset     = $("#webchar").val();
            var meta        = $("#webmeta").val();
            var description = $("#webdesc").val();
            var startsite   = $("#webstartsite").val();
            var starturl    = $("#webstartsiteurl").val();
            var footer      = $("#webfooter").val();

            $.post("../lib/action.php", {
                name: name,
                charset: charset,
                meta: meta,
                description: description,
                startsite: startsite,
                starturl: starturl,
                footer: footer
            }, function(data) {
                $("#gy-main-notification-bar").hide().html("<h1>!</h1><h2>" + data + "</h2>").slideDown(500);
                setTimeout(function() { $("#gy-main-notification-bar").slideUp(500) }, 2500);
            });
        });
    });

PHP SCRIPT

if(isset($_POST['save-settings'])) {
    $updatesettings = "UPDATE `settings` SET
    `name`='".escape($_POST['webname'])."',
    `charset`='".escape($_POST['webchar'])."',
    `meta`='".escape($_POST['webmeta'])."',
    `description`='".escape($_POST['webdesc'])."',
    `startsite`='".escape($_POST['webstartsite'])."',
    `starturl`='".escape($_POST['webstartsiteurl'])."',
    `footer`='".escape($_POST['webfooter'])."'
     WHERE `id`= 1";

     if ($update_settings = $db_connect->query($updatesettings)) {}
     echo 'Success!';
 }

I don't really want to change the isset to empty in the script due the fact that I have all my "onclick" script in one action.php file. When I remove onclick="return:false;" from input it works.. I'm so confused I appriciate any help!

Answer 1

Click event handler function can have event argument. When you catch this argument you can use preventDefault() method. With this method default action of click will be prevented and page won't be refreshed.

Change

$("#save-settings").click(function() {
        var name        = $("#webname").val();

to

$("#save-settings").click(function(ev) {
        ev.preventDefault();
        var name        = $("#webname").val();

Answer 2

You Forgot to include the post save-settings. You probably should've included it with the ajax post like this:

$.post("../lib/action.php", {
            'name': name,
            'charset': charset,
            'meta': meta,
            'save-settings': true,
            'description': description,
            'startsite': startsite,
            'starturl': starturl,
            'footer': footer
        },

change this in your sql statement for the correct posts

 `name`='".escape($_POST['name'])."',
`charset`='".escape($_POST['charset'])."',
`meta`='".escape($_POST['meta'])."',
`description`='".escape($_POST['description'])."',
`startsite`='".escape($_POST['startsite'])."',
`starturl`='".escape($_POST['starturl'])."',
`footer`='".escape($_POST['footer'])."'
 WHERE `id`= 1";

Answer 3

writing onclick="return false" in HTML cancels the execution of the javascript code. just delete this onclick="..." and add preventDefault() like this to prevent form submittion

$("#save-settings").click(function(e) {
   e.preventDefault();
   .....