jQuery - Отменить отправку формы (используя «return false»?)?
У меня возникли небольшие проблемы при попытке отменить отправку формы. Я следовал этому уроку (хотя я не делаю сценарий входа в систему), и, похоже, он работает для него.
Вот моя форма:
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
А вот jquery:
$(document).ready(function() {
$('form[name=pForm]').submit(function(){
return false;
});
});
I ' Я уже импортировал JQuery в заголовке, и я знаю, что это работает. Моей первой мыслью было, что это может быть устаревшим, но на самом деле это «всего лишь» год назад.
Так кто-нибудь видит, что не так?
Заранее спасибо.
РЕДАКТИРОВАТЬ: Из того, что я прочитал проще всего и наиболее подходящий способ прервать отправку - вернуть false ? Но я не могу заставить его работать. Я искал на форуме, и я нашел несколько полезных тем, но ни одна из них на самом деле не работает. Я должен что-то напортачить.
5 ответов
Всем спасибо за ответ! Мой друг посоветовал мне добавить
onsubmit="return(false)
в форму. Это работает, но я все же хотел бы знать, что работает трюк без встроенного javascript.
Попробуйте использовать event.preventDefault
$(document).ready(function(event) {
$('form[name=pForm]').submit(function(event){
event.preventDefault();
//add stuff here
});
});
Он должен работать нормально. Скорее всего, в этом есть нечто большее. К сожалению, код в вашем вопросе не имеет вкуса SSCCE, так что трудно определить основную причину. Возможно, вы вообще не импортировали библиотеку jQuery. Или вы вызвали $(document).ready() перед импортом библиотеки jQuery. Или у вас есть другая библиотека JS, которая конфликтует $(). Или фактическая форма не имеет желаемого имени. И так далее.. и так далее..
Чтобы вы начали, вот полноценный SSCCE. Все, что вам нужно сделать, это скопировать его.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3569072</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('form[name=pForm]').submit(function() {
alert('Submit blocked!');
return false;
});
});
</script>
</head>
<body>
<form action="index.php" method="post" name="pForm">
<textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
<input class="submit" type="submit" value="Publicera!" name="submit" />
</form>
</body>
</html>
Если это работает (по крайней мере, это работает здесь, я получаю предупреждение, а форма вообще не отправляется), сравните ее с вашим собственным кодом и попробуйте сократить свой собственный код до этого вкуса, чтобы вы могли лучше определить различия (и, следовательно, вашу ошибку).
Несмотря на это, на мой взгляд, это будет стоить усилий, чтобы пройти через некоторые базовые / тривиальные jQuery (и желательно также JavaScript) учебники, чтобы вы лучше понимали, что происходит под прикрытием, и учились использовать такие инструменты, как Firebug.
Значение имени необходимо заключать в кавычки. Попробуйте это:
$(document).ready(function() {
$("form[name='pForm']").submit(function(){
return false;
});
});
Я сталкивался с подобными проблемами. Я решил их, удалив действие и метод формы до проверки, а затем добавив их обратно после проверки. Вот валидатор, который я написал:
var Validator = function (formSelector) {
this.formSelector = formSelector;
// $(formSelector).submit(function() {return false;});
this.Action = $(formSelector).attr("action");
this.Method = $(formSelector).attr("method");
$(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});
var donotsubmit = false;
var notjustcheckbox = false;
var checknotchecked = false;
this.Required = new Array();
this.Email = new Array();
this.validate = function () {
this.form = $(this.formSelector);
var i = 0;
for (i in this.Required){
$(this.Required[i]).attr("value", function(index,attr){
// Check on checkboxes...
if (this.getAttribute("type") == "checkbox"){
if (this.checked == false){
checknotchecked = true;
donotsubmit = true;
} else {
}
} else {
if (attr == "" || attr == undefined){
this.style.border = "1px solid red";
notjustcheckbox = true;
donotsubmit = true;
} else {
this.style.border = "1px solid green";
}
}
});
}
i = 0;
for (i in this.Email){
$(this.Email[i]).attr("value", function(index,email){
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
if (filter.test(email) == true || filter.test(email) == "true") {
this.style.border = "1px solid green";
} else if (filter.test(email) == false) {
donotsubmit = true;
notjustcheckbox = true;
this.style.border = "1px solid red";
}
});
}
if (donotsubmit == true){
if (checknotchecked == true && notjustcheckbox == true){
alert("Please correct the fields in red and check the required checkboxes");
} else if (checknotchecked == true && notjustcheckbox == false){
alert("Please check the required checkboxes");
} else {
alert("Please correct the fields in red");
}
checknotchecked = false;
notjustcheckbox = false;
donotsubmit = false;
} else {
$(formSelector).attr({action : ''+this.Action+''});
$(formSelector).attr({method : ''+this.Method+''});
$(formSelector).submit();
}
return true;
};
};
Вы можете реализовать его следующим образом:
$(document).ready(function(){
var myForm = new Validator("#formId");
myForm.Required = new Array("input.lightborder");
myForm.Email = new Array("#email");
$("#form-submit-button-id").click(function(){
myForm.validate();
});
});
Вы можете добавить селекторы CSS для обязательных полей. Один для электронной почты должен быть уникальным.