How to replace a submit button with a word like href...

[^Bart]

Hi everybody,

now I use this code:

<input type="submit" class="button" name="loginSubmit" value="Login">

I'd like to replace it just with the word "Log in" something like what
happens when I enable a link on another page:

<a href="#login">Log in</a>

I searched on Google but I didn't find hot to solve this "issue".

^Bart

[Jukka K. Korpela]

^Bart kirjoitti 4.1.2020 klo 17.35:

> now I use this code:
>
> <input type="submit" class="button" name="loginSubmit" value="Login">

Fine, keep using it.

> I'd like to replace it just with the word "Log in" something like what
> happens when I enable a link on another page:
>
> <a href="#login">Log in</a>

Stop wanting that. But it’s technically simple, and maybe some day
someone has good use for such an approach, so here we go...

Just use an HTML element, like <span>, and insert an event handler that
handles a click event by submitting a form, using, in JavaScript, the
submit() property of the enclosing <form> element. A trivial example:

<form id="myform" action="http://jkorpela.fi/cgi-bin/echo.cgi">
<input type="hidden" name="demo" value="42">
... (some other form fields here, presumably)
<span onclick="document.getElementById('myform').submit()">Log in</span>
</form>

I’ve included a hidden field just for testing that the data gets
submitted, and I’m using a simple server-side handler that just echoes
back the data it gets.

If you use <span>, which is a meaning-free default-formatting-free
text-level container, the user will have absolutely no visual hint of
the text being clickable, or in any way different from any normal text.
So this might be part of a guessing game, especially if the text is less
revealing. :-)

Of course, you can use CSS to style the element to look more or less
clickable, even like a submit button.

Yucca

[😉 Good Guy 😉]

How much do you know about CSS?  Try this code:

.button {

            background-color: transparent;

            color: blue;

            border-color: white;

            border-style: none;

        }< /span>

--

With over 1.2 billion devices now running Windows 10, customer satisfaction is higher than any previous version of windows.

[JJ]

If you want to keep the `loginSubmit` form field with value of `Login`, then
you'll have to use BUTTON element like this.

<button type="submit" class="button" name="loginSubmit" value="Login>
Log in
</button>

[^Bart]

> If you want to keep the `loginSubmit` form field with value of `Login`, then
> you'll have to use BUTTON element like this.
>
> <button type="submit" class="button" name="loginSubmit" value="Login>
> Log in
> </button>

It's the same thing as input, I need to replace a button with the word
Log in

^Bart

[^Bart]

> How much do you know about CSS?  Try this code:

Usually I store *.css code in an external file, I know about it just few
things...

>> .button {
>> background-color: transparent;
>> color: blue;
>> border-color: white;
>> border-style: none;
>>         }< /span>

I don't know if I could store it in an external file and what I should
replace where I have:

<input type="submit" class="button" name="loginSubmit" value="Login">

^Bart

[^Bart]

> <form id="myform" action="http://jkorpela.fi/cgi-bin/echo.cgi">
> <input type="hidden" name="demo" value="42">
> ... (some other form fields here, presumably)
> <span onclick="document.getElementById('myform').submit()">Log in</span>
> </form>

<form id="login" method="post" action="" name="login">
<div class="topnav" align="center">
<input type="text" name="usernameEmail" autocomplete="off"
placeholder="Email or Username"/>
<input type="password" name="password" autocomplete="off"
placeholder="Password"/>
<span onclick="document.getElementById('login').submit()">Log in</span>
<div class="errorMsg"><?php echo $errorMsgLogin; ?></div>
</div>
</form>

It doesn't work! :\

And here below there's my working code:

<form method="post" action="" name="login">
<div class="topnav" align="center">
<input type="text" name="usernameEmail" autocomplete="off"
placeholder="Email or Username"/>
<input type="password" name="password" autocomplete="off"
placeholder="Password"/>

<input type="submit" class="button" name="loginSubmit" value="Login">

<div class="errorMsg"><?php echo $errorMsgLogin; ?></div>
</div>
</form>

> Of course, you can use CSS to style the element to look more or less
> clickable, even like a submit button.

I found something about it on internet, I could try to use it!

> Yucca

Thanks for your reply! :)
^Bart

[JJ]

