Solved

Firefox and IE URL difference

Posted on 2008-10-28
17
334 Views
Last Modified: 2013-12-08
Hi experts!

When I perform the same keword search on IE7 and Firefox I get two different URLS for the search results page:

Firefox
http://www.mytestsite.com/search_result.php?search=john+smith&submit.x=0&submit.y=0&submit=submit

IE
http://www.mytestsite.com/search_result.php?search=john&smith

Can someone tell me what this extra bit of text Firefox adds to the URL is and how do I get rid of it to make it look more intelligible? thanks
0
Comment
Question by:allanch08
  • 9
  • 4
  • 3
  • +1
17 Comments
 
LVL 42

Expert Comment

by:David S.
Comment Utility
It seems that you're using an <input type="image"> element. One solution might be to remove its name attribute.
0
 
LVL 3

Expert Comment

by:Pedro Chagas
Comment Utility
Please, show to us the code that contain the forms you use to send the information.
0
 

Author Comment

by:allanch08
Comment Utility
Hello, yes, i'm using an image instead of the usual submit button. I'll try removing the name attribute later on. Any reason why Firefox and IE shoe different URL's? surely if its the web they should show the same URL regardless of browser
0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 200 total points
Comment Utility
Firefox and IE behave differently in how form submit input vars are sent. IE by default, does not pass the value of the submit button if the user presses enter and there's a single text input in the form. This bizarre behaviour is solved by inserting another text input and hiding it using css.

Firefox will submit all input values regardless of whether the user presses enter or clicks submit.

I may be wrong with particular details here, but this is the general idea of the url differences you're noticing.
0
 

Author Comment

by:allanch08
Comment Utility
thanks that sounds like a logical answer
0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 200 total points
Comment Utility
The standard work-around that I use for all of IE's buggy form input behaviours is to use css styling of a standard input button with an image as the background. The solution below uses valid html/css: -
<style type="text/css>

#frm_submit {

  width: 40px;

  height: 18px;

  background: url(images/frm_submit.jpg);

  border: none;

  padding: 0;

  margin: 0;

}

</style>
 

<input type="submit" id="frm_submit" value="" />

Open in new window

0
 

Author Comment

by:allanch08
Comment Utility
so does this make my url more comprehensible looking as I prefer it without the submit button values?
0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 200 total points
Comment Utility
Firefox and IE will behave with a standard input yes. As soon as you use an image for a submit, wierd stuff happens. If you dont want the submit name/value pair in the url at all, dont use a submit input of any kind.

Yet another option, use POST instead of get, the url wont have a querystring at all.
0
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

 

Author Comment

by:allanch08
Comment Utility
thanks. at the moment I'm using GET so that the URL can be bookmarked.  I'm also using php to process the form and the line of code I'm using to check if form is submitted is shown below. I'll have to cehck if this is affected.
if (isset($_POST['submit'])) {
 

xxx
 

}

Open in new window

0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 200 total points
Comment Utility
You can use any field from the form to check if it's been submitted. "search" would be the logical choice. However if your form is using the get method, checking the post array isn't a good idea.

If you check for $_GET['search'] to begin form processing, you'll want to validate more than if it's merely set i.e. if(!empty($_GET['search'])). This way, form processing only begins if search is set AND it's not an empty value.
0
 

Author Comment

by:allanch08
Comment Utility
thanks, having an emtpy field is something I overlooked. I'll add that to it and see how it works.
0
 
LVL 42

Accepted Solution

by:
David S. earned 200 total points
Comment Utility
> The standard work-around that I use for all of IE's buggy form input behaviours is to use css styling of a
> standard input button with an image as the background.

I disagree. What happens if someone can't see the image?  It would be better to do something like this:

<button type="submit"><img src="submit.jpg" alt="Submit"></button>


> Any reason why Firefox and IE shoe different URL's? surely if its the web they should show the same URL regardless of browser

The URL is only a side effect of the issue.  There once was a technology called server-side image maps. It used a form and the <input type="image"> element. When a user clicked on the image, the coordinates were sent to the server which then did some appropriate action. Some browsers still send the coordinates.  Now it's best to avoid using both kinds of image maps due to accessibility issues. There are certain CSS techniques that provide a much more user-friendly equivalent.
0
 

Author Comment

by:allanch08
Comment Utility
currently I'm just usingthe code below, it works and looks nicer then the generic submit button. the only annoying thing is the x=0&submit.y=0&submit=submit which do look like co-ordinates of some sorts
<input type="image" src="/images/button.gif" name="submit" alt="submit"/>

Open in new window

0
 

Author Comment

by:allanch08
Comment Utility
"The URL is only a side effect of the issue.  There once was a technology called server-side image maps. It used a form and the <input type="image"> element. When a user clicked on the image, the coordinates were sent to the server which then did some appropriate action. Some browsers still send the coordinates.  Now it's best to avoid using both kinds of image maps due to accessibility issues. There are certain CSS techniques that provide a much more user-friendly equivalent."

So when it comes to this issue is Firefox more standards compliant by displaying this additional information?
0
 
LVL 42

Assisted Solution

by:David S.
David S. earned 200 total points
Comment Utility
> So when it comes to this issue is Firefox more standards compliant by displaying this additional information?

Yes. Here's the relevant section of the HTML 4.01 Specs, if you're interested: http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1
0
 

Author Comment

by:allanch08
Comment Utility
thanks. will read up on that.
0
 

Author Comment

by:allanch08
Comment Utility
I've updated the code to make sure the textfield is not empty. It also occurred to me do I really need to check if the form has been submitted as surely if it hasn't then no search would go through?
//Check if textfield is not empty.

if (!empty($_GET['textfield'])) {

	$textfield = ($_GET['textfield']);

	}

else {

	$textfield = NULL;

	echo 'You forgot to enter a keyword for your search.';

}

// Only allow letters in textfield.

if (preg_match("^/[A-Za-z]+/", $_GET['textfield'])) { 

	$textfield = $_GET['textfield'];

}

Open in new window

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

Suggested Solutions

I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
Due to recent concerns over the inevitable depletion of the current pool of IPv4 addresses and the desire to provide additional functionality for modern devices, an upgrade to IPv6 on my Internet connection was needed for me to explore the world of …
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

772 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

11 Experts available now in Live!

Get 1:1 Help Now