проблема с jquery.form.js и предотвращение распространения событий
-
26-10-2019 - |
Вопрос
Я работаю над одностраничным сайтом со скользящим контентом.
Я использую jquery.form.js и использую следующее в head для инициализации контактной формы / скрипта:
<script type="text/javascript">
$(document).ready(function() {
$('#closeit').click(function(){
$('.message').hide('slow');
return false;
});
var options = {
target: '#alert',
};
$('#contactForm').bind('submit', function() {
$(this).ajaxSubmit(options);
e.stopPropagation();
return false;
});
$.fn.clearForm = function() {
return this.each(function() {
var type = this.type, tag = this.tagName.toLowerCase();
if (tag == 'form')
return $(':input',this).clearForm();
if (type == 'text' || type == 'password' || tag == 'textarea')
this.value = '';
else if (type == 'checkbox' || type == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
</script>
Я также использую следующее, чтобы предотвратить распространение событий, когда пользователь нажимает в любом месте формы:
$(function() {
$('#email-form').click(fillForm);
});
function fillForm(e){
e.stopPropagation();
return false;
}
Но когда я нажимаю кнопку "Отправить", форма не отправляется.Я не могу придумать, как это исправить, чтобы форма отправлялась без появления пузырьков события.
Мы были бы весьма признательны за любое руководство / помощь.
MTIA.
(Вот моя форма для протокола:)
<form action="sendmemail.php" method="post" id="contactForm">
<ul>
<li>
<div class="field-row">
<div class="field-name"><p>name:<span class="abbrev">*</span></div>
<div class="field-box"><input type="text" class="allfields" name="name" id="name"/></div>
</div>
</li>
<li>
<div class="field-row">
<div class="field-name"><p>email:<span class="abbrev">*</span></div>
<div class="field-box"><input type="text" class="allfields" name="email" id="email"/></div>
</div>
</li>
<li>
<div class="field-row">
<div class="field-name"><p>phone:<span class="abbrev">*</span></div>
<div class="field-box"><input type="text" class="allfields" name="tele" id="tele"/></div>
</div>
</li>
<li>
<div class="field-row message-field">
<div class="field-name"><p>message:<span class="abbrev">*</span></div>
<div class="field-box">
<textarea class="allfields messagetext" name="message" id="message"></textarea>
</div>
</div>
</li>
<li class="submitbutton">
<input type="submit" name="submitbutton" id="submitbutton" value=" SUBMIT" />
</li>
</ul>
Решение
Как пользователь собирается отправлять форму, если вы даже запрещаете ему нажимать с помощью вашего
$(function() {
$('#email-form').click(fillForm);
});
function fillForm(e){
e.stopPropagation();
return false;
}
Другие советы
Вы смотрели пример ajaxSubmit на главной странице jquery.form.js?http://jquery.malsup.com/form/#ajaxSubmit
$('#contactForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
Я не знаю, какие события вы ожидаете при нажатии на форму, но тот факт, что вы останавливаете распространение событий в форме, может привести к остановке нажатия на кнопку.