Submitting Form Values via IMG

[Deji]

I've been designing a website for a while with multilanguage functionality. I managed to create easy language switching by clicking an image of the appropriate flag in the corner of the website. I made it a form since it allows PHP to do what it needs to do after submission, then reload the page to get the new language to actually appear.So after clicking a flag, the form would send to a page (the same page) and the PHP header file would take care of what it needs to do. Then another redirect is made to the same page (without being apparent to the user). It works well but relies on the use of a form to work.The problem is that since I made this, it has suddenly stopped working. I'm assuming because of updates to Firefox and Internet Explorer.

<div class="langselect"><form method="post" action="/"><fieldset> <input type="hidden" name="l" value="1" /><input type="image" name="v" value="99" onclick="submit()" src="/images/flags/en.gif" alt="English" title="English" /><input type="image" name="v" value="3" onclick="submit()" src="/images/flags/pt.gif" alt="Português" title="Português" /><input type="image" name="v" value="1" onclick="submit()" src="/images/flags/ru.gif" alt="Руский" title="Руский" /><input type="image" name="v" value="2" onclick="submit()" src="/images/flags/pl.gif" alt="Polski" title="Polski" /></fieldset></form></div>

It used to send to "$_POST['v']" in PHP perfectly. But now, only "l" is sent.

[thescientist]

AFAIK, there is no input of type image. Maybe you should make them submit buttons instead, and use CSS to apply a background image for the flag. Also, isn't this

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

submitting to the root directory? I would think you would want to use # or even

<?php echo $_SERVER['PHP_SELF'] ?>

I also have to 'take issue' with your evaluation of javascript. any particular reason for your outlook?edit: examplehttp://www.javascript-coder.com/html-form/...rm-submit.phtml

[Deji]

Thanks for the reply.As I said, I use PHP to do everything. So the source HTML of the page is completely different to what I've actually done. It makes it go to the homepage because I was on the homepage when I opened the source.W3Schools shows that image is a valid type.I tried to use the <button> tag but it seems to be impossible to remove all of Firefox's styles for it. And changing a button to an image using CSS hacks doesn't feel like the best way around it, since there was an attribute made for submitting values with images. Still, if it's the only way, I'll consider it.My issue is mainly not with JavaScript but how it is used and how depended it is. It's a web designers dream (despite the fact it steers away from well known syntax standards) but more often than not, a users nightmare... just look at Facebook and Google That's why I use a script blocker on most of the sites I visit.

[thescientist]

ok, so given that there is an image input type, to be used as a substitue for a submit button, why are you using onclick="submit()" Is there more to this code that hasn't been posted somewhere?Would something like this be suitable?

<div class="langselect">  <form method="post" action="/">	<fieldset>	  <input type="image" name="English" src="/images/flags/en.gif" alt="English" title="English" />	  <input type="image" name="Português" src="/images/flags/pt.gif" alt="Português" title="Português" />	  <input type="image" name="Руский" src="/images/flags/ru.gif" alt="Руский" title="Руский" />	  <input type="image" name="Polski" src="/images/flags/pl.gif" alt="Polski" title="Polski" />	</fieldset>  </form></div>

and then follow the link as a way to test which of the submit buttons was submitted, by checking for it's name, which I've added to indicate the language each button represents. Or you can replace the name with numbers (indexes) so that you can map the button to a language on the server side using a simple hashmap.I'm still not sure what your specific issues with Javascript are. Why is it a bad thing to be depended on? Because people can turn it on/off? That's why good developers implore graceful degredation. And I'm not sure what you're Facebook and Google examples highlight...again that JS is needed? Well, that's just the nature of the industry, people want rich web experiences, and if they want to experience them, then JS is a small price to pay. I mean, everyone is entitled to their opinion, so I'm not trying to argue with you, just looking for specific examples, issues, etc. And most languages have their own syntax quirks. some say javascript is nicer because it's loosely typed. some might not. but it's just an opinion/preference, personally.

[Deji]

I don't understand how I can retrieve the selected language that way... Here's the current PHP code.

echo "<div class=\"langselect\"><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\"><fieldset>". $lang['main']['langselect'] ." <input type=\"hidden\" name=\"l\" value=\"1\" /><input type=\"image\" name=\"v\" value=\"99\" src=\"/images/flags/en.gif\" alt=\"English\" title=\"English\" /><input type=\"image\" name=\"v\" value=\"3\" src=\"/images/flags/pt.gif\" alt=\"Português\" title=\"Português\" /><input type=\"image\" name=\"v\" value=\"1\" src=\"/images/flags/ru.gif\" alt=\"Руский\" title=\"Руский\" /><input type=\"image\" name=\"v\" value=\"2\" src=\"/images/flags/pl.gif\" alt=\"Polski\" title=\"Polski\" /></fieldset></form></div><img src=\"/images/logo.png\" alt=\"\" /></div></div><div id=\"left\">";

