Как я могу вызвать функцию jquery при отправке формы?

Question

У меня есть форма, которая приводится ниже:

<form method="post" id="contactForm" action=""> 
       <fieldset class="contactFieldset"> 
        <ul> 
         <li> 
          <label for="contactName" class="leftLabel">*Name:</label> 
          <input type="text" name="contactName" id="contactName" class="contactInput required" value="" /> 

         </li> 
         <p></p> 
         <li> 
          <label for="email" class="leftLabel">*Email:</label> 
          <input type="text" id="email" name="email" class="contactInput email required" value="" /> 
         </li> 
         <span class="simple-success">I'll be in touch soon</span> 
         <li> 
          <label for="subject" class="leftLabel">*Subject:</label> 
          <input type="text" name="subject" id="subject" class="contactInput required" value="" /> 
         </li> 
         <p></p> 
         <li> 
          <label for="message" class="leftLabel">Message:</label> 
          <textarea rows="10" cols="40" id="message" name="message" class="contactTextarea required"></textarea> 

         </li> 
         <p></p> 
         <li> 


          <input type="image" src="images/submitbutton.png" alt="Submit button" name="submit_button" class="submit_button" id="submit_button"> 

         </li> 
        </ul> 
       </fieldset> 
      </form> 

Я пытаюсь извлечь данные из этой формы с помощью JQuery, так что я могу передать его в файл PHP и отправить по электронной почте, но функция JQuery является не вызывается при нажатии кнопки код button.The приводится ниже:

$(function() { 
    $('.error').hide(); 
    $('.simple-sucess').hide(); 

    $(".submit_button").click(function() { 





     /*get the email value*/ 

     var email = $("input#email").val(); 
     var name = $("input#contactName").val(); 
     var subject = $("input#subject").val(); 
     var message=$("input#message").val(); 
    // alert("email"+email); 

/* Check if the email is good or bad */ 

var goodEmail = email.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi); 
    apos=email.indexOf("@");dotpos = email.lastIndexOf(".");lastpos=email.length-1; 
    var badEmail = (apos<1 || dotpos-apos<2 || lastpos-dotpos<2); 

/*If the email is bad ,display the error message*/ 

if (email=="" || !goodEmail || badEmail) { 

     $("email").focus(); 
     return false; 
    } 


     var dataString = 'email='+ email + '\n Name='+ name+ '\n Subject='+ subject+ '\n message='+ message; 
     alert (dataString); 

     $.ajax({ 
     type: "POST", 
     url: "mai.php", 
     data: dataString, 
     success: function() { 
     $('.simple-sucess').fadeIn(100).show(); 
     $('.contact_form').fadeOut(100).hide(); 
     $('.simple_error').fadeOut(100).hide(); 


     } 
    }); 
    return false; 
    }); 
}); 

Любые идеи о том, что я могу делать неправильно?

Благодаря

Answer 1

Вы должны использовать document.ready блок и не использовать submit-button нажмите; вместо того, чтобы использовать $.submit()

$(document).ready(function() { 
    $("your form selector here").submit(function() { 


    // do the extra stuff here 
    $.ajax({ 
    type: "POST", 
     url: "mail.php", 
     data: $(this).serialize(), 
     success: function() { 
     $('.simple-sucess').fadeIn(100).show(); 
     $('.contact_form').fadeOut(100).hide(); 
     $('.simple_error').fadeOut(100).hide(); 

     } 
    }) 

    }) 
}) 

Посмотрите на jQuery Form Plugin, whic имеет такие методы, как ajaxSubmit() уменьшить вашу работу.

Answer 2

Использование onsubmit для проверки формы представлен:

$('#contactForm').on('submit', function() { 
    alert('You submitted the form!'); 
}); 

Answer 3

Поместите свой яваскрипта код в

$(document).ready({ 

    $('#contactForm').submit(function() { 

     //Do stuff here 

    }); 

}); 

Answer 4

Прежде всего, попробуйте отладить свой код. В Chrome есть аккуратная консольная консоль (Ctrl + Shift + J), а Firefox - потрясающий аддон FireBug. Затем вы можете использовать console.log("Message");, чтобы проверить, достигла ли эта функция.

Это alert("email" + email) Работающий?

Обязательно оберните все в $().ready({ /* your code */ });. Прямо сейчас ваш код, вероятно, запущен до, остальная часть документа загружена и, таким образом, когда он пытается найти кнопку для привязки события, она терпит неудачу и событие не привязывается ни к чему.

Помимо $('.submit-button').click(...) вы можете использовать $('#contactForm').submit(function() { /* code that's now in the click handler */ }. This would make the code a little more fail-safe, in case you might want to rename or remove that button, or if you want to manually submit the form from a piece of code. (Running $ ('# contactForm'). Submit() `и передача какого-либо обработчика событий фактически инициирует отправку формы, это работает и для всех других событий).

Надеюсь, это поможет!