onclick事件，触发onload

我试图模拟一个弹出消息，当表单被正确提交时应该显示该消息。我编写的代码是有效的，但是我的Javascript函数模拟弹出窗口，由于某种原因也在窗口加载时调用。我张贴代码，希望你能帮忙找到我的错误：onclick事件，触发onload

页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"; 

}

}

来源

2017-07-19 Francesco

如果正在调用onload，则您在某处调用vToggle，但它不在您发布的代码中。 – James

唯一的调用vToggle（）函数是在“输入”和onclick事件。标签没有onload事件或功能。 – Francesco

我也尝试将名称从vToggle（）更改为vTogglePopup（），只是为了确保没有其他函数具有相同的名称（并且没有）。它仍然发生。 – Francesco

尝试在.js文件中添加这一点，从您HTML删除onClick：

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

来源

2017-07-19 14:29:39 Kevin

我试过了，但它仍然被调用onload（我冲刷浏览器缓存并检查.js文件被更新）。 – Francesco

@Francesco我已经用新的解决方案更新了我的代码，看看这是否有效。这将取代我之前建议的'addEventListener'，但是你仍然会将'onClick'离开HTML（就像一般的编程习惯一样，我发现你最好把所有的事件调用放在'.js'文件中，而不是HTML）。 – Kevin

詹姆斯发现了这个问题，因为他在他的评论说。 “然后你确定它是被调用的吗？如果你在vtoggle中显示一个警报，它显示在onload上吗？也许这些元素的默认样式不是你想要的。”

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

来源

2017-07-19 15:11:35 Francesco

onclick事件，触发onload

回答

相关问题