if( !defined( 'LANG_EN' ) ) define( 'LANG_EN', 0 );if( !defined( 'LANG_RU' ) ) define( 'LANG_RU', 1 );if( !defined( 'LANG_PL' ) ) define( 'LANG_PL', 2 );if( !defined( 'LANG_PT' ) ) define( 'LANG_PT', 3 );if($_POST['l'] == "1" && $_POST['v']){	$_POST['v'] = (int)$_POST['v'];		if($ipbwi->member->isLoggedIn())	{		//[...]	}	else	{		if($_POST['v'] == LANG_RU) $_SESSION['lang'] = LANG_RU;		elseif($_POST['v'] == LANG_PL) $_SESSION['lang'] = LANG_PL;		else $_SESSION['lang'] = LANG_EN;	}	echo "Click <a href=\"{$_SERVER['REQUEST_URI']}\">here</a> if you are not redirected";	header("Location: {$_SERVER['REQUEST_URI']}");	exit;}

That's on the header of every page, before HTML output.Assuming in your example, when Portuguese was selected, the value of "Português" would be 1, would that mean I'd have to check each of the names to see which one of them is 1?And this works but I can't figure out how to remove all the default styles that browsers put to the button tag (which I'm sure is against the W3C Standard):

echo "<div class=\"langselect\"><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\"><fieldset>". $lang['main']['langselect'] ." <input type=\"hidden\" name=\"l\" value=\"1\" /><button name=\"v\" value=\"99\"><img src=\"/images/flags/en.gif\" alt=\"English\" title=\"English\" /></button><button name=\"v\" value=\"3\"><img src=\"/images/flags/pt.gif\" alt=\"Português\" title=\"Português\" /></button><button name=\"v\" value=\"1\"><img src=\"/images/flags/ru.gif\" alt=\"Руский\" title=\"Руский\" /></button><button name=\"v\" value=\"2\"><img src=\"/images/flags/pl.gif\" alt=\"Polski\" title=\"Polski\" /></button></fieldset></form></div><img src=\"/images/logo.png\" alt=\"\" /></div></div><div id=\"left\">";

And to continue the classic JavaScript yay/nay discussion :)Facebook has loads of bugs and have even outputted some of their PHP source code in the past, I hear... And Google has been ruined by JavaScript. The main reason I keep a JavaScript blocker (aside from ad blocking and tracking) is so I can get past the annoying "feature" of automatic searching as I type, which just causes an inability to get the URL for what I have just searched for (simple things really annoy the end user). As much as Ajax is nice, it's much slower than reloading the page and I have a really bad wireless internet service, so again, I'm a big victim of it (I believe there is no room for cache when Ajax is involved).jQuery does fix a lot of JavaScript issues but still has a considerably low response time. The most annoying thing is how many websites expect the user to have JavaScript and have no support for a lack of it, even for such simple things. Don't get me wrong, I do use it. But I make sure to try and keep it minimal and clean. I use it mostly for form validation and mostly on file submission forms (this is a case in which Ajax is bound to be faster, because the user doesn't have to wait for the file to upload to the server).EDITLol, JUST bumped into another annoying JavaScript thing.. How the developers seem to have a lack of understanding of the concepts "tabbed browsing" and the back button. So you see something on Facebook you want to click, right after you've clicked a link, then you press the Back button to see what it was. Unfortunately, Ajax has changed that with completely new content. A bit irritating.And middle-clicking on links to open them in a new tab, which I do for most of the links I click. Unfortunately they decided to implement some JavaScript to make it open in the current window instead. And JavaScript popups don't help either. What's wrong with target="_blank"? At least that supports tabbed browsing and doesn't leave me with a tab containing an empty page and a weird URL (a JavaScript command). Okay, I'm done. I have a tendancy to rant when something annoys me

[Deji]

Okay, sorry for "double posting" but that post was pretty long.I found a solution but it's far from professional:

echo "<div class=\"langselect\"><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\" style=\"display:inline\"><fieldset style=\"display:inline\">". $lang['main']['langselect'] ." <input type=\"hidden\" name=\"v\" value=\"99\" /><input type=\"image\" src=\"/images/flags/en.gif\" alt=\"English\" title=\"English\" /></fieldset></form><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\" style=\"display:inline\"><fieldset style=\"display:inline\"><input type=\"hidden\" name=\"v\" value=\"3\" /><input type=\"image\" src=\"/images/flags/pt.gif\" alt=\"Português\" title=\"Português\" /></fieldset></form><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\" style=\"display:inline\"><fieldset style=\"display:inline\"><input type=\"hidden\" name=\"v\" value=\"1\" /><input type=\"image\" src=\"/images/flags/ru.gif\" alt=\"Руский\" title=\"Руский\" /></fieldset></form><form method=\"post\" action=\"". $_SERVER['REQUEST_URI'] ."\" style=\"display:inline\"><fieldset style=\"display:inline\"><input type=\"hidden\" name=\"v\" value=\"2\" /><input type=\"image\" src=\"/images/flags/pl.gif\" alt=\"Polski\" title=\"Polski\" /></fieldset></form></div><img src=\"/images/logo.png\" alt=\"\" /></div></div><div id=\"left\">";

[thescientist]

that's why I said you could keep the numbers, or use the hashmap (how you handled it on the server side is secondary to what you actually get on the server side when the form posts, which for you had changed all of a sudden). It looks like, similar to my example, you took out the onclick handler. what was it there for in the first place?

[Deji]

Backup. I considered the reluctancy of some browsers to submit upon clicking the images, so assuming JavaScript is enabled, it would take action of the form wasn't already submitting. I'll add it again if I find a browser doesn't submit when the images are clicked.