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

回答

相關問題