Html form submit without redirection, can't get AJAX to work

Question

I'm trying to get my html form to submit without refreshing the page, using AJAX, but I can't get it to work. This is my form:

<div id="form">
<form onSubmit="return checkdate(this.datum)" method="post" name="kal_event" id="kal_event" action="add_event.php" >

<fieldset>
    <legend><b><font face="georgia, garamond" size="5" color="#303030">Add event</font></b></legend><br>
    <table>
        <tr>
            <td><label for="header"><b><font face="georgia, garamond" color="#303030">Header:</font></b></label>
            <input type="text" name="header" id="header" class="input" required /><br></td>
            <td><label for="date"><b><font face="georgia, garamond" color="#303030">Date:</font></b></label>
            <input type="text" name="date" id="date" class="input" required /><br></td>
        </tr>
        <tr>
            <td><label for="location"><b><font face="georgia, garamond" color="#303030">Location:</font></b></label>
            <input type="text" name="location" id="location" class="input" required /><br></td>
            <td><label for="time"><b><font face="georgia, garamond" color="#303030">Time:</font></b></label>
            <input type="time" onchange="checktime(this);" name="time" id="time" class="input" required /><br></td>
        </tr>
        <tr>
            <td valign="top"><label for="foodBox"><b><font face="georgia, garamond" color="#303030">Food?</font></b></label>
            <input type="text" name="foodText" id="foodText" class="input" disabled required />  <input type="checkbox" name="foodBox" id="foodBox" /><br>
            <label for="bringBox"><b><font face="georgia, garamond" color="#303030">Good to bring:</font></b></label>
            <input type="text" name="bringText" id="bringText" class="input" disabled required/>  <input type="checkbox" name="bringBox" id="bringBox"/><br></td>
            <td><label for="description"><b><font face="georgia, garamond" color="#303030">Description:</font></b></label>
            <textarea name="description" id="description" class="input" rows="5" cols="25" required></textarea><br></td>
        </tr>
        <tr>

        </tr>
    </table>
</fieldset><br>
<input type="submit" value="Add!" class="button"/>
</form></div>

And this is my AJAX for submission:

$(document).ready( function () {
    $('kal_event').submit( function () {
        var formdata = $(this).serialize();
        $.ajax({
            type: "POST",
            url: $(this).attr("action"),
            data: formdata,
            success: function() {
                $('#form').html("<div id='message'></div>");
                $('#message').html("<h2>Thanks for adding an event!</h2>")
                .append("<p>We will see you at the event.</p>")
                .hide()
                .fadeIn(1500, function() {
                    $('#message').append("<img id='checkmark' src='onwebmedia/message-512.png' />");
                });
            }
        });
        return false;
    });
});

And this is my add_event.php:

<?php
include_once "db_connect.php";

session_start();

header('Content-type: text/html; charset=utf-8');
ini_set('default_charset', 'UTF-8');

if (isset($_SESSION['login']) && $_SESSION['login'] != ''){
    $header = $_POST['header'];
    $location = $_POST['location'];
    $time = $_POST['time'];
    $date = $_POST['date'];
    $food = $_POST['foodText'];
    $bring = $_POST['bringText'];
    $description = $_POST['description'];

    if($mysqli = connect_db()){
        $sql = 'INSERT INTO `calendar' . $_SESSION['customer'] . '`(`header`, `location`, `date`, `time`, `food`, `bring`, `description`) VALUES ("'. $header .'","'. $location.'","'. $date .'","'. $time . '","'. $food .'","'.  $bring .'","'. $description .'")';
        $result = $mysqli->query($sql);
    }
    echo $result;
}
?>

I keep getting redirected to add_event.php. Please help me!

write `$('#kal_event')` instead of `$('kal_event')`. `$('kal_event')` is trying to find `` on your page — Ejaz, May 07 '14 at 21:15
also why are you using `onSubmit="return checkdate(this.datum)"` when you're handling submit event using jQuery. you should call checkdate with appropriate argument inside your submit event handler — Ejaz, May 07 '14 at 21:17
You are vulnerable to [SQL injection attacks](http://bobby-tables.com), and are simply assuming your insert query is succeeding. — Marc B, May 07 '14 at 21:20

score 0 · Accepted Answer · edited May 23 '17 at 12:20

Add an event handler to your submit function and change the selector to be that of the form's id -

$('#kal_event').submit( function (event) { // changed selector to id here
    event.preventDefault();
    // rest of your AJAX code

The reason that your page redirects is because you are not properly targeting the form in the submit selector. Since that selection as you originally wrote it is ambiguous the redirect occurs. By correcting the selector, in this case using the id of the form, the problem is fixed.

To learn more about return false and its parts the following post makes a good read - event.preventDefault() vs. return false

Html form submit without redirection, can't get AJAX to work

1 Answers1