Help - Search - Members - Calendar
Full Version: Use image as submit button
HTMLHelp Forums > Web Authoring > General Web Design
The-Yikes
Hi! I'm hoping someone here can help me out.

I'm trying to use an image as a submit button which in turn loads a php script.
Here's what I have

HTML File:
CODE

<html>

<head>
<title>No title</title>
<meta name="generator">
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<form name="form1" method="post" action="post.php">
    <p> </p>
    <table border="1" width="407">
        <tr>
            <td width="200">
                <p><input type="text" name="name"></p>
            </td>
            <td width="191">
                <p><input type="text" name="pwd"></p>
                <p><input type="image" name"submit_btn" src="button1.jpg" alt"Submit"></p>
                <p></p>
                </td>        </tr>
        <tr>
            <td width="397" colspan="2"><input type="submit" name="submit_btn"></td>
        </tr>
    </table>
</form>
<p> </p>
</body>

</html>


And here's what i have for the php:
CODE

<?php

if(isset($_POST['submit_btn']))
{
  $username = $_POST['name'];
  $password = $_POST['pwd'];
  $text = $username . "," . $password . "\n";
  $fp = fopen('data.txt', 'a+');

    if(fwrite($fp, $text))  {
        echo 'saved';
    
    }
fclose ($fp);    
}
?>
<html>


It works fine with a standard Submit button.

I would really appreciate any little bit of help you can offer!
pandy
There's input type="image".

https://htmlhelp.com/reference/html40/forms/input.html
Christian J
In what way doesn't it work?

I see both an image submit button and a regular submit button in the code example (both with the same NAME value), and both worked for me when I tested with a GET form submission.
pandy
Ack, I only saw the last submit button. sad.gif
The-Yikes
Christian jay you asked in which does it not work. If I have a standard submit button the form writes the user data to a text file, but when I use the image as a submit button it loads the next screen but doesn't write the data to the text file.
pandy
There's an equal sign missing here.

CODE
<input type="image" name"submit_btn" src="button1.jpg" alt"Submit">
                       ^^^
The-Yikes
Thanks Pandy! I changed the line to read the following

CODE
               <p><input type="image" name="submit_btn" src="button1.jpg"></p>


But it'still not working. It loads the next page but it's not writing to the text file.

P.s thanks for the quick reply!
pandy
Hmm. Could it be that different names have to be used? The typical situation is you WANT different names to be able to know which button was pushed. I don't know, just a thought. Do you know, Christian?

BTW, the equal sign for alt is missing too, in the same tag. I didn't notice.
Christian J
Try something like this PHP:

CODE
echo '<pre>';
print_r($_POST);
echo '</pre>';

to make sure the form data is submitted properly.


pandy
Why do you want two buttons doing the same thing BTW?
Christian J
QUOTE(pandy @ May 28 2020, 02:15 PM) *

Hmm. Could it be that different names have to be used? The typical situation is you WANT different names to be able to know which button was pushed. I don't know, just a thought. Do you know, Christian?

Other form elements (like radio buttons) can have identical names (and you tell them apart by their VALUE attributes). Haven't found anything in the specs yet about submit buttons, but some online examples do use identical names, e.g. here: https://stackoverflow.com/a/547848
The-Yikes
QUOTE(pandy @ May 28 2020, 07:18 AM) *

Why do you want two buttons doing the same thing BTW?

I don't need two buttons i only need one, i just kept it to use for reference
pandy
Thanks, Christian. Thought so, but I wasn't sure.

Anyway, just for the sake of it, delete the ordinary submit button and see if it works with only the image submit.
The-Yikes
QUOTE(pandy @ May 28 2020, 07:37 AM) *

Thanks, Christian. Thought so, but I wasn't sure.

Anyway, just for the sake of it, delete the ordinary submit button and see if it works with only the image submit.


Pandy i deleted the button but it didn't work. I then changed the line
CODE
<input type="image" name"submit_btn" src="button1.jpg" alt"Submit"></p>


to

CODE
<button type="submit" name="submit_btn"><img src="buttonlogin.jpg" border="0" /></button></p>

Which worked.

it's good but is there a way to remove the grey border?
Christian J
QUOTE(The-Yikes @ May 28 2020, 03:46 PM) *

I then changed the line
CODE
<input type="image" name"submit_btn" src="button1.jpg" alt"Submit"></p>


The equal sign is still missing. smile.gif

QUOTE
to

CODE
<button type="submit" name="submit_btn"><img src="buttonlogin.jpg" border="0" /></button></p>

Which worked.

it's good but is there a way to remove the grey border?

You can remove the border and padding from the button element with CSS.
The-Yikes
QUOTE

You can remove the border and padding from the button element with CSS.


Thanks Christian J but that's a bit beyond my skills!!
Christian J
Try adding this to the page's (or site's) stylesheet:

CODE
button[name=submit_btn] {border: 0; padding: 0;}

pandy
But WHY doesn't the image submit work? mad.gif
Christian J
From https://www.php.net/manual/en/language.vari...nal.form.submit:

"<input type="image" src="image.gif" name="sub" />

When the user clicks somewhere on the image, the accompanying form will be transmitted to the server with two additional variables, sub_x and sub_y. These contain the coordinates of the user click within the image. The experienced may note that the actual variable names sent by the browser contains a period rather than an underscore, but PHP converts the period to an underscore automatically."

...so when the PHP script checks for

CODE
$_POST['submit_btn']

it never returns true. The print_r() function should reveal this. wink.gif
pandy
¡Ay caramba! I don't understand that. What has the conversion of periods to underscores in those coordinate variables to do with the form not being submitted? Those variables aren't even used by the script that I can see. wacko.gif
pandy
Ay, I get it. I didn't realize the OPs script actually looks for submit_btn.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.