asked on 7/22/2008

How do I get IE to return the value of an HTML form button?

I need to create a button that sends a GET to an URL and passes some values. I expected the button produced by code snippet to go to
http://www.google.com?field1=a1a1a1a1&field2=b2b2b2b2
instead it goes to
http://www.google.com/?login=Login
The source of the page produced by the code snippet is valid according to http://validator.w3.org/check.

[NOTE:The button will be used in an email, and I prefer not to use a POST because gmail puts the hidden post variables up as a form if you forward the email.]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<?php
 
 	$site = "http://www.google.com";	
	$valueString = "field1=a1a1a1a1&amp;field2=b2b2b2b2";
	$getString = "?$valueString";
 	$getSite = $site . $getString;
 	$test = "<table>
				<tr><td >Button Example</td></tr>
				<tr><td >
					<form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;'   
						name='form1' method='get' action='$getSite' target='_blank'>
						<button name='login' value='$valueString' type='submit'>Login</button>
					</form></td>
			</tr></table>";
 	print $test;
?>
</body>
 
THE SOURCE OF THE PAGE PRODUCED IS 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<table>
				<tr><td >Button Example</td></tr>
				<tr><td >
					<form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;'   
						name='form1' method='get' action='http://www.google.com?field1=a1a1a1a1&amp;field2=b2b2b2b2' target='_blank'>
						<button name='login' value='field1=a1a1a1a1&amp;field2=b2b2b2b2' type='submit'>Login</button>
					</form></td>
			</tr></table></body>

Last Comment

7/24/2008

7/22/2008

use input instead of button
IE doens't
do it like this

<form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;' name='form1' method='get' action='http://www.google.com?field1=a1a1a1a1&amp;field2=b2b2b2b2' target='_blank'>
     <input onSubmit="document.getElementById('button_value').value=field1=a1a1a1a1&amp;field2=b2b2b2b2" name='submit_button' value='Login' type='submit' />
     <input type='hidden' name='button_value' id='button_value' value='' />
</form>

Open in new window

Rob Siklos

7/22/2008

Don't use the value of the button - it's the button text.

What you really want is to use a hidden field (one per item), like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<?php
 
        $site = "http://www.google.com";
        $value1 = "a1a1a1a1";
        $value2 = "b2b2b2b2";
        $test = "<table>
                                <tr><td >Button Example</td></tr>
                                <tr><td >
                                        <form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;'   
                                                name='form1' method='get' action='$site' target='_blank'>
                                                <button name='login' value='Login' type='submit'>Login</button>
                                                <input name=type='field1' value='$value1'>
                                                <input name=type='field2' value='$value2'>
                                        </form></td>
                        </tr></table>";
        print $test;
?>
</body>

Open in new window

anAppBuilder

7/22/2008

ASKER

Thank you both.

So I think you are both saying that IE does not support the value attribute of button. Correct?
And the only way to do this is with hidden inputs?

The hidden inputs work fine, EXCEPT for the interaction with gmail I mentioned in my before.

I don't really want to use javascript especially since this is going into an email so I want it as vanilla as posssible to avoid unexpected interations with email tools.

Rob Siklos

7/22/2008

regardless of what IE supports, you can't use the value of a single form element to add multiple values to a query string.

anAppBuilder

7/22/2008

ASKER

In my code snippet, I built the URL with the values and set the action to it
action='http://www.google.com?field1=a1a1a1a1&field2=b2b2b2b2'

Is there a way to send that URL? It looks like IE is peeling off everything after the ? and adding the display text of the button.

scrathcyboy

7/23/2008

" action='http://www.google.com?field1=a1a1a1a1&field2=b2b2b2b2' "

In short, NO. IF a1 are separate variables, you cannot repeat them as you have done. And Gmail will send all of the variables encoded in the URL if you use GET -- not if you use POST. Why not rephrase the Q and explain why a1 and b2 are repeated so many times in the URL string, why is this necessary?

anAppBuilder

7/23/2008

ASKER

Sorry for the confusion. I meant a1a1a1a1 just to be some string and b2b2b2b2 ti be another string.

The problem occurs in the same way for
action='http://www.google.com?field1=foo&field2=bar

What gets sent iis http://www.google.com?login=Login (the display value of the submit button)
not http://www.google.com?field1=foo&field2=bar

Is there some way to get the constructed URL to send?

nplib

7/23/2008

in that case since you are building your query string in php place it right into your action instead

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<?php
  $site = "http://www.google.com";        
  $valueString = "field1=a1a1a1a1&amp;field2=b2b2b2b2";
  $getString = "?$valueString";
  $getSite = $site . $getString;
  
  $test = "<table>
     <tr><td >Button Example</td></tr>
     <tr><td>
     <form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;' name='form1' method='get' action='$getSite' target='_blank'>
     <input name='login' value='Login' type='submit'>
     </form></td>
     </tr></table>";
  print $test;
?>
</body>

Open in new window

anAppBuilder

7/23/2008

ASKER

Thank you, nplib. That was basically my original question. I would expect the button in your code snippet to put up a browser with this URL
http://www.google.com?field1=a1a1a1a1&field2=b2b2b2b2
instead the URL in IE7 is
http://www.google.com/?login=Login

Any ideas?

nplib

7/23/2008

do you have a live version I can see?

anAppBuilder

7/23/2008

ASKER

I don't really have a place to put up a public example. Are you telling me that when you run the snippet, it behaves differently?

BTW I have attached the source from runnignyour snippet.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<table>
     <tr><td >Button Example</td></tr>
     <tr><td>
     <form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;' name='form1' method='get' action='http://www.google.com?field1=a1a1a1a1&amp;field2=b2b2b2b2' target='_blank'>
     <input name='login' value='Login' type='submit'>
     </form></td>
     </tr></table></body>

Open in new window

nplib

7/23/2008

turns out that's a google API thing, even if there are no variables it goes to www.google.com?login=login

anAppBuilder

7/23/2008

ASKER

I get the same behavior if I change google for amazon, FOO, experts-exchange, and a program on a site I have access to that echoes back its gets and posts.

nplib

7/23/2008

this may look odd but it does work if you don't want to use hidden fields

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
 <html><head><title>Test Button</title></head><body>
<table>
     <tr><td >Button Example</td></tr>
     <tr><td>
     <form style='padding-left:20px;padding-bottom:5px;margin:0px;position:relative;top:-1px;' name='form1' method='post' action='http://www.google.com?field1=a1a1a1a1&amp;field2=b2b2b2b2' target='_blank'>
	 <input value='Login' type='submit'>
     </form></td>
     </tr></table></body>

Open in new window

nplib

7/23/2008

the login was coming from the <input name login.

anAppBuilder

7/23/2008

ASKER

Yes, I understand that. However, if I take the name away, NO get info is passed in the URL.

If I change the input to a button as in my original code snippet, I get display text of the button, rather than the value= string, in the get URL.

Is there a way to pass information in the URL as the value= in the button is supposed to do?

scrathcyboy

7/23/2008

"Is there some way to get the constructed URL to send?"

Google's incoming server page when you add query's to the string is translating that to a login, when it does not recognize or want to handle the query you have sent. So the answer is NO, if google does not want to recognize what you are sending in a query, it automatically redirects you to a login, and you can't change that. Are you sure it is not a different URL, like --

http://gmail.google.com .. then your query string? Sending it to the main google site, WWW, google is simply not going to accept appended parameters.

nplib

7/23/2008

the code snippet I provided puts "GET" variables in the url

anAppBuilder

7/23/2008

ASKER

Thank you for your response scrathcyboy. As I said several comments ago this is not a Google issue. The use of Google is purely for illustration. The problem occurs for ANY URL including one on a private site that I use to echo back GET and POST values for testing. (Unfortunately I cannot share this URL.)

Pick a website. Is there some way to get the constructed URL to send?

Also a point of information. When I past this URL into IE7
http://www.google.com?foo=bar&bar=foo
I do not get a redirect to a login. I get a nice 404 page with this warning:
The page - www.google.com/?foo=bar&bar=foo - does not exist.

anAppBuilder

7/23/2008

ASKER

Thank you, nplib. When I run your snippet, (to ANY url including my test url), it sends the NAME of the login submit input, NOT the DATA that should be the get url.

When your browser opens are you actuallly seeing the get info?

This is not happening for me in IE7. At the top of the browser I get
?login=Login
not
?field1=a1a1a1a1&field2=b2b2b2b2'

anAppBuilder

7/23/2008

ASKER

Thank you everyone who has added comnents.

To clariify: Can anyone either tell me how to do this or tell me that there is no way to do it?
o I want to put a submit button on an HTML form
o The action of the from looks like this: ?=&=
o The name of the button is login and it's display text is Login
o When I click the button from IE7, it starts up another IE7
o I want the line at the top of the new IE7 to be ?=&=

The problem is that the line is ?login=Login

NOTES:
o For an example, please see the code snippet I posted at the top. (NOTE: This problem has nothing to do with Google. I get the same results to any site including my own test site.)
o If anyone runs either my original snippet or nplib's snippet, and gets the desired line at the top of the IE7 browser, please add a comment.
o I do not want to use hidden input elements.
o I have tried both input type='submit' and button elements.
o Setting the value of a button element to =&= does not work either .

ASKER CERTIFIED SOLUTION

nplib

7/24/2008