Question

我目前正在通过apache使用本地服务器运行我的网站。在我的网站上，当＆＃34;登录＆＃34;单击按钮，弹出屏幕展开两个按钮（一个使用谷歌登录，一个使用Facebook）。到目前为止，我尝试编写单击google按钮时调用的JS函数。但是，当我现在点击它时，它会将我引导到一个新页面，其中包含消息＆＃34;在此服务器上找不到请求的URL /action_page.php。＆＃34;

我认为这与我的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>

亮点版本：

<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>

这是我的app.js：

 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;
          // ...
       });

我可以更改哪些内容，以便触发googleSignIn函数而不是查找action_page.php？

Answer 1

这很有可能发生了什么 - 您正在使用<form>元素，单击表单中的按钮时的默认操作是提交您已设置为{{1 }}。您应该可以使用action_page.php调整按钮的单击处理程序，以禁用页面上的默认操作，而是使javascript函数处理单击。

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

按钮JS函数被忽略/发送到Php_Action

1 个答案: