CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
alexfigtree
alexfigtree

Reputation: 1546

two buttons referencing similar functions not working on html and javascript ajax

I have a question that I'm pretty sure is basic, but can't seem to find the answer to it anywhere. I have an html page with two buttons. Ideally, I would have them show/do two different things (both are popup windows), but I find that I can't even get the second button to work when they share the exact same code.

Here's the code (I've omitted the 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>

All I did was change the following for the second (contact) button: div id, form id, form name (all from <!--Login--> to <!--Contact-->). What I noticed when I loaded my page was that the first (login) button worked just fine, but when I closed its dialog box and pressed the second (contact) button, nothing would happen, but the following would show up on my url:

...login.php#contactmodal

(vs the original url of ...login.php)

Could someone please tell me what's going on, and why my second button isn't working? Also, because I'm a beginner, any opinions on style or syntax are appreciated as well.

Upvotes: 0

Views: 249

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You have 2 elements with the same ID modaltrigger, ID of elements must be unique in a page.

Use class attribute instead to group similar elements.

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

then

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

Upvotes: 2

Related Questions