Javascript html5表单无法正常工作
我在我的网站的每一页上都有一个搜索表单,它可以完美地工作,当提交表单时,它会进入一个名为search.php的页面 我的联系页面上也有相同的表格,我也有一个联系表格。 联系人表单没有提交按钮,因为我使用ajax将post变量发送到contact_process.php页面。联系人表单工作正常,但在此页面上搜索表单不工作。。当我按下搜索表单上的提交按钮时,它只刷新整个联系人页面,而不是进入search.php页面。有人能帮忙吗?谢谢 联系人表单的javascript和ajax:Javascript html5表单无法正常工作,javascript,ajax,html,forms,submit,Javascript,Ajax,Html,Forms,Submit,我在我的网站的每一页上都有一个搜索表单,它可以完美地工作,当提交表单时,它会进入一个名为search.php的页面 我的联系页面上也有相同的表格,我也有一个联系表格。 联系人表单没有提交按钮,因为我使用ajax将post变量发送到contact_process.php页面。联系人表单工作正常,但在此页面上搜索表单不工作。。当我按下搜索表单上的提交按钮时,它只刷新整个联系人页面,而不是进入search.php页面。有人能帮忙吗?谢谢 联系人表单的javascript和ajax: document.
document.getElementById('submit_message').addEventListener('click', sendMessage, false);
function sendMessage(){
$('#submit_message').removeClass("point_finger_animation");
$('#pointing_finger').fadeOut();
xmlhttp = createXHR();
xmlhttp.onreadystatechange = callback;
var not_valid_email = false;
var your_name = document.getElementById("your_name").value;
var captcha_code = document.getElementById("captcha_code").value;
var subject = document.getElementById("subject").value;
var email = document.getElementById("email").value;
var mobile_number = document.getElementById("mobile").value;
if(mobile_number.length < 10 || mobile_number.length > 14){
var not_valid_mobile = true;
}
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
var not_valid_email = true;
}
var message = document.getElementById("message").value;
xmlhttp.open("POST", "contact_process.php" ,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if((your_name == "" || your_name == null) || (not_valid_mobile) || (not_valid_email) || (message == "" || message == null)){
$('#container_wrapper').scrollTop(0);
document.getElementById("form_results").innerHTML = "<p>Message not sent!</p>";
if(your_name == "" || your_name == null){
document.getElementById("form_results").innerHTML = "<p>Oops! You forgot to fill in a required field!</p>";
}else if(not_valid_email){
document.getElementById("form_results").innerHTML = "<p>The email address you entered is invalid!</p>";
}else if(not_valid_mobile){
document.getElementById("form_results").innerHTML = "<p>The mobile number you entered is invalid!</p>";
}else if(message == "" || message == null){
document.getElementById("form_results").innerHTML = "<p>Oops! You forgot to fill in a required field!</p>";
}
}else{
xmlhttp.send("your_name=" + your_name + "&email=" + email + "&mobile=" + mobile_number + "&subject=" + subject + "&message=" + message + "&captcha_code=" + captcha_code);
}
}
function callback(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
refreshCaptcha();
document.getElementById("form_results").innerHTML = xmlhttp.responseText;
$('#container_wrapper').scrollTop(0);
}
}
联系人表单的html
<section id="form_area" class="content_box">
<div id="form_results"></div>
<form id ="contact_form" method="post" action="">
<label>Your Name (required)</label>
<input id="your_name" name="your_name" type="text" placeholder="Your Name" onfocus = "checkEnter()">
<label>Your Email (required)</label>
<input id="email" name="email" type="email" placeholder="Email" onfocus = "checkEnter()">
<label>Mobile Number (required)</label>
<input id="mobile" name="mobile" type="text" placeholder="Mobile Number" onfocus = "checkEnter()">
<label>Subject</label>
<input id="subject" name="subject" type="text" placeholder="Subject (Optional)" onfocus = "checkEnter()" >
<label>Your Message (required)</label>
<textarea id="message" name="message" rows="4" type="text" placeholder="Please leave your message here" onfocus = "checkEnter()"></textarea>
<label>Please enter the Captcha below (required). Letters are not case sensitive.</label>
<div id="captcha_wrapper">
<img id="captcha" src="/finalne2/securimage/securimage_show.php" alt="CAPTCHA Image" />
<span id="captcha_refresh"><i class="fa fa-refresh"></i></span>
</div>
<input id="captcha_code" type="text" name="captcha_code" size="10" maxlength="6" onfocus = "checkEnter()" onblur = "checkFields()"/>
<div id="submit_area">
<div id="submit_message" class="menu_level_1 button_style">Send</div>
<div id="pointing_finger"><i class="fa fa-hand-o-left"></i></div>
</div
</form><!--End of contact_form-->
</section><!--End of form_area-->
搜索表单的html:
<div id="search_wrapper" class="menu_level_1">
<div id="search_box">
<form action="search.php" method="get">
<input id="search_content" placeholder="Search website" type="text" name="query" size="40" value="" action="" columns="2" autocomplete="off" delay="1500">
<button id="submit_search" type="submit"><i class="fa fa-search"></i></button>
<input type="hidden" name="search" value="1">
</form>
</div>
</div>
更新:
@Malk感谢您在contact表单的结束div中发现缺少的括号:这确实是问题所在:只是猜测,但可以尝试在contact表单中指定显式动作属性
<form id ="contact_form" method="post" action="some_page_here">
听起来像是HTML错误。这是直接复印/粘贴的吗?注意排队前的那句话。。我从来没有注意到这一点,这确实是问题所在。。我想是因为我的联系方式一直有效,所以我没想到要检查一下。。你帮我省了几个小时试图解决这个问题。谢谢。谢谢,但是因为我使用ajax发送联系人表单,所以我不需要动作属性。结果是我在联系人表格中的div上缺少了一个结束括号。。感谢您的帮助: