4

I would like to change the URL that appears once a form has been submitted although the code below does not appear to do what I would like it to do. How do I change the URL in the address bar?

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XMHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />
    <meta name="robots" content="noindex, nofollow" />

    <title>sample form</title>

    <link rel="stylesheet" type="text/css" media="all" href="" />

    <style type="text/css">

    </style>

    <script type="text/javascript">

        var testurl = window.location.href;
        if(testurl == "file:///C:/Users/user/Desktop/sample_form.html?q=test&submit=submit") {
            testurl = testurl.replace(/q=[^&]+&[a-z]+\=[a-z]+/,'test');
            alert(testurl);
        }

    </script>
</head>

<body>

    <form name="sampleform" id="sampleform" method="get" action="sample_form.html">
        <input type="text" name="q" value="" id="q" />
        <input type="submit" name="submit" value="submit" id="submit" />
    </form>

</body>
</html>
PeanutsMonkey
  • 6,919
  • 23
  • 73
  • 103
  • 1
    Note: because of the way you have positioned your script, you would be instantly redirected to the new url, before the page ever loaded. – Asad Saeeduddin Nov 18 '12 at 19:57
  • @Asad = Why would it do that if I am checking whether `testurl` equates to the value in the URI? – PeanutsMonkey Nov 18 '12 at 20:05
  • I meant if you used KingKongFrog's solution. If you changed the value of `window.location.href` there you would be redirected before the rest of the page loaded. – Asad Saeeduddin Nov 18 '12 at 20:08

4 Answers4

3

Try the following:

<script type="text/javascript">

    var testurl = document.URL;
    if(testurl == "file:///C:/Users/user/Desktop/sample_form.html?q=test&submit=submit") {
        testurl = testurl.replace(/q=[^&]+&[a-z]+\=[a-z]+/,'test');
        window.location.href = testurl;
    }

</script>

A note:

Use window.location for read and write access to the location object associated with the current frame. If you just want to get the address as a read-only string, you may use document.URL, which should contain the same value as window.location.href

KingKongFrog
  • 13,946
  • 21
  • 75
  • 124
3

To change the url, you have to do this :

window.location.href = testurl;

but this has the "side effect" of loading the whole page with the new url (be it or not the same).

If you want to change what appears but not reload the page, you hage to use pushState to use the new HTML5 history API. That's what's done in many Ajax sites to let the URL reflect what's in the dynamically loaded page but it's not compatible with IE9-.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "some useless title", testurl);
Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
1

tl;dr: testurl isn't a reference to window.location.href (they just have the same value), so you need to assign your URL directly to window.location.href instead of testurl. For example: window.location.href = "http://example.com/redirect.html";

Basically, let's say that your web site was at example.com/index.html, and you wanted to redirect to example.com/redirect.html.

Your problem is occurring because you're assigning the location to testurl, not window.location.href. Let me explain:

  1. var testurl = window.location.href; assigns the value of window.location.href (which is example.com/index.html) to the variable testurl. So at this point, testurl and window.location.href are set to example.com/index.html, but they have nothing to do with each other (testurl isn't a reference to window.location.href, it just has the same value)
  2. testurl == testurl.replace(...); replaces testurl with the site you want to redirect to, but since testurl is not a reference to window.location.href, testurl becomes example.com/redirect.html and window.location.href stays what it was previously, which was example.com/index.html.

So in order to fix this, you need to set window.location.href directly, just like you would any other variable, e.g. window.location.href = "http://example.com/redirect.html";.

Assigning a variable to it will work in the exact same way, like so:

var url = "http://example.com/";
// manipulate the url variable
window.location.href = url;

Then, window.location.href will be set to whatever url is (which will be http://example.com/ if you didn't manipulate the variable at all)

strugee
  • 2,752
  • 4
  • 19
  • 30
  • How would you assign it directly? – PeanutsMonkey Nov 18 '12 at 20:23
  • just like you would any other variable. for example: `window.location.href == "http://example.com/redirect.html";`. i've edited the answer to include this. – strugee Nov 18 '12 at 22:38
  • How do you assign the value dynamically though? – PeanutsMonkey Nov 19 '12 at 00:38
  • i'm not sure what you mean. `window.location.href` is just a string, so you can assign it to any string variable. for example: `var url = "http://example.com/"; window.location.href = url;` will assign http://example.com/ to `window.location.href`. – strugee Dec 01 '12 at 20:40
0

You can use the following solution to solve your problem:

window.location.replace('@Url.Action("Action", "Controller")')
Grant Miller
  • 27,532
  • 16
  • 147
  • 165
Yojana Ambavkar
  • 106
  • 1
  • 2