Solved

Replace Submit button with an image

Posted on 2013-01-24
9
484 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

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…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

863 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

25 Experts available now in Live!

Get 1:1 Help Now