PHP and css link button

Question

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.

@Mischa: i believe this question is related to PHP since the button click needs to send a post event to checkLogin.php — greenpool
– greenpool, Commented Aug 28, 2012 at 12:49
It's still not really about PHP, but after your edit there's at least some PHP code. Feel free to edit the tag back in. — Mischa
– Mischa, Commented Aug 28, 2012 at 13:04

topherg · Accepted Answer · 2012-08-29 08:52:47Z

4

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.

edited Aug 29, 2012 at 8:52

answered Aug 28, 2012 at 11:40

topherg

4,3314 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

greenpool Over a year ago

Hey thanks. I tried the following: <td><a href="#" class="loginButton" onClick="return document.forms[0].submit()">Log in</a></td> Which doesn't work. Am I missing something else?

topherg Over a year ago

did you try replacing the forms[0] with forms['form1']? If that doesn't work, is there an example of the script site?

greenpool Over a year ago

yeah not having any luck with that either. Note that I also have <tr><td colspan="3"><?php require_once 'checkLogin.php'; ?></td></tr> so its all processed on the same page. in checkLogin.php i'm checking if (isset($_POST['login'])){ Which now suggests its not gonna work. I'm just not sure what modifications I need to make here..

Mischa Over a year ago

You have to add a hidden field to your form: <input type="hidden" name="login" value="1">. Then the solution above should work.

topherg Over a year ago

@greenpool actually, I think I erred on that one, it should have a separate command after submit() that is return false;. The return is a true or false as to whether default browser behaviour (in this case, follow href) will take place as well.

|

This_is_me · Accepted Answer · 2012-08-28 11:42:45Z

1

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

answered Aug 28, 2012 at 11:42

This_is_me

9181 gold badge9 silver badges20 bronze badges

Comments

Samundra · Accepted Answer · 2012-08-28 11:53:51Z

0

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.

answered Aug 28, 2012 at 11:53

Samundra

1,91517 silver badges28 bronze badges

1 Comment

Samundra Over a year ago

So, have your got your answer or you are still having trouble.

Collectives™ on Stack Overflow

PHP and css link button

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related