Printable Version of Topic
Click here to view this topic in its original format
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:
<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:
<?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.
^^^
Posted by: The-Yikes May 28 2020, 06:33 AM
Thanks Pandy! I changed the line to read the following
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:
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
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
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
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
to
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
I then changed the line
The equal sign is still missing.
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
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:
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
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)