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
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"  >

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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"

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.";
        }
    }
}

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

 

 

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.