Question

我的网站每个页面都有一个搜索表单，它可以很好地工作，在提交表单时会转到一个名为search.php的页面。

我的联系页面上也有相同的表格，我也有联系表格。联系表单没有提交按钮，因为我使用ajax将post变量发送到contact_process.php页面。联系表单工作正常但是在此页面上搜索表单不起作用..当我按下搜索表单上的提交按钮时，它只刷新整个联系页面而不是转到search.php页面。有人可以帮忙吗？感谢。

联系表单的javascript和ajax：

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感谢您在联系表单的结尾div中找到了丢失的括号:)这确实是问题:)

Answer 1

只是猜测，但也许可以尝试在联系表单中指定显式操作属性。

<form id ="contact_form" method="post" action="some_page_here">

html5表单无法正常工作

1 个答案: