CODEWITHSUNDEEP
javascriptjqueryhtml
user2128056
user2128056

Reputation: 111

Hashchange html submit

There's a problem with my script. If I was to type something in with a spacebar, ie: google map it would change in input box: google+map what I don't like. Also... When I submit again, it messes up more badly

<form name="input" action="" method="get">
Search: <input type="text" name="search">
<input type="submit" value="Submit">
  <div id="result"></div>
</form>

--

$('form').submit(function() {
    var form_data = ($(this).serialize());
    window.location.hash = form_data.replace('=','/');
    return false;
});

$(window).on('hashchange', function () {
    var values = window.location.hash.slice(1).split('/');
    $("[name=" + values[0] + "]").val(values[1]);
});

var values = window.location.hash.slice(1).split('/');
$("[name=" + values[0] + "]").val(values[1]);

Upvotes: 0

Views: 241

Answers (2)

gashu
gashu

Reputation: 492

In this case FORM method 'GET' at <form name="input" action="" method="get"> should not be used. According to W3 recommendation here

1.3 Quick Checklist for Choosing HTTP GET or POST

Use GET if: The interaction is more like a question (i.e., it is a safe operation such as a query, read operation, or lookup). Use POST if: The interaction is more like an order, or The interaction changes the state of the resource in a way that the user would perceive (e.g., a subscription to a service), or The user be held accountable for the results of the interaction.

In the GET the data is sent in URI and there is no spaces in URI and hence the problem.

However, if you need to use GET request for this then use decodeURIComponent to decodeURIComponent(values[1]) to escape the value

Upvotes: 0

Dexter
Dexter

Reputation: 18452

You need to use decodeURIComponent to escape the value from the hash:

$('form').submit(function() {
    var form_data = ($(this).serialize());
    window.location.hash = form_data.replace('=','/');
    return false;
});

$(window).on('hashchange', updateVal);

updateVal();

function updateVal() {
   var values = window.location.hash.slice(1).split('/');
   $("[name=" + values[0] + "]").val(decodeURIComponent(values[1]));
}

Upvotes: 1

Related Questions