The selector in the CSS code should be:

form input.button {
/* css code... */
}

But preferrably, the INPUT HTML element should have a more specific
identifier. e.g.

<input type="submit" class="button submit" name="loginSubmit" value="Login">

So that the CSS code would be:

form .submit {
/* css code... */
}

i.e. only select the form's submit element, instead of form's button element
which may not be the submit button.

[JJ]

Both of those code should work, but keep in mind that with those forms, the
form data will be submitted to the form page, instead of a login page.

What doesn't work, actually?
What are you expecting, and what was the result?

[^Bart]

> Both of those code should work, but keep in mind that with those forms, the
> form data will be submitted to the form page, instead of a login page.

I thought to store the login form in the main page and when I clic on
submit it will show a css login in the middle of the page, is it wrong
if you'd like to have a good code?

> What doesn't work, actually?

<form id="login" method="post" action="./home.php" name="login">
<a href="#about-us">About us</a>
<a href="#help">Help</a>
<a href="#language">Language</a>

<input type="text" name="usernameEmail" autocomplete="off"
placeholder="Email or Username"/>
<input type="password" name="password" autocomplete="off"
placeholder="Password"/>
<span onclick="document.getElementById('login').submit()">Log in</span>
<div class="errorMsg"><?php echo $errorMsgLogin; ?></div>
</div>
</form>

I wrote in the action tag "./home.php", this should be loaded after the
login, when I use the tag:

<input type="submit" class="button" name="loginSubmit" value="Login">

the action value is not set.

> What are you expecting, and what was the result?

I need to be redirected to the home.php:

<?php
include('config.php');
include('session.php');
$userDetails=$userClass->userDetails($session_user_id);
print_r($userDetails);
?>
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<h1>Welcome <?php echo $userDetails->name; ?></h1>

<h4><a href="<?php echo BASE_URL; ?>logout.php">Logout</a></h4>
</body>
</html>

Thanks for your replies! :)
^Bart

[JJ]

On Sat, 11 Jan 2020 11:06:15 +0100, ^Bart wrote:
>> Both of those code should work, but keep in mind that with those forms, the
>> form data will be submitted to the form page, instead of a login page.
>
> I thought to store the login form in the main page and when I clic on
> submit it will show a css login in the middle of the page, is it wrong
> if you'd like to have a good code?

If the login form is in the main page, i.e. in `home.php`, then `home.php`
must be able to serve two versions of the home page for: [1] unlogged-in
users, and [2] logged in users. Also, because your form is designed to be
submitted to `home.php`, then `home.php` must also handles the login
authentication. i.e. it must first check whether client request is using
`GET` or `POST` which is to indicate a normal page request, or a login
request (as per your design).

>> What doesn't work, actually?
>

[snip]

>
> I wrote in the action tag "./home.php", this should be loaded after the
> login, when I use the tag:
>
> <input type="submit" class="button" name="loginSubmit" value="Login">
>
> the action value is not set.
>
>> What are you expecting, and what was the result?
>
> I need to be redirected to the home.php:

[snip]

Keep in mind that your form design is to submit to `home.php`, so there's
actually no need to redirect to `home.php`, because when the form is
submitted, it's already there at `home.php`.

If you think you need to use redirection, then you musn't design the form to
submit to `home.php`. It must be other page. e.g. `login.php` - where it
authenticates the login data. If it's a valid login, then it should redirect
to `home.php`. Otherwise, it should redirect to a login error page, e.g.
`login-error.php`. i.e. each page has its own task.

If you put everything in a single PHP page, then all tasks must be in the
same page. Meaning that the single PHP page must be made smart enough to
differentiate what kind request the client wants, then provide a result
based on the request.

[MyNews Hot-Text]

"^Bart" <gabriel...@hotmail.com> wrote in message
news:quqbck$iu8$1...@gioia.aioe.org...

<A accessKey=o
href=https://en.wikipedia.org/w/index.php?title=Special:UserLogin&amp;returnto=wikipedia
title="You're encouraged to log in; however, it's not mandatory.
[alt-shift-o]" style="BACKGROUND: none transparent scroll repeat 0% 0%;
COLOR: rgb(11,0,128); TEXT-DECORATION: underline"> Log in</A>

It Enable A Link On Another Page