CODEWITHSUNDEEP
htmlcsshyperlink
greenpool
greenpool

Reputation: 561

PHP and css link button

instead of boring button i decided to style a link button for my login page. Only thing is I'm not sure how to get it to work.

Here's the code before the link button:

 <div id="centerDoc">
    <div id="loginScreen">
     <table width="400" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
    <form name="form1" method="post" action="">
    <td>
    <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
    <tr>
    <td colspan="3"><strong>User Login </strong></td>
    </tr>
    <tr>
    <td width="78">Username</td>
    <td width="6">:</td>
    <td width="294"><input name="username" type="text" id="username"></td>
    </tr>
    <tr>
    <td>Password</td>
    <td>:</td>
    <td><input name="password" type="password" id="password"></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="submit" name="login" value="Login"></td>

    </tr>
    <tr><td colspan="3"><?php   require_once 'checkLogin.php';   ?></td></tr>
    </table>
    </td>

    </form>

So the only difference is instead of:

<td><input type="submit" name="login" value="Login"></td>

I've added:

<td><a href="#" class="loginButton" name="login" value="login">Log in</a></td>

But as i suspected it doesn't do anything. How can i fix this? Thanks.

EDIT: I'd like to use a custom css button instead of the default button. My understanding was that this needs to be done with a link button. But I also need to get the post event so that checkLogin.php can do the necessary processing by doing the isset test if (isset($_POST['login'])){. Hope that makes sense.

Upvotes: 0

Views: 2837

Answers (3)

topherg
topherg

Reputation: 4293

You can style an input to look nice, but for a link, you will need to include the following attribute:

onclick="document.forms[0].submit(); return false;"

You also might not need the name or value attributes depending on the rest of your code.

Upvotes: 4

Samundra
Samundra

Reputation: 1909

you also need to do have definition for the loginButton as

.loginButton {
    display:block;
    width:90px;
    height:50px;
    background:#ccc;
}

and this needs to be loaded in the page as well.

<html>
<head>
<title>Test</title>
<style>
.loginButton {
    display:block;
    width:90px;
    height:50px;
    background:#ccc;
}
</style>
</head>
<body>
   <a href="#" class="loginButton" name="login" value="login">Log in</a>
</body>

The above sample should work for you.

Upvotes: 0

This_is_me
This_is_me

Reputation: 918

quick google search on "javascript form submit"

<form name="myform" action="handle-data.php">
Search: <input type='text' name='query' />
<a href="javascript: submitform()">Search</a>
</form>
<script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
</script>

Edit: cgoddard's solution is nicer

Upvotes: 1

Related Questions