Fatal编程技术网
  • javascript/
  • Javascript 忽略按钮JS函数/发送到Php_操作

Javascript 忽略按钮JS函数/发送到Php_操作

javascript html

Javascript 忽略按钮JS函数/发送到Php_操作,javascript,html,Javascript,Html,我目前正在通过apache使用本地服务器运行我的网站。在我的网站上，当点击“登录”按钮时，一个弹出屏幕会扩展为两个按钮（一个使用谷歌登录，一个使用facebook）。到目前为止，我已经尝试编写了当点击google按钮时调用的JS函数。但是，当我现在单击它时，它会将我指向一个新页面，并显示消息“此服务器上未找到请求的URL/action_page.php” 我认为这与我的html页面的混乱组织有关： <html> <head> <title>Columb

我目前正在通过apache使用本地服务器运行我的网站。在我的网站上，当点击“登录”按钮时，一个弹出屏幕会扩展为两个按钮（一个使用谷歌登录，一个使用facebook）。到目前为止，我已经尝试编写了当点击google按钮时调用的JS函数。但是，当我现在单击它时，它会将我指向一个新页面，并显示消息“此服务器上未找到请求的URL/action_page.php”

我认为这与我的html页面的混乱组织有关：

  <html>
<head>
  <title>Columbia Ride Share</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
  <header> 
       <h1 class = "page-title">Columbia Ride Share</h1>
       <nav>
           <ul>
               <li><a href="index.html">home</a></li>
               <li><a href="">create a ride</a></li>
               <li class = "login">
                   <button onclick = "document.getElementById('id01').style.display='block'"style="width:auto;">Login</button>
               </li>
               <div id="id01" class="modal">
                   <form class="modal-content animate" action="action_page.php">
                       <div class="imgcontainer">
                           <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                            </div>
                           <div class="loginMsg">
                               <p>hi there!</p>
                               <p>log in to post and comment on columbia ride share</p>
                           </div> 
                           <button class="loginBtn loginBtn--facebook">connect with facebook</button>
               <button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google     </button>
                    </form>
               </div>

           </ul>
       </nav>
  </header>
  <div class="container">
    <div class="main">
        <div class = "JFK">
            <h6>JFK</h6>
               <p> <a href = "ridesToJFK.html">to</a>
                   <a href = "#">from</a></p>
        </div>
        <div class = "JFK">
           <h6>NEWARK</h6>
                <p> <a href = "ridesToJFK.html">to</a>
                <a href = "#">from</a></p>
        </div>
        <div class = "bottomRow">
           <h6>LAGUARDIA</h6>
                <p> <a href = "ridesToJFK.html">to</a>
                <a href = "#">from</a></p>
        </div>
           <div class = "bottomRow">
              <button class = "button" onclick = "document.getElementById('id02').style.display='block'"style="width:auto;">CREATE A RIDE</button>
           </div>    
               <div id="id02" class="modal">
              <form class="modal-content animate" action="action_page.php">
              <div class="imgcontainer">
                           <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
                      </div>
              <div class = "loginMsg">
                      <p>Where are you headed?<p>
                          <a href="create-a-ride.html">I need a ride to the airport</a>
                          <a href="create-a-ride.html">I need a ride to campus</a>
                      </div>
           </form>
               </div>
            </div>
       </div>

<script src="https://www.gstatic.com/firebasejs/3.6.8/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIzaSyAIY9XOb5QVDTxJKxtvSZRiyqgpGasHF3M",
    authDomain: "columbia-ride-share.firebaseapp.com",
    databaseURL: "https://columbia-ride-share.firebaseio.com",
    storageBucket: "columbia-ride-share.appspot.com",
    messagingSenderId: "1058399238109"
  };
  firebase.initializeApp(config);
</script>

<script src = "app.js"></script>
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

<script> 
var modal = document.getElementById('id02');

window.onclick= function(event){

    if(event.target == modal) {
        modal.style.display = "none";
    }
}
</script>


</body>
</html>
我能做些什么更改，使其触发googleSignIn函数而不是查找action_page.php？

这很可能是正在发生的事情-您使用的是
元素，当您单击表单中的按钮时，默认操作是提交页面，您已将该页面设置为
action_page.php
。您应该能够使用
event.preventDefault（）调整按钮的单击处理程序
来禁用页面上的默认操作，而是让javascript函数处理单击

如果您可以将代码发布到jsfiddle页面，则可以提供进一步的测试。

因此，如果您不允许我共享jsfiddle页面，是否有其他方法可以在测试环境中将我的代码借给他人？是的！只需将event.preventDefault（）放在googleSignIn函数的第一行，它就可以正常工作！ 
<div id="id01" class="modal">
                   <form class="modal-content animate" action="action_page.php">
                       <div class="imgcontainer">
                           <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
                            </div>
                           <div class="loginMsg">
                               <p>hi there!</p>
                               <p>log in to post and comment on columbia ride share</p>
                           </div> 
                           <button class="loginBtn loginBtn--facebook">connect with facebook</button>
               <button onclick = "googleSignin()" class="loginBtn loginBtn--google">connect with google     </button>
                    </form>
               </div>

 function googleSignin(){
        var provider = new firebase.auth.GoogleAuthProvider();
        firebase.auth().signInWithRedirect(provider);
        console.log('bitch ok');
    }

    firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
    // This gives you a Google Access Token. You can use it to access the Google API.
            var token = result.credential.accessToken;
    // ...
        }
        // The signed-in user info.
        var user = result.user;
        }).catch(function(error) {
       // Handle Errors here.
           var errorCode = error.code;
           var errorMessage = error.message;
          // The email of the user's account used.
           var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
           var credential = error.credential;
          // ...
       });