The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
 Reply to this topicStart new topic
> Use image as submit button, How to use a graphic as a submit button
The-Yikes
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post May 27 2020, 04:04 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
There's input type="image".

https://htmlhelp.com/reference/html40/forms/input.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 27 2020, 04:52 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,648
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The-Yikes
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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">
                       ^^^
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The-Yikes
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 07:15 AM
Post #9


.
********

Group: WDG Moderators
Posts: 9,648
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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 07:24 AM
Post #11


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The-Yikes
post May 28 2020, 07:34 AM
Post #12





Group: Members
Posts: 6
Joined: 27-May 20
Member No.: 27,365
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The-Yikes
post May 28 2020, 08:46 AM
Post #14





Group: Members
Posts: 6
Joined: 27-May 20
Member No.: 27,365
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 10:15 AM
Post #15


.
********

Group: WDG Moderators
Posts: 9,648
Joined: 10-August 06
Member No.: 7
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
The-Yikes
post 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!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 02:27 PM
Post #17


.
********

Group: WDG Moderators
Posts: 9,648
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;}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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? mad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 28 2020, 05:13 PM
Post #19


.
********

Group: WDG Moderators
Posts: 9,648
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" />

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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 16th April 2024 - 08:17 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC