вызов ajax с формой HTML не будет работать правильно
Я застреваю.
Это похоже на сценарий, не имеет никакой функции вообще.
<script>
$("#continue").click(function () {
$.ajax({
type: "POST",
url: "dbc.php?check=First",
data: {full_name : $('#full_name').val()
usr_email : $('#usr_email').val()},
success: function(msg){
if(msg==1){
$("#First_1").hide();
$("#Next_2").toggle();
}else{
alert(msg)
}
}
});
return false;
});
</script>
<form action="index.php?page=checkin" method="post" name="regForm">
<div id="First_1">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="5">
<tr>
<td style="padding: 5px;">
Fullständiga namn:
</td>
<td>
<input name="full_name" type="text" id="full_name" class="required">
</td>
</tr>
<tr>
<td style="padding: 5px;">
Email:
</td>
<td>
<input name="usr_email" type="text" id="usr_email" class="required email">
</td>
</tr>
<tr>
<td style="padding: 5px;">
Sex:
</td>
<td>
<select name="sex">
<option value="male">Kille</option>
<option value="female">Tjej</option>
</select>
</td>
</tr>
<td>
<input type="submit" id="continue" value="Continue">
</td>
</table>
</td>
</tr>
</table>
</div>
С этим, когда я нажимаю, продолжаются, это должно отправить вызов ajax, но это не делает. Когда я нажимаю Continue, он просто берет меня к действию формы = "index.php? page=checkin", даже если существует, возвращают false; по щелчку (в сценарии)? Я даже попытался изменить строку формы и вставил onsubmit =, "возвращают false"; но затем ничего не происходит вообще, когда я нажимаю на кнопку.
3 ответа
Для меня это похоже на опечатку и похоже на ваше поле данных.
Я бы посоветовал сделать
data: "value1="+$("#val1").val()+"&value2="+$("#val2").val()
Также хороший способ отладки javascript - открыть консоль Chrome или в firefox использовать консоль firebugs, и когда вы выполняете действие, она обычно сообщает вам о проблеме или ее отсутствии.
И последнее замечание: я бы посоветовал использовать json при возврате с php, чтобы вы могли предоставить пользователю более удобное сообщение. Например, допустим, ваша форма не проверяет серверную сторону (вы правильно проверяете серверную сторону?). Вы можете вернуть клиенту красивое сообщение, объясняющее им, что не было проверено. Как это сделать?
$.ajax({
type: "POST",
url: "dbc.php",
data: "val1="+$(#val1).val()+"&val2="+$(#val2).val(),
success: function(json){
if(json.error){
//notify user of error message
$(#statusDiv).(json.message);
}else{
//perform success
}
}
});
А на стороне сервера использовать что-то вроде
echo json_encode(array("error"=>1, "message"=>"<insert validation problems here>"));
В случае успеха функция получит доступ через json.error или json.message.
В вашем новом коде на phpbin вам нужна запятая после строки:
data: "full_name="+$("#full_name").val()+"&usr_email="+$("#usr_email").val(), // <-- COMMA HERE
Или, в вашем старом коде (который приятнее, поскольку вам не нужно иметь дело с конкатенацией данных url самостоятельно), вам не хватает запятой также, между двумя строками:
data: {full_name : $('#full_name').val(), // <-- COMMA HERE
usr_email : $('#usr_email').val()},
АЛСО, вам нужна точка с запятой после этой строки:
alert(msg); // <-- SEMICOLON HERE
;)
Проблема в том, что он выполняет действие по умолчанию, потому что ни один из ваших кодов jQuery не запущен :) Когда ваш код запускается, элемента id = "continue" еще нет, поэтому $ ("# continue") не находит ничего для привязки обработчика click . Это простое исправление. Оберните свой код в вызов document.ready , например:
$(function() {
$("#continue").click(function () {
$.ajax({
type: "POST",
url: "dbc.php?check=First",
data: {full_name : $('#full_name').val()
usr_email : $('#usr_email').val()},
success: function(msg){
if(msg==1){
$("#First_1").hide();
$("#Next_2").toggle();
}else{
alert(msg)
}
}
});
return false;
});
});
Выполнив это, он будет ждать, пока DOM не будет готов, и ваши элементы будут там для поиска / привязки . Кроме того, вместо прикрепления к событию click кнопки #continue , обычно лучше прикрепить к обработчику формы submit , чтобы он был пойман там, поэтому вместо этого :
$("#continue").click(function () {
Вы бы сделали это:
$("form[name='regForm']").submit(function() {
Со всем остальным, оставаясь прежним.