Question

<!-- /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 -->

我在这里错过了什么..？

Answer 1

由于submit - 事件刚刚声明但从未调用过，您必须将submit - 事件置于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();
    });
});

Answer 2

代码

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

将在提交表单时指定要调用的事件处理程序。 它实际上没有提交表单。

要提交表格，您必须致电

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

或在表单中有一个提交按钮。

您的代码可以重写为

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
   });
});

此代码分配事件处理程序document.ready()事件，然后后续单击会触发提交。

Answer 3

使用jquery提交表单时需要使用表单ID。

替换 jQuery('form:first').submit(function (event){

使用 jQuery('#vehicle').submit(function (event){

Answer 4

为什么你不使用id选择器

jQuery('#vehicle').submit();

这比:first更快更好，应该提交表格..

Answer 5

您的代码：

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

...绑定提交处理程序。提交您需要的表格：

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

如果表单可以提交的唯一方式是通过该链接，您可以在链接的单击处理程序中直接执行操作设置，然后在表单上调用.submit()。或者单独绑定提交处理程序（从单击处理程序外部或者在每次单击时保持绑定其他处理程序），然后从单击处理程序中调用.submit()。

Answer 6

试试这个：

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

                });
            });
        });

jQuery不会提交表单

6 个答案: