Question

我正在尝试模拟弹出消息，该消息应在表单正确提交时显示。我写的代码有效，但我的Javascript函数，模拟弹出窗口，也出于某种原因在窗口加载时调用。我发布了代码，希望你能找到我的错误：

页面contact.php：

<section>
<div class = "contentContainer">
    <h1 class = "mainTitle" >
        Contact us
    </h1>
    <div class = "innerContainer">
        <p class = "content">
            You can contact us through the form below. We can arrange a Skype meeting without any costs for you.
        </p>
        <p class = "content" id = "response"></p>
        <form id = "contact" class = "shadowRadius" action = "" method = "POST" >
            <table>
                <tr>
                    <td> <label for "firstName">Name*:</label> </td>
                    <td> <img src = "<?php echo ( ROOT."img/pages/contact/user.png" ); ?>" class = "transparent" alt = "Name"> </td>
                    <td> <input id = "firstName" class = "input" type = "text" placeholder = "Your full name" onBlur = "return bCheckName()" required > </td>
                    <td id = "nameResponse"></td>
                </tr>
                <tr>
                    <td><label for "companyName">Company*:</label></td>
                    <td><img src = "<?php echo ( ROOT."img/pages/contact/company.png" ); ?>" alt = "company name"></td>
                    <td><input id = "companyName" class = "input" type = "text" placeholder = "Your company's name" onBlur = "return bCheckCompany()" required></td>
                    <td id = "companyResponse"></td>
                </tr>
                <tr>
                    <td><label for "email">E-mail*:</label></td>
                    <td><img src = "<?php echo ( ROOT."img/pages/contact/email.png" ); ?>" alt = "e-mail" ></td>
                    <td><input id = "email" class = "input" type = "mail" placeholder = "Your e-mail" onBlur = "return bCheckMail()" required></td>
                    <td id = "mailResponse"></td>
                </tr>
                <tr>
                    <td> <label for "subject">Subject*:</label> </td>
                    <td> <img src = "<?php echo ( ROOT."img/pages/contact/subject.png" ); ?>" class = "transparent" alt = "subject"> </td>
                    <td> 
                        <input list = "subject" name = "subject" class = "input" type = "text" placeholder = "Select subject" onBlur = "return bCheckSubject()" required>
                        <datalist id = "subject" >
                            <option value = "information" >
                            <option value = "skype meeting" >
                            <option value = "web testing" >
                            <option value = "other" >
                        </datalist>
                    </td>
                    <td id = "subjectResponse"></td>
                </tr>
                <tr>
                    <td><label for "message">Message*:</label></td>
                    <td><img src = "<?php echo ( ROOT."img/pages/contact/text.png" ); ?>" class = "transparent" alt = "message" ></td>
                    <td><textarea id = "message" placeholder = "Type your message here" onKeyUp = "vCountChars()" onpaste = "vCountChars()" onBlur = "return bCheckMessage()" required></textarea></td>
                    <td id = "messageResponse"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td><p id = "count" class = "normal">Remaining characters: 2000</p></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td><div class = "g-recaptcha" data-sitekey = "6Lf6PygUAAAAAAy3fddIW5KBWoP37hShGrwbbIDD" ></div></td>
                    <td id = "captchaResponse" ></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td><input type = "submit" class = "send" value = "Submit" name = "submit" onClick = "return bSubmit()" ></td>
                    <td></td>
                </tr>
            </table>
        </form>
        <p class = "content">(*) The field is mandatory</p>
        <div id = "darkSide">
        </div><!--end of darkSide -->
        <div id = "pop-up" class = "shadowRadius">
            <img src = "<?php echo ( ROOT."img/pages/contact/true.png" ); ?>" alt = "OK">
            <p class = "normal">Your request is successfully submitted!!!</p>
            <div class = "clear">
            </div>
            <input type = "button" id = "accept" class = "shadowRadius" value = "OK" onClick = "vToggle()">
        </div><!--end of pop-up -->
    </div><!--end of innerContainer -->
</div><!--end of contentContainer -->

javascript代码包含在名为form.js的文件中：

function bCheckName ()
{
// It checks if the browser can allow a http request 
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the name from the form
var firstName = document.getElementById("firstName").value;
var datastring = "firstName=" + encodeURIComponent ( firstName );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        if ( !( xhttp.responseText == "" ))
        {
            var string      = xhttp.responseText.substr ( 0, 2 );
            var response    = xhttp.responseText.substr ( 5 );

            if ( string == "OK")
            {
                document.getElementById("nameResponse").innerHTML           = '<img id = "img1" src = "../img/pages/contact/true.png" alt = "correct answer" >';
                document.getElementById("response").innerHTML               = response;
            }
            else
            {
                document.getElementById("nameResponse").innerHTML           = '<img src = "../img/pages/contact/error.png" alt = "wrong answer">';
                document.getElementById("response").innerHTML               = response; 
            }
        }
        else
        {
            document.getElementById("nameResponse").innerHTML = "";
        }

    }
}

return false;

}

function bCheckCompany ()
{
/* It checks if the browser can allow a http request */
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the name from the form
var companyName = document.getElementById("companyName").value;
var datastring = "companyName=" + encodeURIComponent ( companyName );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        if ( !( xhttp.responseText == "" ))
        {
            var string      = xhttp.responseText.substr ( 0, 2 );
            var response    = xhttp.responseText.substr ( 5 );

            if ( string == "OK")
            {
                document.getElementById("companyResponse").innerHTML        = '<img id = "img2" src = "../img/pages/contact/true.png" alt = "correct answer" >';
                document.getElementById("response").innerHTML               = response;
            }
            else
            {
                document.getElementById("companyResponse").innerHTML        = '<img src = "../img/pages/contact/error.png" alt = "wrong answer">';
                document.getElementById("response").innerHTML               = response; 
            }

        }
        else
        {
            document.getElementById("companyResponse").innerHTML = "";
        }
    }
}

return false;

}

function bCheckMail ()
{
/* It checks if the browser can allow a http request */
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the name from the form
var email = document.getElementById("email").value;
var datastring = "email=" + encodeURIComponent ( email );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        if (!( xhttp.responseText == "" ))
        {
            var string      = xhttp.responseText.substr ( 0, 2 );
            var response    = xhttp.responseText.substr ( 5 );

            if ( string == "OK")
            {
                document.getElementById("mailResponse").innerHTML           = '<img id = "img3" src = "../img/pages/contact/true.png" alt = "correct answer" >';
                document.getElementById("response").innerHTML               = response;
            }
            else
            {
                document.getElementById("mailResponse").innerHTML           = '<img src = "../img/pages/contact/error.png" alt = "wrong answer">';
                document.getElementById("response").innerHTML               = response; 
            }
        }
        else
        {
            document.getElementById("mailResponse").innerHTML = "";
        }

    }
}

return false;

}

function bCheckSubject ()
{
/* It checks if the browser can allow a http request */
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the name from the form
var subject = document.getElementsByName("subject")[0].value;
var datastring = "subject=" + encodeURIComponent ( subject );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        if ( !( xhttp.responseText == "" ))
        {
            var string      = xhttp.responseText.substr ( 0, 2 );
            var response    = xhttp.responseText.substr ( 5 );

            if ( string == "OK")
            {
                document.getElementById("subjectResponse").innerHTML        = '<img id = "img4" src = "../img/pages/contact/true.png" alt = "correct answer" >';
                document.getElementById("response").innerHTML               = response;
            }
            else
            {
                document.getElementById("subjectResponse").innerHTML        = '<img src = "../img/pages/contact/error.png" alt = "wrong answer">';
                document.getElementById("response").innerHTML               = response; 
            }
        }
        else
        {
            document.getElementById("subjectResponse").innerHTML = "";
        }

    }
}

return false;

}

function bCheckMessage ()
{
// It checks if the browser can allow a http request 
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the name from the form
var message = document.getElementById("message").value;
var datastring = "message=" + encodeURIComponent ( message );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        if ( !( xhttp.responseText == "" ))
        {
            var string      = xhttp.responseText.substr ( 0, 2 );
            var response    = xhttp.responseText.substr ( 5 );

            if ( string == "OK")
            {
                document.getElementById("messageResponse").innerHTML        = '<img id = "img5" src = "../img/pages/contact/true.png" alt = "correct answer" >';
                document.getElementById("response").innerHTML               = response;
            }
            else
            {
                document.getElementById("messageResponse").innerHTML        = '<img src = "../img/pages/contact/error.png" alt = "wrong answer">';
                document.getElementById("response").innerHTML               = response; 
            }
        }
        else
        {
            document.getElementById("messageResponse").innerHTML = "";
        }

    }
}

return false;

}

function bSubmit ()
{
// It disables the button for avoiding multiple requets
document.getElementsByName("submit")[0].disabled = true;

// It checks if the browser can allow a http request 
if ( window.XMLHttpRequest ) 
{
    xhttp = new XMLHttpRequest();
} 
else 
{
    // for IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// It takes the input from the form
var firstName   = document.getElementById("firstName").value;
var companyName = document.getElementById("companyName").value;
var email       = document.getElementById("email").value;
var subject     = document.getElementsByName("subject")[0].value;
var message     = document.getElementById("message").value;
var captcha     = document.getElementsByClassName("g-recaptcha")[0].getAttribute("data-sitekey");
var datastring  = "firstName=" + encodeURIComponent ( firstName ) + "&companyName=" + encodeURIComponent ( companyName ) +
                  "&email="    + encodeURIComponent ( email )     + "&subject="     + encodeURIComponent ( subject )     +
                  "&message="  + encodeURIComponent ( message )   + "&captcha="     + encodeURIComponent ( captcha );

// It opens the request to thye server
xhttp.open ( "POST", "../form/formValidation.php", true );

// It sets the header
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// It sends the data to the server
xhttp.send( datastring );

// It takes the responde from the server
xhttp.onreadystatechange = function() 
{
    if ( xhttp.readyState == 4 && xhttp.status == 200 ) 
    {
        // It enables the button
        document.getElementsByName("submit")[0].disabled = false;

        var string      = xhttp.responseText.substr ( 0, 2 );
        var response    = xhttp.responseText.substr ( 5 );

        if ( string == "OK")
        {
            /*vToggle(); I have commented it, in order to isolate tthe problem. */
            var dad     = document.getElementById("nameResponse");
            var son     = document.getElementById("img1");
            dad.removeChild ( son );
            dad         = document.getElementById("companyResponse");
            son         = document.getElementById("img2");
            dad.removeChild ( son );
            dad         = document.getElementById("mailResponse");
            son         = document.getElementById("img3");
            dad.removeChild ( son );
            dad         = document.getElementById("subjectResponse");
            son         = document.getElementById("img4");
            dad.removeChild ( son );
            dad         = document.getElementById("messageResponse");
            son         = document.getElementById("img5");
            dad.removeChild ( son );
        }
        else
        {
            document.getElementById("response").innerHTML           = response; 
        }
    }
}

return false;

}

function vCountChars ()
{
var MAX = 2000;
var usedChars = document.getElementById("message").value.length;
var remainChars = MAX - document.getElementById("message").value.length;
document.getElementById("count").innerHTML = "Remaining characters: " + remainChars;

if ( remainChars <= 0 )
{
    document.getElementById("message").value = document.getElementById("message").value.substr(0, MAX);
    document.getElementById("count").innerHTML = "Remaining characters: 0";
    document.getElementById("count").style.color = "red";
}
else
{
    remainChars = MAX - document.getElementById("message").value.length;
    document.getElementById("count").style.color = "#1F1787";
}

}

function vToggle ()
{
if ( document.getElementById("darkSide").style.display == "none" )
{
    document.getElementById("darkSide").style.display           = "block";
    document.getElementById("pop-up").style.display             = "block";
}
else
{
    document.getElementById("darkSide").style.display           = "none";
    document.getElementById("pop-up").style.display             = "none";

}

}

Answer 1

尝试在.js文件中添加此内容并从onClick中删除HTML：

document.getElementById('accept').onclick = vToggle;

Answer 2

詹姆斯在评论中说，他发现了这个问题。＆＃34;那你确定它被叫了吗？如果你在vtoggle中发出警报，它会显示在onload上吗？也许vtoggle处理的那些元素的默认样式不是您所期望的。＆＃34;

我检查了我的CSS，并且显示属性设置为＆＃34; block＆＃34;而不是＆＃34; none＆＃34;，因为我做了一个测试，我忘了在CSS上重新设置正确的属性。谢谢！

onclick事件，触发onload

2 个答案: