Pregunta

Estoy trabajando en un sitio de una sola página con contenido deslizante.

Estoy usando jQuery.Form.js y estoy usando lo siguiente en la cabeza para inicializar el formulario de contacto/script:

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

También estoy usando lo siguiente para evitar la propagación del evento cuando el usuario hace clic en cualquier lugar dentro del formulario:

$(function() {
    $('#email-form').click(fillForm);
});
function fillForm(e){
        e.stopPropagation();
        return false;
}

Pero cuando hago clic en el botón 'Enviar', el formulario no se envía. No puedo pensar cómo solucionar esto para que el formulario se envíe sin que el evento burbujee.

Cualquier orientación/asistencia sería muy apreciada.

Mtia.

(Aquí está mi forma para el registro :)

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

¿Fue útil?

Solución

¿Cómo va a enviar el usuario el usuario si incluso le prohíbe hacer clic en usar su

$(function() {
    $('#email-form').click(fillForm);
});
function fillForm(e){
        e.stopPropagation();
        return false;
}

Otros consejos

¿Visitaste el ejemplo de AjaxSubmit en la página de inicio de 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; 
}); 

No sé qué eventos espera al hacer clic en el formulario, pero el hecho de que está deteniendo la propagación de los eventos en el formulario también puede conducir a detener el clic en el botón.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top