为啥没有提交表单?

Posted

技术标签:

【中文标题】为啥没有提交表单?【英文标题】:Why is the form not getting submitted?为什么没有提交表单? 【发布时间】:2014-04-13 01:01:30 【问题描述】:
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.2/jquery.mobile1.4.2.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>


<script>
    $( "#submit" ).click(function() 
       $( "#my_form" ).submit();
    );
</script>

<body>
<form id="my_form" action="my_place.jsp" method="POST" style="align:center">
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Parameters:</h1>
        </div>
        <div data-role="rangeslider">
            <label for="range-1a">Support:</label> <input name="range-1a"
                id="range-1a" min="1" max="21" value="1" type="range"> <label
                for="range-1b">Support:</label> <input name="range-1b" id="range-1b"
                min="1" max="21" value="5" type="range">
        </div>
        <div data-role="rangeslider">
            <label for="range-2a">Confidence:</label> <input name="range-2a"
                id="range-2a" min="50" max="100" value="90" type="range"> <label
                for="range-2b">Confidence:</label> <input name="range-2b"
                id="range-2b" min="50" max="100" value="100" type="range">
        </div>
        <div data-role="fieldcontain">
            <label for="select-choice-1" class="select">Building:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="Library">Library</option>
                <option value="Hospital">Hospital</option>
            </select>
        </div>
        <input type="submit" name="Submit" value="Submit" id="submit">
    </div>
</form>
</body>

我正在使用 JQuery 移动滑块,一旦用户单击提交,我想将表单提交到 my_place.jsp。我的代码有什么问题?

【问题讨论】:

你可以在关闭表单标签()下面添加你的js代码或者使用document.ready。 根据您的代码,您的表单 ID 是 my_form 而不是 asso_form。 对不起。我在此处发布代码时正在简化代码。那是错误的。我更正了。还是不行! 【参考方案1】:

两件事

首先:将你的点击和提交函数包装成一个闭包函数。

$(function() 
    //your submit and click functions in here
);

您需要关闭它们的原因是因为您的点击和提交的侦听器在页面加载之前没有被实例化。这就是为什么它需要在这样的函数中......

第二:您可能遇到的另一个问题..(我知道是因为我对此有疑问)是您可能需要在您的表单上关闭 ajax.. jQuery mobile 的 ajax 存在一些问题,导致表单无法工作除非它关闭。

<form data-ajax="false" id="my_form" action="my_place.jsp" method="POST" style="align:center">

如果这些不起作用,请告诉我们!祝你好运!

【讨论】:

当然 :) 当我之前试图弄清楚这一点时,这很烦人.. 相信。我。但请确保您始终将 jQuery click 函数放在一个封闭的函数中,否则它们将无法工作......点击函数的正确语法(根据 jQuery 的新建议)是 $("my_div").on('click', function () );仅供参考。祝你的项目好运!【参考方案2】:

将您的代码放入 DOM ready handler $(document).ready(function()....); 或更短的形式 $(function() ....);

$(function () 
    $("#submit").click(function () 
        $("#my_form").submit();
    );
);

此步骤是必需的,因为您已将 jQuery 代码放在页面的 &lt;head&gt; 部分。上述任务用于确保在执行 jQuery 代码之前所有 DOM 元素都已正确加载

您还需要使用$("#my_form").submit(); 而不是$("#asso_form").submit();,因为您已将id="my_form" 分配给您的表单。

【讨论】:

我试过这种方式。但它仍然无法正常工作。您的第二半建议是在这里发布问题时打错的。 可能还有其他问题? 我不得不像例外的答案一样关闭 Ajax。感谢您的宝贵时间。【参考方案3】:

像这样写你的脚本:

<script>
    $(document).ready(function()
        $( "#submit" ).click(function() 
            $( "#asso_form" ).submit();
        );
    );
</script>

【讨论】:

以上是关于为啥没有提交表单?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的 html 表单中的数据没有提交?

为啥我提交了数据,服务器上的数据却没有改变

为啥表单提交没有捕获我在输入标签中设置的只读默认值?

为啥两次点击按钮时这个表单没有提交两次?

为啥我需要在提交按钮上单击两次才能提交我的表单?

为啥在提交表单后参数会自动传入 URL