Solved

Replace Submit button with an image

Posted on 2013-01-24
9
488 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 109

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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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

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 109

Expert Comment

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

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

840 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