Reputation: 3165

jQuery won't submit a form

<!-- /Search box -->
<aside class="vehicle-search">
    <header>
        <h2>Find your vehicle</h2>
    </header>

    <article>
        <script>
            jQuery(function() {
                jQuery('.go').click(function(e) {
                    e.preventDefault();
                    jQuery('#vehicle').submit(function (event){
                        var action = '';
                        var actionid = jQuery('#categoryid').children(':selected').attr('value');

                        if (actionid == 1) {
                            action = 'sales/new-motorhomes';
                        }
                        if (actionid == 2) {
                            action = 'sales/used-motorhomes';
                        }
                        if (actionid == 3) {
                            action = 'sales/caravans';
                        }
                        jQuery(this).attr('action', action);
                    });
                });
            });
        </script>
        <form id="vehicle" action="sales/new-motorhomes" method="post">
            <h3>Manufacturer</h3>
            <!-- <input type="submit"> -->
            <select name="manufacturer" id="manufacturers">
                <option value="1">Auto-Trail</option>
                <option value="2">Adria</option>
                <option value="3">Elddis</option>
            </select>

            <h3>Vehicle Type</h3>
            <select name="category" id="categoryid">
                <option value="1">New Motorhomes</option>
                <option value="2">Used Motorhomes</option>
                <option value="3">Caravans</option>
            </select>

            <h3>Berths</h3>
            <input type="text" name="berth" id="berths" style="border: 0; color: #f6931f; font-weight: bold;" />
            <div id="slider-berths"></div> 
        </form>
    </article>

    <footer>
        <span class="goButton">
            <a class="go" href=""></a>
        </span> 
    </footer>
</aside>
<!-- /Search box -->

What have I missed here..?

Upvotes: 0

Answers (6)

yckart

Reputation: 33378

Since the submit-event is just declared but never called you have to put the submit-event outside of your click-handler and just trigger it on click:

http://fiddle.jshell.net/rvx27/

jQuery(function () {
    jQuery('form:first').submit(function (event) {
        var action = '';
        var actionid = jQuery('#categoryid').children(':selected').attr('value');

        if (actionid == 1) {
            action = 'sales/new-motorhomes';
        }
        if (actionid == 2) {
            action = 'sales/used-motorhomes';
        }
        if (actionid == 3) {
            action = 'sales/caravans';
        }
        jQuery(this).attr('action', action);

    });
    jQuery('.go').click(function (e) {
        e.preventDefault();
        jQuery('form:first').submit();
    });
});

Upvotes: 3

Kami

Reputation: 19407

The code

jQuery('form:first').submit(function (event){});

Will assign an event handler to be called when the form is submitted. It does no actually submit the form.

To submit the form you must call

jQuery('form:first').submit();

or have a submit button in the form.

Your code could be rewritted as

jQuery(document).ready(function() {
   jQuery('form:first').submit(function (event){
        var action = '';
        var actionid = jQuery('#categoryid').children(':selected').attr('value');

        if (actionid == 1) {
           action = 'sales/new-motorhomes';
        }
        if (actionid == 2) {
           action = 'sales/used-motorhomes';
        }
        if (actionid == 3) {
           action = 'sales/caravans';
        }
        jQuery(this).attr('action', action);

        return true; // Important to return okay to submit

   });

   jQuery('.go').click(function(e) {
       e.preventDefault();
       jQuery('form:first').submit(); // Trigger the submission
   });
});

This code assigns the event handler document.ready() event and then the subsequent click triggers the submit.

Upvotes: 1

s.lenders

Reputation: 1149

Try this:

jQuery(function() {

            jQuery('.go').click(function(e) {
                e.preventDefault();

                var action = '';
                var actionid = jQuery('#categoryid').children(':selected').attr('value');

                if (actionid == 1) {
                    action = 'sales/new-motorhomes';
                }
                if (actionid == 2) {
                    action = 'sales/used-motorhomes';
                }
                if (actionid == 3) {
                    action = 'sales/caravans';
                }
                jQuery('form:first').attr('action', action);

                jQuery('form:first').submit()

                });
            });
        });

Upvotes: 0

nnnnnn

Reputation: 150010

Your code:

jQuery('form:first').submit(function (event){ ... });

...is binding a submit handler. To submit the form you need:

jQuery('form:first').submit();

If the only way the form can be submitted is via that link you can do that action setting stuff directly within the link's click handler before calling .submit() on the form. Or bind the submit handler separately (from outside the click handler or it'll keep binding additional handlers on each click) and then just call .submit() from within the click handler.

Upvotes: 0