Submitting a custom query string from form

Question

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

buddy, I have post the solution, but you didn't notice it.

OQJF
– OQJF

2013-02-05 03:28:44 +00:00
Commented Feb 5, 2013 at 3:28 — OQJF
– OQJF, Commented Feb 5, 2013 at 3:28

Explosion Pills · Accepted Answer · 2013-02-05 03:38:16Z

2

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

edited Feb 5, 2013 at 3:38

answered Feb 5, 2013 at 2:32

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

braza Over a year ago

I cant get this to work, its still just submitting a querystring, what do you mean I would have to use 'attachEvent'

Explosion Pills Over a year ago

@braza internet explorer uses attachEvent, but other browsers tend to use addEventListener. Did you wrap this in document.ready?

braza Over a year ago

my script code now looks like this :

$(document).ready(function() {    document.getElementById('propertysearch').addEventListener('submit', function (event) {     event.preventDefault();      window.location.href = "/map"; //whatever you want }); });

do I want to change this line <form id="propertysearch" action="/about" method="GET">?

Explosion Pills Over a year ago

@braza if you have access to jQuery you should use that.

braza Over a year ago

Using my previous code I have added this <script src='//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'></script>, is that all I need to make it work, because at the moment even with it, its still not working

|

OQJF · Accepted Answer · 2013-02-05 02:51:19Z

0

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>

answered Feb 5, 2013 at 2:51

OQJF

1,3709 silver badges12 bronze badges

Collectives™ on Stack Overflow

Submitting a custom query string from form

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related