Как вызвать функцию 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 не вызывается при нажатии кнопки. Код приведен ниже:

    $(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 click; вместо этого используйте $.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 , в котором есть такие методы, как ajaxSubmit(), чтобы уменьшить вашу работу.

Answer 2

Введите ваш код JavaScript в

$(document).ready({

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

      //Do stuff here

   }); 

});

Answer 3

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

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

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 () `и передача без обработчика события фактически инициирует отправку формы, это работает для всех других событийтоже).

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