Question

I have a form which at the moment when I submit it, it takes me to a url http://www.domain.com/search/?maxprice=10000000, however what I want it to do is to take me to a custom url e.g. http://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

Answer 1

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