CODEWITHSUNDEEP
javascriptphphtmlajaxmysqli
Montague
Montague

Reputation: 82

Sending form with PHP through AJAX with no page refresh

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!

Upvotes: 0

Views: 112

Answers (3)

Sjoerd de Wit
Sjoerd de Wit

Reputation: 2413

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";

Upvotes: 0

webNeat
webNeat

Reputation: 2828

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();
   .....

Upvotes: 0

Robert
Robert

Reputation: 20286

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();

Upvotes: 1

Related Questions