Printable Version of Topic
HTMLHelp Forums _ General Web Design _ Use image as submit button
Posted by: The-Yikes May 27 2020, 03:49 PM
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!
Posted by: pandy May 27 2020, 04:04 PM
There's input type="image".
https://htmlhelp.com/reference/html40/forms/input.html
Posted by: Christian J May 27 2020, 04:52 PM
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.
Posted by: pandy May 27 2020, 05:00 PM
Ack, I only saw the last submit button.
Posted by: The-Yikes May 28 2020, 06:01 AM
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.
Posted by: pandy May 28 2020, 06:14 AM
There's an equal sign missing here.
CODE
<input type="image" name"submit_btn" src="button1.jpg" alt"Submit">
^^^
Posted by: The-Yikes May 28 2020, 06:33 AM
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!
Posted by: pandy May 28 2020, 07:15 AM
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.
Posted by: Christian J May 28 2020, 07:15 AM
Try something like this PHP:
CODE
echo '<pre>';
print_r($_POST);
echo '</pre>';
to make sure the form data is submitted properly.
Posted by: pandy May 28 2020, 07:18 AM
Why do you want two buttons doing the same thing BTW?
Posted by: Christian J May 28 2020, 07:24 AM
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
Posted by: The-Yikes May 28 2020, 07:34 AM
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
Posted by: 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.
Posted by: The-Yikes May 28 2020, 08:46 AM
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?
Posted by: Christian J May 28 2020, 10:15 AM
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.
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.
Posted by: The-Yikes May 28 2020, 10:21 AM
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!!
Posted by: Christian J May 28 2020, 02:27 PM
Try adding this to the page's (or site's) stylesheet:
CODE
button[name=submit_btn] {border: 0; padding: 0;}
Posted by: pandy May 28 2020, 04:43 PM
But WHY doesn't the image submit work?
Posted by: Christian J May 28 2020, 05:13 PM
From https://www.php.net/manual/en/language.variables.external.php#language.variables.external.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.
Posted by: pandy May 28 2020, 06:33 PM
¡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.
Posted by: pandy May 28 2020, 08:11 PM
Ay, I get it. I didn't realize the OPs script actually looks for submit_btn.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)