Jump to content

Using Image As Submit Button


justlukeyou

Recommended Posts

Hi,

 

I am trying to using an image as the submit but I cant get it to work, I have tried around ten different options but when I click the image not happens. (It works with plain submit button).  Can anyone advise please.  I cant quite believe I cant get it to work.  Do I need to change the form action?

 

<form action="" method="post">

----form----

<input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >

Link to comment
https://forums.phpfreaks.com/topic/232223-using-image-as-submit-button/
Share on other sites

Hi,

 

I dont know to be honest.  I had a good look around the internet and found lots of example which just use, can you advise how I check how the submit button is being used? Can you advise what I can try next?

 

<input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >

 

 

Being as your form submits to self... (this is just for testing)

 

1. put a hidden field in your form with some name and value

2. at the top of your script put an IF statement to see if the hidden field is set.

 

 

--------------

re:src use in input tag - http://www.google.com/#sclient=psy&hl=en&q=using+an+image+as+a+submit+button&aq=1&aqi=g5&aql=&oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=f05d2ab524568127

and input tag does not have a src attribute

 

I believe you're looking for the img tag

<img src="http://www.domain.co.uk/images/homepageregister.PNG" />

and if you want it to be the submit button, use some JavaScript in there

<img src="http://www.domain.co.uk/images/homepageregister.PNG" onClick="submit()"/>

 

http://www.w3schools.com/tags/att_input_type.asp

 

it does for type="image"

Hi,

 

Im totally confused, I found this http://www.webdevelopersnotes.com/tips/html/using_an_image_as_a_submit_button.php3?x=86&y=32 but couldn't get it work.

 

This shows as having SRC in but you say "and input tag does not have a src attribute"

 

<img src="http://www.domain.co.uk/images/homepageregister.PNG" onClick="submit()"/>

This shows as having SRC in but you say "and input tag does not have a src attribute"

 

see my above post, he was wrong.

 

the problem is that the image input does not send the exact name that you provide it send name_x or name.x depending on your browser.

Hi,

 

The form is below.  I thought there was a totally bog standard way of using images instead of the submit button?

 

 

<body>
<form action="" method="post">
    <?php if($error) echo "<span style=\"color:#ff0000;\">".$error."</span><br /><br />"; ?>
    <label for="membername">Username: </label> <input type="text" name="membername" value="<?php if($_POST['membername']) echo $_POST['membername']; ?>" /><br />
    <label for="password">Password: </label> <input type="password" name="password" value="<?php if($_POST['password']) echo $_POST['password']; ?>" /><br />
    <label for="password2">Retype Password: </label> <input type="password" name="password2" value="<?php if($_POST['password2']) echo $_POST['password2']; ?>" /><br />
    <label for="email">Email: </label> <input type="text" name="email" value="<?php if($_POST['email']) echo $_POST['email']; ?>" /><br /><br />
  <input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >

</form>

Hi, this is the code:

 

 

    if(!$error) {
        $query = mysql_query("INSERT INTO users (membername, password, email) VALUES ('".$membername."', '".mysql_real_escape_string(md5($password))."', '".$email."')");
        if($query) {
            $message = "Hello ".$_POST['membername'].",\r\n\r\nThanks for registering! We hope you enjoy your stay.\r\n\r\nThanks,\r\nJohn Doe";
            $headers = "From: ".$website['name']." <".$website['email'].">\r\n";
            mail($_POST['email'], "Welcome", $message, $headers);
            setcookie("user", mysql_insert_id(), $time);
            setcookie("pass", mysql_real_escape_string(md5($password)), $time);
            header("Location: index.php");
        } else {
            $error = "There was a problem with the registration. Please try again.";
        }
    }
}

NOT this problem again.

 

A few of the browser makers decided to do something outside the w3.org specification and send the name/value attributes when an image is used as a submit button. Opera and IE follow the w3.org specification to the letter.

 

The w3.org specification states that for a successful form submission that only the x and y coordinates where the images was clicked are sent. AFAIK, all browsers send the x and y coordinates like the specification states.

 

You can either test for the x or y coordinate (which php will receive as $_POST['name_x'] or as $_POST['name_y'], where name is the name="..." attribute) or you can using a hidden field with a name/value that you choose or you can even use a get parameter on the end of the url that you can test.

 

See this link - http://us2.php.net/manual/en/faq.html.php#faq.html.form-image

NOT this problem again.

 

A few of the browser makers decided to do something outside the w3.org specification and send the name/value attributes when an image is used as a submit button. Opera and IE follow the w3.org specification to the letter.

 

