Why does firefox(haven't tested in another browser) has problems loading form values when a #;
is in the addressbar?
If i have an <input type='radio' checked="checked">
, the presence of this element in the addressbar may lead to the input not actually getting checked(as expected)
How can i avoid this behavior?
Example code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr" style="min-height:100%;">
<head>
<title>stuff2test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body class="popup" >
<form action="" id="frm">
<a href="#;" onClick="alert('added');">add #; to addressbar, and refresh</a>
<?php $rnd = mt_rand(1, 4); ?>
<label for="r_v1"> <input id="r_v1" type="radio" value="v1" <?php if($rnd==1){ echo 'checked="checked"';}?> name="r"></input> checked?</label>
<label for="r_v2"> <input id="r_v2" type="radio" value="v2" <?php if($rnd==2){ echo 'checked="checked"';}?> name="r"></input> checked?</label>
<label for="r_v3"> <input id="r_v3" type="radio" value="v3" <?php if($rnd==3){ echo 'checked="checked"';}?> name="r"></input> checked?</label>
</form>
<button onClick="getElementById('frm').submit();" type="button">submit</button>
<br/>
RND: <?php echo $rnd;?>
<?php
if($rnd>0 && $rnd<=3){
echo "Checkbox {$rnd} should be checked";
}
?>
<br/>
<?php
var_dump($_GET);
?>
</body>
</html>
Edit2: cleaned the code a little, added an echo
You have links like this, right?
<a href="#">link</a>
And you do something with them using JavaScript (here: jQuery too), right?
$('a').click(function() {
alert(1);
});
You need to add return false
at the end of the function.
$('a').click(function() {
alert(1);
return false;
});
Edit:
After looking at your code... Do NOT use inline JavaScript!
You need some element that will do something on click? Just add class, ID - you name it... so you can distinguish between elements and then...
$('a.my_class').click(function() { // $('a#my_id')
// All you need to do.
return false; // For preventing browser to add '#' after current link (if you have 'href="#"').
});
From reading the comments on the question, the answer seems clear.
The problem is that Firefox tries to remember the state of the form when you reload the page, which includes which checkboxes are checked and which aren't. So even though you vary the default values in the HTML on reload, Firefox sees it as the same form and ignores the defaults set in the HTML in favor of what it has saved from before the reload.
I've heard you can disable this behavior by supplying the HTTP header Cache-Control: no-store
, or by specifying autocomplete="off"
on the form elements. But I have not tested either solution personally. Or you could use Javascript to reset the form on page load (either with the form object's reset()
or by explicitly setting each field's value).
The hash (#) is a special character in a URL. Anything that comes after it is not sent to the server, so if you're using hashed URLs you really need to use POST (or an AJAX request to a non hashed URL if GET is essential) to send your form data.
An alternative is to implement something similar to Google's _escaped_fragment_ to ensure that the contents of your URL after the hash will be sent to the server.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With