在我的代码中,我有一个表单
<form id="form_enquiry" name="enquiry-form">
<ul>
<li>
<label>Name</label>
<input name="name" type="text" id="name" class="required"/>
</li>
<li>
<label>Email</label>
<input name="email" type="text" id="email" class="required"/>
</li>
<li>
<label>Telephone</label>
<input name="telephone" type="text" id="telephone" class="required"/>
</li>
<li>
<label>Message</label>
<textarea rows="4" name="message" id="message" class="required"></textarea>
</li>
<li>
<label>How did you hear about us?</label>
<div class="select-arrow">
<select name="select_option" id="select_option" class="required">
<option value="" selected="selected">— — —</option>
<option value="I am a repeat customer">I am a repeat customer</option>
<option value="You where recommended to me">You where recommended to me</option>
<option value="Google Search">Google Search</option>
<option value="Travelzoo">Travelzoo</option>
<option value="Newspaper article">Newspaper article</option>
<option value="Facebook">Facebook</option>
</select>
</div>
</li>
<li>
<button type="submit" id="enquiry_submit">Send</button>
</li>
</ul>
</form>
这个表单我使用jquery代码提交
$("#form_enquiry").submit(function (e) {
e.preventDefault(); // this will prevent from submitting the form.
//alert('check');
$("#form_enquiry").validate({
submitHandler: function(form) {
var name1 = $('#name').val();
var email1 = $('#email').val();
var telephone1 = $('#telephone').val();
var message1 = $('#message').val();
var select_option1 = $('#select_option').val();
var site_url = <?= $_SERVER['REQUEST_URI'] ?>;
if(name1 && email1 && telephone1 && message1 && select_option1)
{
$.ajax({
type: 'post',
url: '<?= base_url()?>'+'frontend/form_enquiry',
data: 'name='+name1+'&email='+email1+'&telephone='+telephone1+'&message='+message1+'&select_option='+select_option1+'&site_url='+site_url
//success: function(data) { $('#login_err').html('Success ...'); }
});
}
}
});
});
工作正常但需要点击两次发送按钮.. 我希望只需单击一下即可提交表单,但代码中有错误帮我...
答案 0 :(得分:4)
如果您正在使用jQuery validate,则不必手动绑定提交事件,因为它会为您执行此操作。只需单独使用它:
$("#form_enquiry").validate({
submitHandler: function (form) {
var name1 = $('#name').val();
var email1 = $('#email').val();
var telephone1 = $('#telephone').val();
var message1 = $('#message').val();
var select_option1 = $('#select_option').val();
var site_url = <?= $_SERVER['REQUEST_URI'] ?> ;
if (name1 && email1 && telephone1 && message1 && select_option1) {
$.ajax({
type: 'post',
url: '<?= base_url()?>' + 'frontend/form_enquiry',
data: 'name=' + name1 + '&email=' + email1 + '&telephone=' + telephone1 + '&message=' + message1 + '&select_option=' + select_option1 + '&site_url=' + site_url
//success: function(data) { $('#login_err').html('Success ...'); }
});
}
}
});
答案 1 :(得分:0)
使用带有序列化表单数据的ajax。因此无需从输入字段逐个获取值。
$("#form_enquiry").submit(function(e) {
e.preventDefault();
$.ajax({
'type': 'POST',
'url': '<?= base_url()?>'+'frontend/form_enquiry',
'data': $("#form_enquiry").serialize(),
success: function(data) {
}});
});