为什么表单没有提交?

时间:2014-03-10 03:14:14

标签: jquery forms jsp jquery-mobile jqueryform

<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。我的代码有什么问题?

3 个答案:

答案 0 :(得分:1)

两件事

首先:包装你的点击并将函数提交到闭包函数中。

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

你在闭包中需要它们的原因是因为你的click和submit的监听器没有在页面加载之前被实例化..这就是为什么它需要在这样的函数中....

第二个:你可能遇到的另一个问题..(我知道,因为我有一个问题)你可能需要在你的表单上关闭ajax .. jQuery mobile有一些问题,ajax阻止表单工作除非它被关闭。

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

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

答案 1 :(得分:0)

将您的代码放在DOM ready handler $(document).ready(function(){....});或更短的$(function() {....});

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

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

此外,您需要使用$("#my_form").submit();代替$("#asso_form").submit();,因为您已将id="my_form"分配给您的表单。

答案 2 :(得分:0)

编写您的脚本,如:

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