javascript - 在 Javascript 中访问 HTML 表单的值

Question

我是 Javascript 新手，我无法弄清楚为什么这段代码不能按我认为应该的方式工作。

这是我的 JavaScript 代码。我现在要做的就是从这些文本框和下拉菜单中获取值，并将它们连接起来。

<script>
function AdvancedSearch () {
var color = document.getElementByID("AdvSearchColor").value;
var ply = document.getElementByID("AdvSearchPly").value;
var cat = document.getElementByID("AdvSearchCategory").value;
var size = document.getElementByID("AdvSearchSize").value;
var description = document.getElementByID("AdvSearchDescription").value;
var fullsearch = ply + color + cat + description + size;
}
</script>    

<form id="advsearach" onsubmit="AdvancedSearch()">
Product Color: <input type="text" name="productcolor" id="AdvSearchProductColor"><br>
Product Ply Rating: <input type="text" name="productply" id="AdvSearchPlyRating"><br>
Product Category: <input type="text" name="productcategory" id="AdvSearchProductCategory"><br>
Product Size: <input type="text" name="productsize" id="AdvSearchProductSize"><br>
Product Description: <input type="text" name="productdescription" id="AdvSearchProductDescription"><br>
<input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form> 

所以我在一些琐碎的问题上遇到了麻烦，只是调试它并让它工作。已经花了几个小时了。感谢任何花时间查看此内容的人，从长远来看，它可能会节省我很多时间，这是一件非常好的事情。

Answer 1

您应该使用document.getElementById而不是document.getElementByID。有一个拼写错误“Id”!=“ID”。 并且您表单的 ID 必须与 javascript 表单 o.O 中的 ID 匹配

<form id="advsearach">
    Product Color: <input type="text" name="productcolor" id="AdvSearchColor"><br>
    Product Ply Rating: <input type="text" name="productply" id="AdvSearchPly"><br>
    Product Category: <input type="text" name="productcategory" id="AdvSearchCategory"><br>
    Product Size: <input type="text" name="productsize" id="AdvSearchSize"><br>
    Product Description: <input type="text" name="productdescription" id="AdvSearchDescription"><br>
    <input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form> 

<script>
function AdvancedSearch () {
    var color = document.getElementById("AdvSearchColor").value,
        ply = document.getElementById("AdvSearchPly").value,
        cat = document.getElementById("AdvSearchCategory").value,
        size = document.getElementById("AdvSearchSize").value,
        description = document.getElementById("AdvSearchDescription").value,
        fullsearch = ply + color + cat + description + size;
    console.log(fullsearch);
}
</script>