使用json与php发送联系信息失败

时间:2015-09-05 17:02:16

标签: javascript php json

我正在尝试使用json将信息发送到php以便处理要发送的电子邮件但是当我进行调试时,该过程遵循'else'条件..这里是代码:

HTML

<form id="cbp-mc-form" class="cbp-mc-form" method="post">
  <div class="cbp-mc-column">
        <label for="name">Name (*)</label>
        <input type="text" minlength="2" name="name" required="true" placeholder="John Doe">
         <label for="phone">Phone Number</label>
         <input type="text" name="phone" placeholder="+54 11 999 999">
         <label for="email">Email Address (*)</label>
         <input type="text" name="email" required="true" placeholder="user@domain.ext">
      </div>
      <div class="cbp-mc-column">
           <label for="country">Country (*)</label>
           <select id="country" name="country" required>
                <option value="">Choose a country</option>
                <option value="AF">Afghanistan</option>
                <option value="AX">Åland Islands</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option>
    <option value="AR">Argentina</option>
    <option value="AM">Armenia</option>
    <option value="AW">Aruba</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="AZ">Azerbaijan</option>
     <option value="ES">Spain</option>
    <option value="YE">Yemen</option>
    <option value="ZM">Zambia</option>
    <option value="ZW">Zimbabwe</option>
            </select>
             <label>Scope of Work (*)</label>
             <select id="scope" name="scope" required>
                  <option value="">Choose scope</option>
                  <option value="UX / IA / Strategy">UX / IA / Strategy</option>
                  <option value="Design">Design</option>
                  <option value="Development">Development</option>
                  <option value="Other">Other</option>
             </select>
             <label>Estimated Budget (*)</label>
             <select id="budget" name="budget" required>
                    <option value="">Choose a budget</option>
                    <option value="Less than u$s10k">Less than u$s10k</option>
                    <option value="u$s10k-20k">u$s10k-20k</option>
                    <option value="u$s20k-50k">u$s20k-50k</option>
                    <option value=">u$s50k-100k">u$s50k-100k</option>
                    <option value="">More than +u$s100k</option>
              </select>
      </div>
     <div class="cbp-mc-row">
          <div id="g-recaptcha" class="g-recaptcha" data-sitekey="6LcjmAsTA12QOrP3RYXRjMLwM-bWXVEukSkvNh"></div>
             <label for="message">Message (*)</label>
             <textarea id="message" name="message" required></textarea>
          </div>                        
          <div class="cbp-mc-submit-wrap">
             <p>* Mandatory Fields</p>
             <input type="submit" id="submit_btn" class="cbp-mc-submit" value="Enviar">                            
          </div>    
 </form>

这是Javascript:

$(document).ready(function() {

    $("#submit_btn").on('click',function(e) { 

        $.getScript("https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js", function() {

            $("#cbp-mc-form").validate({
                debug: true,                    
                rules: {
                    "name": {
                        required: true,
                        minlength: 2
                    },
                    "email": {
                        required: true,
                        email: true
                    },
                    "country": {
                        required: true                          
                    },
                    "scope": {
                        required: true
                    },
                    "budget": {
                        required: true
                    },
                    "message": {
                        required: true,
                         rangelength: [50,250]
                    }
                },
                messages: {
                    "name": {
                        required: "Please enter your name.",
                        minlength: "Your name must have 2 digits at least."
                    },
                    "country": {
                        required: "Choose your country."
                    },
                    "scope": {
                        required: "Specify the scope of your project."
                    },
                    "email": {
                        required: "Enter an email.",
                        email: "Enter a valid email format"
                    },
                    "budget": {
                        required: "Select a budget that best suits your needs."
                    },
                    "message": {
                        required: "Share your needs about the project.",
                        maxlength: "Character limitation is about 400"
                    }
                }   
        });

        console.log($("#cbp-mc-form").valid());
        if($("#cbp-mc-form").valid()) {

            post_data = {
                    'user_name'  : $('input[name=name]').val(), 
                    'user_email' : $('input[name=email]').val(), 
                    'phone'     : $('input[name=phone]').val(), 
                    'country'   : $('select[name=country]').val(), 
                    'scope'     : $('select[name=scope]').val(), 
                    'budget'    : $('select[name=budget]').val(), 
                    'message'   : $('textarea[name=message]').val(),
                    'captcha' :  grecaptcha.getResponse()
            };

            $.ajax({
                    type: "POST",
                    url: "php/contact_me.php",
                    async: true,
                    data: post_data ,                   
                    dataType: 'json',
                    success: function (data) {
                        console.log("everything looks ok" + data);

                    },
                     error: function (xmlHttpRequest, textStatus, errorThrown) {
                        if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0) {
                              return;  // it's not really an error
                        } else {
                              console.log("You're Bot");    
                        }
                    }
            });


         }

        });
        e.preventDefault();
    });
});

所以,我使用控制台记录了所有信息,试图找出问题的根源,但是当我填写表格并发送它时...此消息出现:console.log(“你是Bot”);我做错了什么?

另一方面,我使用'preventDefault'句子来防止在提交表单时页面刷新。

1 个答案:

答案 0 :(得分:1)

在javascript中你必须在变量名之前放置var,这可能是你所面临的错误。

使用

 var post_data = {
'YourData' : 1
 }