CODEWITHSUNDEEP
javascriptjqueryhtml
braza
braza

Reputation: 4662

Submitting a custom query string from form

I have a form which at the moment when I submit it, it takes me to a url www.domain.com/search/?maxprice=10000000, however what I want it to do is to take me to a custom url e.g. www.domain.com/search/maxprice_10000000/

I found this javascript code which was meant to allow custom urls by stopping the form from doing its default action using event.preventDefault() However this either isnt working or isnt loading in the first place

Here is my code:

    <script type="text/javascript">
    $(document).ready(function() {
    $("#propertysearch").submit(function(event) {
        event.preventDefault();

        window.location.href = "/"; //whatever i want but the problem is this doesnt seem to execute
    });
});
</script>
    <form id="propertysearch" action="/search" method="GET">

<p>
        <select id="maxprice" name="maxprice" style="width:47%;">
            <option value="10000000">Max Price...</option>
                <option disabled="disabled" value="10000000">- - - - - - - - - - - - - - - - - - - - - - -</option>
                <br />

<option value="100000">?100,000</option>
<option value="150000">?150,000</option>
<option value="200000">?200,000</option>
<option value="250000">?250,000</option>

        </select></p>

        <p><a href="javascript:document.forms['propertysearch'].submit();" title="Find a Property">Find a Property Now</a> &gt;</p>
        </form>

Any help would be appreciated!

UPDATE I have now got the code to work by using <input type="submit" value="Submit"> instead of <a href="javascript:document.forms['propertysearch'].submit();" title="Find a Property">Find a Property Now</a>

so how can I change this my <a></a> to make it work

Thanks for your help

Upvotes: 1

Views: 2164

Answers (2)

Explosion Pills
Explosion Pills

Reputation: 191749

The code in your example is using jQuery. Either include jQuery, or go with a non-jQuery solution like so:

document.getElementById('propertytype').addEventListener('submit', function (event) {
    event.preventDefault();

    window.location.href = "/"; //whatever you want
});

Note that the above is not cross-browser compatible; you would have to also use attachEvent.

To use the <a>, I would just bind to the click event:

$("#propertysearch a").on('click', function (e) {
    event.preventDefault();

    //submission code
});

//pre jQuery 1.7
$("#propertysearch a").bind('click', function (e) {

Upvotes: 2

OQJF
OQJF

Reputation: 1350

delete the code: href="javascript:document.forms['propertysearch'].submit();" from you code, so it should be like this:<p><a href='#' title="Find a Property">Find a Property Now</a></p>

Upvotes: 0

Related Questions