Solved

Replace Submit button with an image

Posted on 2013-01-24
9
481 Views
Last Modified: 2013-01-26
I have a submit button that works perfectly, it is calling a php file.  I want to pretty up the site and use an image instead.  This works (No Image)
<input type="submit" value="Show Me The Results!" name="select">

Open in new window


This doesn't, with image.
<input type="image" name="select" src="../PaleSearch.jpg" style="border:0;" />

Open in new window


It sounds easy enough, but I've been reading that replacing a submit button with an image isn't that easy if your using or rather calling a php form.  Still haven't found a working solution.
0
Comment
Question by:DS928
9 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38817134
doesn't work
That is not an error message and gives not much of a clue.  Can you please post a link to the URL that demonstrates the issues? Thanks, ~Ray
0
 

Author Comment

by:DS928
ID: 38817138
This is the link.  its suppose to open a results page.  It just sits there.

http://www.menuhead.net/Steelers/sections_demo.php

Thank you.

I put both buttons up.  Click on place then across the three listboxes. Then show me the results.

I tried this link and that did not work either, but he explains a lot.

http://www.suburban-glory.com/blog?page=140

and this....

http://davidwalsh.name/php-form-submission-recognize-image-input-buttons
Trying this and it's not helping...

document.Animals.action ="result_place.php";
	<?php
      	if (isset($_POST['select_x'])){
                     if ((@$_POST['select'] == 'x'))
                         {
           	        echo "OK";exit;
	        }
	   else
	       {
           	   echo "NOT";
	      }
      	     }
	?>

Open in new window


And on the form...
<input name="select" type="image" src="../GreySearch.jpg" value="x" >

Open in new window

0
 

Author Comment

by:DS928
ID: 38817383
OK I found this code for this situation.  The problem is that if I put it into my code it affects the other "image buttons" that have nothing to do with this.  When I say affect, I mean nothing works, no response.

if (isset($_POST['select_x']) &&
	isset($_POST['select_y'])) {
	printf('<h1> You clicked on the following coordinates: x-$s, y-$s</h1>',
			
	htmlspecialchars($_POST['select_x']),
	htmlspecialchars($_POST['select_y'])
	);
	}else{
	?>
	<form method="post" action="<?php //echo htmlspecialchars($_SERVER['PHP_SELF']);	?>">
	<input type="image" name="select" src="GreySearch.jpg"/>
	</form>
	<?php
	}?>

Open in new window

0
 
LVL 12

Expert Comment

by:Mohamed Abowarda
ID: 38817976
What are you trying to do? are you trying to update the page while keeping the other buttons?

The following works without any problem:
// file.php:
<?php
if (isset($_POST['select_x']) &&
	isset($_POST['select_y'])) {
	$x = $_POST['select_x'];
	$y = $_POST['select_y'];
	echo("<h1> You clicked on the following coordinates: x-$x, y-$y</h1>");
	}else{
	?>
	<form method="post" action="<?php //echo htmlspecialchars($_SERVER['PHP_SELF']);	?>">
	<input type="image" name="select" src="GreySearch.jpg"/>
	</form>
	<?php
	}?>

Open in new window


Let me know what is going on EXACTLY if you still have a problem, you should post more code to make things more clear.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 9

Expert Comment

by:crazedsanity
ID: 38818800
Seems to work for me, I'm not sure if you've been working on it or not, though.  What I did is simply modify the page live by using the Firebug console in Firefox... here's roughly what I did (hopefully in the correct order):
$("input.button3").parent().attr("id", "xxx"); // give parent object of button an ID
var myButton = $("input.button3").clone(); // clone the button so we can change it
$("input.button3").remove(); // delete the button (can't change type on an existing object)
myButton.attr("type", "image"); // change cloned button to have type="image"
myButton.attr("src", "../PaleSearch.jpg"); // set source image
my Button.removeClass("button3"); // remove styling from old button
$("#xxx").append(myButton); // put cloned button where old button was

Open in new window


After doing this, it seemed to work just like it did with the old button.
0
 

Author Comment

by:DS928
ID: 38819452
OK I get the part about x and y.  I'm still foggy about how to use it.  (The orange button you see is one I did in CSS)  What I have is a switch that launches one of five different php pages depending on which image is selected, Place, Cuisine, etc.
The button code.....
<form name="Animals" method="post" onsubmit="return OnSubmitForm();">
<input type="image" name="select" img src="../GreySearch.jpg" width="160" height="30" /> </p>

Open in new window


The function.
function OnSubmitForm() {
    var g = $("#Glass").val();
	switch(g)
	{
		case "Place":
			//alert("Glass = " + g);
			document.Animals.action ="result_place.php";
			//<?php
      		//if (isset($_POST['select_x']) &&
			//isset($_POST['select_y'])) {
			//printf('<h1> You clicked at the following coordinates: x-$s, y-$s</h1>',
			
			//htmlspecialchars($_POST['select_x']),
			//htmlspecialchars($_POST['select_y'])
			//);
			//}else{
			//?>
			//<form method="post" action="<?php //echo htmlspecialchars($_SERVER['PHP_SELF']);	?>">
			//<input type="image" name="select" src="GreySearch.jpg"/>
			//</form>
			//<?php
			//}?>
			
		break;
		case "Cuisine":
			//alert("Glass = " + g);
			document.Animals.action ="result_cuisine.php";
		break;
		case "City":
			//alert("Glass = " + g);
			document.Animals.action ="result_city.php";
		break;
		case "State":
			//alert("Glass = " + g);
			document.Animals.action ="result_state.php";
		break;
		case "ZipCode":
			//alert("Glass = " + g);
			document.Animals.action ="result_zip.php";
		break;
	}
}

Open in new window


You see if have the "x y" part rem out.  I am not completely sure where to place it.  Perhaps that is where the confusion now lies.  Do I place it in the form or in the function?  Is it before or after the page is called?  Thank you.
0
 
LVL 108

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 38822478
Not sure where you are on this question right now, but you can try using this script.
http://laprbass.com/RAY_submit_buttons.php

The inputs of type=image create a request with two elements for the image,  These contain the name of the input control suffixed by _x and _y.  The values of the request variables are the X-Y coordinates of the mouseclick.  This script uses the GET method to make it easy to see how the browser sets up the request variables.  Note the URL change from red to blue as you click on each of the buttons.

<?php // RAY_submit_buttons.php
error_reporting(E_ALL);

// A FORM WITH TWO IMAGE SUBMIT BUTTONS
$form = <<<ENDFORM
<form>
<input type="image" name="red"  src="http://iconoun.com/images/red_button.png" />
<input type="image" name="blue" src="http://iconoun.com/images/blue_button.png" />
</form>
ENDFORM;

// SHOW WHAT WAS SUBMITTED
var_dump($_GET);

// SHOW THE FORM
echo $form;

Open in new window

HTH, ~Ray
0
 

Author Closing Comment

by:DS928
ID: 38822552
Thank you, Ray.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 38822603
Thanks for the points and thanks for using EE! ~Ray
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now