引用類似功能的兩個按鈕不能用於html和javascript ajax

Question

我有一個問題，我很確定是基本的，但似乎無法在任何地方找到答案。 我有一個帶有兩個按鈕的html頁面。 理想情況下，我會讓他們顯示/做兩個不同的事情（都是彈出窗口），但我發現當他們共享完全相同的代碼時，我甚至無法使第二個按鈕工作。

這是代碼（我省略了css）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8"/>
<center>
    <nav>
        <a href="#loginmodal" class="flatbtn" id="modaltrigger">LOGIN</a>
        <a href="#contactmodal" class="flatbtn" id="modaltrigger">CONTACT</a>
    </nav>
</center>

<!--script for checklogin--> 
<script type = "text/javascript">

    function checkLogin(){
        //All this (index.php, validate.js, and login.php) taken from: /*http://stackoverflow.com/questions/15513031/authentication-using-ajax-php*/  
        var u = document.getElementById("username").value;
        var p = document.getElementById("password").value;
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                if(xmlhttp.responseText == u){
                    alert(':)');
                }
                else{
                    alert(':(');               
                }
            }
        }
        xmlhttp.open("GET", "checkpw.php?u=" + u + "&p=" + p, true);
        xmlhttp.send(); 
    }
    function newUser(){
        location.href = 'signup.php';
    }
</script>
</head>

<body>
<center>

<!--Login-->
<div id="loginmodal" style="display:none;">
  <logh1>Sign In</logh1>
  <form id="loginform" name="loginform" method="post" action="index.html">
    <label for="username"><h2>Username:</h2></label>
    <input type="text" name="username" id="username" class="txtfield" tabindex="1">
    <label for="password"><h2>Password:</h2></label>
    <input type="password" name="password" id="password" class="txtfield" tabindex="2">

  <div class="center">

  <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" onclick="checkLogin(); return false;" tabindex="3">
  <input type="submit" name="newusrbtn" id="create-user"" class="flatbtn-blu hidemodal" value="New User" onclick="newUser();" tabindex="4">
  </div>
  </form>
</div>

<!--Contact-->
<div id="contactmodal" style="display:none;">
  <logh1>Sign In</logh1>
  <form id="contactform" name="contactform" method="post" action="index.html">
    <label for="username"><h2>Username:</h2></label>
    <input type="text" name="username" id="username" class="txtfield" tabindex="1">
    <label for="password"><h2>Password:</h2></label>
    <input type="password" name="password" id="password" class="txtfield" tabindex="2">

  <div class="center">

  <input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" onclick="checkLogin(); return false;" tabindex="3">
  <input type="submit" name="newusrbtn" id="create-user"" class="flatbtn-blu hidemodal" value="New User" onclick="newUser();" tabindex="4">
  </div>
  </form>
</div>
</center>

<script type="text/javascript">
    $(function(){
      $('#loginform').submit(function(e){
        return false;
      });

    $('#contactform').submit(function(e){
        return false;
      });

      $('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
    });
</script>
</body>
</html>

我所做的就是更改第二個（聯系人）按鈕的以下內容：div id，表單id，表單名稱（全部來自到 ）。 我加載頁面時注意到的是第一個（登錄）按鈕工作正常，但是當我關閉其對話框並按下第二個（聯系人）按鈕時，什么都不會發生，但以下內容將顯示在我的網址上：

...login.php#contactmodal

（vs ... login.php的原始網址）

有人可以告訴我發生了什么，為什么我的第二個按鈕不起作用？ 另外，因為我是初學者，所以對風格或語法的任何看法都會受到贊賞。

Answer 1

您有2個具有相同ID modaltrigger的元素，元素ID在頁面中必須是唯一的。

使用class屬性來分組相似的元素。

    <a href="#loginmodal" class="flatbtn modaltrigger">LOGIN</a>
    <a href="#contactmodal" class="flatbtn modaltrigger">CONTACT</a>

然后

$('.modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });

引用類似功能的兩個按鈕不能用於html和javascript ajax

問題描述

1 個解決方案

解決方案1
2 已采納 2013-09-14 01:11:32

引用類似功能的兩個按鈕不能用於html和javascript ajax

問題描述

1 個解決方案

解決方案1 2 已采納 2013-09-14 01:11:32

解決方案1
2 已采納 2013-09-14 01:11:32