Use image as submit button, How to use a graphic as a submit button |
Use image as submit button, How to use a graphic as a submit button |
The-Yikes |
May 27 2020, 03:49 PM
Post
#1
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
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 |
May 27 2020, 04:04 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
|
Christian J |
May 27 2020, 04:52 PM
Post
#3
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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 |
May 27 2020, 05:00 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Ack, I only saw the last submit button.
|
The-Yikes |
May 28 2020, 06:01 AM
Post
#5
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
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 |
May 28 2020, 06:14 AM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
There's an equal sign missing here.
CODE <input type="image" name"submit_btn" src="button1.jpg" alt"Submit"> ^^^ |
The-Yikes |
May 28 2020, 06:33 AM
Post
#7
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
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 |
May 28 2020, 07:15 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
May 28 2020, 07:15 AM
Post
#9
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Try something like this PHP:
CODE echo '<pre>'; print_r($_POST); echo '</pre>'; to make sure the form data is submitted properly. |
pandy |
May 28 2020, 07:18 AM
Post
#10
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Why do you want two buttons doing the same thing BTW?
|
Christian J |
May 28 2020, 07:24 AM
Post
#11
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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 |
May 28 2020, 07:34 AM
Post
#12
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
|
pandy |
May 28 2020, 07:37 AM
Post
#13
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
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 |
May 28 2020, 08:46 AM
Post
#14
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
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 |
May 28 2020, 10:15 AM
Post
#15
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
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. |
The-Yikes |
May 28 2020, 10:21 AM
Post
#16
|
Group: Members Posts: 6 Joined: 27-May 20 Member No.: 27,365 |
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 |
May 28 2020, 02:27 PM
Post
#17
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
Try adding this to the page's (or site's) stylesheet:
CODE button[name=submit_btn] {border: 0; padding: 0;} |
pandy |
May 28 2020, 04:43 PM
Post
#18
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
But WHY doesn't the image submit work?
|
Christian J |
May 28 2020, 05:13 PM
Post
#19
|
. Group: WDG Moderators Posts: 9,650 Joined: 10-August 06 Member No.: 7 |
From https://www.php.net/manual/en/language.vari...nal.form.submit:
"<input type="image" src="image.gif" name="sub" /> ...so when the PHP script checks for CODE $_POST['submit_btn'] it never returns true. The print_r() function should reveal this. |
pandy |
May 28 2020, 06:33 PM
Post
#20
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
¡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.
|
Lo-Fi Version | Time is now: 18th April 2024 - 05:37 AM |