The w3.org specification states that for a successful form submission that only the x and y coordinates where the images was clicked are sent. AFAIK, all browsers send the x and y coordinates like the specification states.

 

You can either test for the x or y coordinate (which php will receive as $_POST['name_x'] or as $_POST['name_y'], where name is the name="..." attribute) or you can using a hidden field with a name/value that you choose or you can even use a get parameter on the end of the url that you can test.

 

See this link - http://us2.php.net/manual/en/faq.html.php#faq.html.form-image

 

Hi PFMaBiSmAd and thanks everyone, I have read this through a few times and I dont understand a word of it.

 

I am absolutely dunfounded that there is not a standard method of using images as submit buttons.

 

Can you please explain a bit further what I need to do or is there a simple solution?

 

 

Thats brilliant thanks betterphp,

 

but I am not currently using

 

if (isset($_POST['image']))

 

Can you advise where I place this and then replace it with

 

if (isset($_POST['image_x'], $_POST['image.x']))

 

Should I use place it in the method somehow?

Thanks betterphp,

 

This is all the code I am using, can anyone advise how I can add an image submit button please?

 

if($_POST['submit']) {
    $membername = mysql_real_escape_string(trim($_POST['membername']));
    $password = trim($_POST['password']);
    $password2 = trim($_POST['password2']);
    $email = mysql_real_escape_string(trim($_POST['email']));
    $error = false;
    
    if(!isset($membername) || empty($membername)) {
        $error = "You need to enter a username.";
    }
    $query = mysql_query("SELECT id FROM users WHERE membername = '".$membername."' LIMIT 1");
    if(mysql_num_rows($query) > 0 && !$error) {
        $error = "Sorry, that username is already taken!";
    }
    if(preg_match("/[a-zA-Z0-9]{1,}$/", $membername) == 0 && !$error) {
        $error = "The username you entered must contain only letters or numbers.";
    }
    if (strlen($membername) > 15){    echo 'The username must not exceed 15 characters';}


    if((!isset($password) || empty($password)) && !$error) {
        $error = "You need to enter a password.";
    }
    if((!isset($password2) || empty($password2)) && !$error) {
        $error = "You need to enter your password twice.";
    }
    if($password != $password2 && !$error) {
        $error = "The passwords you entered did not match.";
    }
    
    if((!isset($email) || empty($email)) && !$error) {
        $error = "You need to enter an email.";
    }
    if(preg_match("/[a-zA-Z0-9-.+]+@[a-zA-Z0-9-]+.[a-zA-Z]+/", $email) == 0 && !$error) {
        $error = "The email you entered is not valid.";
    }
    $query = mysql_query("SELECT id FROM users WHERE email = '".$email."' LIMIT 1");
    if(mysql_num_rows($query) > 0 && !$error) {
        $error = "Sorry, that email is already in use!";
    }
    
    if(!$error) {
        $query = mysql_query("INSERT INTO users (membername, password, email) VALUES ('".$membername."', '".mysql_real_escape_string(md5($password))."', '".$email."')");
        if($query) {
            $message = "Hello ".$_POST['membername'].",\r\n\r\nThanks for registering! We hope you enjoy your stay.\r\n\r\nThanks,\r\nJohn Doe";
            $headers = "From: ".$website['name']." <".$website['email'].">\r\n";
            mail($_POST['email'], "Welcome", $message, $headers);
            setcookie("user", mysql_insert_id(), $time);
            setcookie("pass", mysql_real_escape_string(md5($password)), $time);
            header("Location: index.php");
        } else {
            $error = "There was a problem with the registration. Please try again.";
        }
    }
}

?><html>

<head>
<title>Register</title>
</head>

<body>
<form action="" method="post">
    <?php if($error) echo "<span style=\"color:#ff0000;\">".$error."</span><br /><br />"; ?>
    <label for="membername">Username: </label> <input type="text" name="membername" value="<?php if($_POST['membername']) echo $_POST['membername']; ?>" /><br />
    <label for="password">Password: </label> <input type="password" name="password" value="<?php if($_POST['password']) echo $_POST['password']; ?>" /><br />
    <label for="password2">Retype Password: </label> <input type="password" name="password2" value="<?php if($_POST['password2']) echo $_POST['password2']; ?>" /><br />
    <label for="email">Email: </label> <input type="text" name="email" value="<?php if($_POST['email']) echo $_POST['email']; ?>" /><br /><br />
  <input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >

</form>
    <input type="image" value="submit" name="image" src="http://www.domain.co.uk/images/homepageregister.PNG"  >
</body>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.