Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firefox having "#;" in the addressbar

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

like image 260
Quamis Avatar asked Jul 21 '11 11:07

Quamis


3 Answers

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="#"').
});
like image 111
daGrevis Avatar answered Sep 26 '22 00:09

daGrevis


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).

like image 21
Anomie Avatar answered Sep 27 '22 00:09

Anomie


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.

like image 39
shanethehat Avatar answered Sep 23 '22 00:09

shanethehat