我正在尝试使用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'句子来防止在提交表单时页面刷新。
答案 0 :(得分:1)
在javascript中你必须在变量名之前放置var,这可能是你所面临的错误。
使用
var post_data = {
'YourData' : 1
}