проблема с jquery.form.js и предотвращение распространения событий - PullRequest
Новая
       45

проблема с jquery.form.js и предотвращение распространения событий

0 голосов
/ 26 июля 2011

Я работаю над одностраничным сайтом со скользящим контентом.

Я использую jquery.form.js и использую в заголовке следующее для инициализации контактной формы / скрипта: 

<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>

Ответы [ 2 ]

1 голос
/ 26 июля 2011

Как пользователь отправит форму, если вы даже запретите ему нажимать, используя ваш 

$(function() {
    $('#email-form').click(fillForm);
});
function fillForm(e){
        e.stopPropagation();
        return false;
}
0 голосов
/ 26 июля 2011

Вы смотрели пример 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; 
});

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

...