jquery mobile and php headers break buttons on next page

Question

I am making a login php file that uses headers to redirect different types of users and when ever it redirects the user to their specific page the buttons on the page become un-clickable. Will you help me?

Login HTML:

 <form action="login-all.php" method="POST">
         <lable>Login:</lable>
         <input type="text" id="name" name="name" placeholder="First Name"/>
         <input type="password" id="pass" placeholder="Password" name="pass"/>
         <button type="submit">Log-In</button>

 </form>

PHP:

if($role === '1' ) { //1 admin - 0 user
          header('Location: admin.php');
          //echo "admin";
      }else{
          header('Location: user.php');
          //echo "user";

      }

Buttons on User.php (not working from header redirect)

 <a href="#input"><button>Input</button></a>
 <a href="#submit"><button>Submit</button></a>

Answer 1

Wrapping a button with an anchor tag doesn't work (See: http://jsbin.com/ekozud/1/). Instead, you need to add event listeners to the click event of each of the buttons with javascript:

 <button id="google">Go to Google</button>

 <script>
 function goToGoogle() {
     document.location = 'http://www.google.com';
 }

 if(document.addEventListener) {
     document.getElementById('google').addEventListener('click', goToGoogle);
 } else {
     document.getElementById('google').attachEvent('onclick', goToGoogle);
 }
 </script>

Of course the problem with this approach is that if the client doesn't have js (or doesn't have it enabled), these buttons will not work. I suggest instead using an anchor with no buttons and styling the links to look like buttons (if you really need the button look).