htmlページからPHPとjquery/ajaxを介して電子メールを送信

Question

私は非常に単純な質問をしていますが、かなりの時間私を悩まされています。私はすでに妥当性検査を持っている簡単なフォームit.Theフォームコードにある割り当て：

<div class="contact_form">  
    <form method="post" id="contactForm" name="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="submit" alt="Submit button" name="submit" class="submit" id="submit"> 

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


</div>  

私はAJAXを使用してPHPのフォームを試してみて、呼び出すために使用していたコードは、この

$(document).ready(function() { 

    //if submit button is clicked 
    $('#submit').click(function() { 

alert("test i am here"); 



     /*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, 
     //Do not cache the page 
      cache: false, 
     success: function(html) { 
     $('.simple-sucess').fadeIn(100).show(); 
     $('.contact_form').fadeOut(100).hide(); 
     $('.simple_error').fadeOut(100).hide(); 


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

である事が警告しても表示されていません私が送信ボタンを押すと、私はここで間違っているのですか？

検証コードが送信ボタンが既に提出し、通常の操作を行うまで配線されているので。submitイベントではなく、送信ボタンclickイベントを使用して、すべての

<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     $("#contactForm").validate(); 
    }); 

Answer 1

まずありバグがあるかもしれませんが、javascriptコンソールでエラーをチェックしてください。いずれにしても...

あなたが実際にやりたいことは、コードをもっと簡単にするjQuery form pluginを使用することです。すでにバグが働いているあなたの電子メールの検証を失うが、なぜ車輪の再発明でしょう。この場合

$('#contactForm').ajaxForm(function() { 
      $('.simple-sucess').fadeIn(100).show(); 
      $('.contact_form').fadeOut(100).hide(); 
      $('.simple_error').fadeOut(100).hide() 
     }); 

、バリのtonsがそこにあります

次に、あなたの改訂版のコードはのように簡単になりますフォームで

<input type="submit" alt="Submit button" name="submit" class="submit" id="submit"> 

、とjQueryであなたはを使用している：

Answer 2

などから最初の事はあなたが使用していますさ210イベント、

<input type="submit" alt="Submit button" name="submit" class="submit" id="submit">

に変更しようとします。それはあなたが「ドン場合は、持っている.click()イベント
または第二のオプションで完璧に動作します、その後

<input type="button" alt="Submit button" name="submit" class="submit" id="submit"> 

入力タイプを変更したい場合は、.click()の代わりに.submit()を使用してください。

Answer 3

OMG、非常に多くのコード行。ちょっとした提案：デバッグするのに十分シンプルにしておいてください。 jsfiddleのデモは、より良い答えをお勧めします。

ここでは、javascriptをサポートしていない基本的なブラウザで動作するajaxフォームのソリューションを掲載します。

HTML：

<form method="post" id="contactForm" action="somewhere"> 
    Name: <input type="text" name="contactName" /> 
    <br /> 
    <input type="submit" value="Submit this form" /> 
</form> 

のjavascript：

jQuery(function($){ 
    $('#contactForm').submit(function(e){ 
     e.preventDefault?e.preventDefault():false; 
     $.post(this.action,$(this).serialize(),function(text){ 
      //callbacks 
      console.log(text); 
     }); 
     return false; 
    }) 
});