jQuery - отправить форму, добавить в таблицу БД, вернуть успех.

Question

Как следует из заголовка, я хочу, чтобы форма отправлялась по почте во внешний php-файл, добавляла данные в базу данных и затем выводила сообщение об успешном завершении.

Насколько я понимаю, когда я нажимаю на кнопку отправить в форме, страница обновляется, но в базу данных ничего не добавляется.Я не получаю никаких сообщений.

Вот мой код:

jQuery:

  $(document).ready(function(){
            $("form#submit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var value = $("#dropdown").val();

    $.ajax({
        type: "POST",
        url: "add_to_shelf.php",
        data: "shelf="+ value +"&bookID="+ $_GET['id'],
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });
return false;
});
    });

HTML:

<form id="add_to_shelf_form" method="POST">
                    <select name="shelves" id="shelves">
                            <option value="1">Read</option>
                            <option value="2">Currently reading</option>
                            <option value="3">Want to read</option>
                     </select>  
                     <input type="submit" id="shelf_button" value="Submit" />
                     <p class="success">Shelf was successfully updated!</p>
            </form>

add_to_shelf.php:

include "base.php"; 
    include "session.php";

// SHELF INFORMATION
    $bookID = $_POST['bookID'];
$shelfID = $_POST['value']; 
    $userID = $_SESSION['user_id'];

$add_to_shelf  = "INSERT INTO books_on_shelves (bookID,shelfID,userID) VALUES ('$bookID','$shelfID','$userID')";
mysql_query($add_to_shelf) or die(mysql_error());

Answer 1

Ваш выбор, чтобы поймать, является неправильным.id вашей формы в соответствии с отправленным вами HTML-кодом - add_to_shelf_form, а не submit, который вы используете в своем селекторе form#submit.

Попробуйте вместо этого:

$("#add_to_shelf_form").submit(...

Обновление

Причина, по которой он не работал на скрипке, заключалась в том, что в 101 *данные, которые сломали JS.Я также добавил данные в виде объекта вместо переменной, я считаю, что они намного более читабельны.

Я обновил вашу скрипку, чтобы она работала: http://jsfiddle.net/hYrrV/4/

На вашей странице вам нужно изменить объект данных со статического bookId на динамический, сгенерированный PHP:

data: { shelf: value, bookID: <?php echo $_GET['id']; ?> }

Итак, ваш окончательный код будет:

$(document).ready(function(){
    $("form#submit").submit(function() {
    // we want to store the values from the form input box, then send via ajax below
    var value = $("#dropdown").val();

    $.ajax({
        type: "POST",
        url: "add_to_shelf.php",
        data: { shelf: value, bookID: <?php echo $_GET['id']; ?> },
        success: function(){
            $('form#submit').hide(function(){$('div.success').fadeIn();});

        }
    });

    return false;
    });
});

Answer 2

Обновление страницы может быть вызвано тем, что событие не запускается.Возвращаемое значение false должно позаботиться об этом.

Во-первых, я бы изменил $("form#submit").submit на $("#add_to_shelf_form").submit Это должно по крайней мере запустить событие.

Кроме того, вы определенно собираетесьхочу избежать этого ввода.Не вставляйте предоставленные пользователем данные в вашу базу данных raw.В php измените это:

$bookID = $_POST['bookID'];

на:

$bookID = mysql_real_escape_string($_POST['bookID']);

Answer 3

1001 * попробовать *

var value = $ ("опция раскрывающегося списка: выбрано"). Val ();

вместо

var value = $ ("# dropdown"). Val ();

потому что вы используете поле выбора. и еще одна вещь попытаться получить значение данных этим

data: dataString,

и перед этим убедитесь, что значение dataString выглядит примерно так

var dataString = 'shelves =' + shelves;

Answer 4

изменить $("form#submit").submit(function() { на $("form").submit(function() {

Answer 5

Ваша ошибка в том, что вы добавили метод к кнопке отправки с идентификатором «submit», а в вашей форме это не так. Идентификатор кнопки f - "shelf_button", поэтому она должна быть

$("#shelf_button").click(function() { ....

или вы можете прикрепить событие только в форме.