2013-02-25 9 views
0

Есть ли способ предотвратить JQuery от значений формы очистки?Почему значения формы сброса JQuery

Я создал следующий сценарий Jquery, который по существу отправляет данные формы POST в php-функцию, а затем перенаправляется на новую страницу, если выход PHP был успешным или показывал ошибку, если это не так.

$('#update').click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    type: "POST", 
    url: 'function.php', 
    data: $(this).serialize(), 
    success: function(data) 
    { 
    if (data === 'Success') { 
    window.location = 'acc.php'; 
    } 
    else { 
    alert('Please try again.'); 
    } 

} 

}); 

}); 

И значения формы заполняются вторя из переменной PHP следующим образом:

<input type="text" name="name" id="name" value="<?php echo $name ?>"> 

Все нормально при загрузке страницы, однако после того, как я обновил значения полей через передний конец формы и нажмите submit Jquery удаляет все значения полей, отправляет пустые значения обратно на php (которые вводятся в БД) и перенаправляется на новую страницу, когда возвращается сообщение Success.

Я удалил JQuery и попытался отправить форму непосредственно на php, и она отлично работала, поэтому это определенно проблема JQuery.

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

Любые идеи о том, что может быть проблемой?

+0

'serialize()' работает только с элементами 'form', но выглядит как' # update' (и поэтому 'this') является кнопкой. Кроме того, предотвращение по умолчанию нажатия кнопки отправки не препятствует отправке формы. Прислушайтесь к событию 'submit' в форме. –

ответ

1

Вы (вероятно, - должны были бы увидеть страницу HTML, чтобы узнать, определенно) вызова .serialize() на неправильный элемент.

У вас есть обработчик события click, связанный с элементом с идентификатором update. Я предполагаю, что это либо кнопка, либо ссылка, которую вы хотите, чтобы пользователь нажал кнопку, чтобы отправить запрос AJAX. В контексте этой функции обработчика событий this будет элементом, на который вы нажали, поэтому вызов $(this).serialize() попытается сериализовать кнопку или ссылку, а не форму.

То, что вы хотите вместо того, чтобы либо:

$('#id-of-your-form').serialize() 

или, если у вас есть только один <form> элемент на странице, вы можете использовать:

$('form').serialize(); 

Кстати, это, кажется, как вид которое должно обрабатываться с помощью проверки на стороне сервера (поэтому он отклоняет пустые значения).

+0

Спасибо Anthony, я сначала попробовал идентификатор формы, но он все еще очистил значения, а затем просто попробовал «форму», увидев, что на странице есть только один, и это сделало трюк. – JPDP

1

попробуйте изменить:

data: $(this).serialize(), 

в

data: $("#your_form_id").serialize(), 

ИЛИ

$('form').submit(function() {  
    $.ajax({ 
    type: "POST", 
    url: 'function.php', 
    data: $(this).serialize(), 
    .... 
}); 
+0

Спасибо Sudhir, я использовал решения Энтони, которые были по сути одинаковы. – JPDP

Смежные вопросы