Question

在phonegap中，我使用了一个jquery移动框架。我想通过使用页面url将表单数据传递到下一页，这是一个div。我尝试使用GetElementByID来检索参数。它向我显示“[object HTMLDivElement]”。我不是我想要的结果。我该如何解决？

下面是更改为下一页的功能DIV是我的phonegap的代码：

<script type="text/javascript">
$('#home').live('pagecreate',function(event) { 
    $("#form").submit( function (e) {
            e.preventDefault();
            var x=document.getElementById("search");
            $.mobile.changePage("#page1?param1="+x);
    });
});
</script>

表格html：

<form id="form" method="POST" action="page1" data-ajax="false">
                <div data-role="fieldcontain" id="search">
                    <fieldset data-role="controlgroup">
                        <label for="search">
                            Search
                        </label>
                        <input name="search" id="search" placeholder="" value="" type="search" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain" id="searchmethod">
                    <label for="searchmethod">
                    </label>
                    <select id="searchmethod" name="searchmethod" data-theme="e">
                        <option value="keyword">
                            Keyword
                        </option>
                    </select>
                </div>
                <div data-role="fieldcontain" id="searchlocation">
                    <label for="searchlocation">
                    </label>
                    <select name="searchlocation" data-theme="e">
                        <option value="Entire Collection">
                            Entire Collection
                        </option>
                    </select>
                </div>
                <input type="submit" value="Submit" />
            </form>

Answer 1

编辑：刚刚注意到您有两个ID为search的元素。你应该改变这个。这不仅会让任何阅读您的代码的人感到困惑，而且还会导致您遇到的问题，例如您在此处遇到的问题。 getElementById会返回具有指定ID的第一个元素。在你的情况下，这是一个div，而不是输入。

但是，如果你真的想坚持自己拥有的东西，那么你可以这样做：

var x = $('input#search').val(); //Suggesting jQuery since you're already using it.

编辑：根据您的评论，这是如何做到的。 jQuery的val()函数非常支持select和复选框。您所要做的就是在select元素本身上调用val()，它将返回当前选定的值。所以，这样做：

$("[name='searchmethod']").val();
$("[name='searchlocation']").val();

我真的建议用ID而不是名字来做。我是通过名字来做的，因为和以前一样，你有多个具有相同ID的元素。在99％的情况下，这是禁忌。

Answer 2

您有多个ID为“search”的HTML元素，这很糟糕。 ID应该是唯一的。当您调用纯javascript函数getElementById时，它会返回第一个匹配项，即<div data-role="fieldcontain" id="search">。

您应该更改DIV或INPUT的ID。然后你可以使用joeframbach建议的内容：

var x=document.getElementById("searchInput").value;

或者您可以使用jQuery选择元素并获取其值：

var x=$("input#search").val();

要在问题中获取HTML结构的搜索方法和搜索位置：

var method=$("select#searchmethod").val();

var location=$("select[name='searchlocation']").val(); // locate element by name since ID is not set

从表单中获取参数

2 个答案: