开发者问题收集

无法以 javascript 形式设置属性

2017-10-18
63
javascript

我收到以下错误：

Uncaught TypeError: Cannot set property 'sort' of undefined

当我尝试设置其他变量 target 和 search 时，我收到相同的错误。

我看不出我做错了什么。我打算设置变量，然后将其传递给后端 php 脚本，该脚本随后将提交请求以对搜索结果进行排序。这应该很简单，但我不确定问题是什么。

如何设置这些变量以便我可以提交表单？

HTML： 

<div class="sort">
    <form name="loop54" action="cart.php" target="_self" method="get">
    <select id="sortBy">
        <option value="Rel" selected="selected">Relevance</option>
        <option value="PriceLoHi">Low to High</option>
        <option value="PriceHiLo">High to Low</option>
        <option value="A-Z">A-Z</option>
        <option value="Z-A">Z-A</option>
    </select>
    </form> 
</div>

JavaScript： 

var selectmenu = document.getElementById("sortBy");
selectmenu.onchange=function() {
    var selectedOption = this.options[this.selectedIndex];
    document.loop54.target="_self";
    document.loop54.sort = selectedOption;

    // the line below refers to another form and works
    document.loop54.search = document.ds_search.search.value;
    document.loop54.submit();
}

我创建了一个 jsfiddle 并且它在那里工作。一定是其他地方出了问题。

2个回答

您必须为 <select id="sortBy"> 元素设置 name 属性： 

<select id="sortBy" name="sort">
hsz
2017-10-18

如果您想使用 HTML 表单将数据发送到您的 PHP 脚本，那么您不应该操作代表您的 HTML 表单的 JavaScript 对象。

您的 HTML 表单的行为如下：如果它包含带有名称参数的字段（带有值的输入标签、带有所选选项的选择标签），它们将在 HTTP 请求中发送到数组中，其中：

  • 字段的名称是条目
  • 字段的值是值

因此，您不应该这样做，而应该这样做：

  • 添加一个名为“search”的输入文本字段，用户将在其中输入其搜索查询

  • 向您的选择添加名称参数

它看起来会像这样： 

var selectmenu = document.getElementById("sortBy");
selectmenu.onchange= function() {
    // you can keep using JavaScript to submit your form, but select your form with its id : 
    document.getElementById("loop54").submit();
}
<div class="sort">
    	<form id="loop54" pname="loop54" action="cart.php" target="_self" method="get">
    	<select id="sortBy" name="sortBy">
    		<option value="Rel" selected="selected">Relevance</option>
    		<option value="PriceLoHi">Low to High</option>
    		<option value="PriceHiLo">High to Low</option>
    		<option value="A-Z">A-Z</option>
    		<option value="Z-A">Z-A</option>
    	</select>
    	<input type="text" name="search_ds"></input>
    	</form>
    </div>

这样，您最终应该在服务器端得到一个 $_GET 变量，其中包含每个字段的键/值：sortBy 和 search。

Guillaume Georges
2017-10-18