使用jQuery Mobile的HTML5表单将不会提交

时间:2011-12-31 05:47:49

标签: jquery html5

我从一个例子开始工作并构建了这个:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <script>

        jQuery(window).ready(initiate_geolocation);

        function initiate_geolocation() {
            navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
        }

        function handle_errors(error)
        {
            switch(error.code)
            {
                case error.PERMISSION_DENIED: alert("user did not share geolocation data");
                break;

                case error.POSITION_UNAVAILABLE: alert("could not detect current position");
                break;

                case error.TIMEOUT: alert("retrieving position timed out");
                break;

                default: alert("unknown error");
                break;
            }
        }

        function handle_geolocation_query(position){
            document.geo.lat.value=position.coords.latitude;
            document.geo.lon.value=position.coords.longitude;   
        }
    </script>
    <title>GPS data collection</title>
  </head>

  <body>
    <form action="processgeo.php" method="post" enctype="multipart/form-data" name="geo" id="geo">
        <fieldset>
        <label for="lat">Lat</label>
            <input type="text" id="lat" name="lat" />
            <br />
        <label for="lon">Lon</label>
            <input type="text" id="lon" name="lon" />
            <br />
        <label for="title">Title</label>
            <input type="text" id="title" name="title" />
            <br />
        <label for="type">Type</label>
            <select name="type" id="type">
                <option value="entrance">entrance</option>
                <option value="intersection">intersection</option>
                <option value="parking">parking</option>
            </select>
            <br />
        <input id="submit" type="submit" value="Send data" />
        </fieldset>
    </form>
 </body>
</html>

我尝试了各种修改,但表单不会提交。当我点击提交按钮时它只是闪烁,但不会尝试加载动作文件。

我发现的一件事是,如果我删除所有脚本标签,表单提交就好了。为什么在页面中包含jQuery编码会阻止它提交?我不是试图对输入进行任何验证。

我已经验证了操作文件“processgeo.php”的存在,甚至尝试将操作设置为发布到自身。相同的结果。

更新2012-01-17:

我一直在修补它,它开始工作了。我现在不记得改变了哪一项让它发挥作用。与上面发布的代码相比,我看到了这些变化:

  1. 在主题部分添加了<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css">

  2. 将表单更改为enctype =“application / x-www-form-urlencoded”

  3. 如果找到使其有效的特定项目,将再次编辑。

1 个答案:

答案 0 :(得分:1)

我认为这与enc类型有关,为什么它是一个多部分形式? 尝试:application/x-www-form-urlencoded

希望它有所帮助!