Question

我在带有两个输入的页面上有一个表单。在提交时，我希望页面重定向到包含两个输入的值的链接，以及前面的字符串。 html如下：

<form name="searchForm">
    <label for="property_type">Property Type</label>
    <select name="property_type" id="property_type_number">
        <option value>- All Property Types -</option>
        <option value="1432">Commercial</option>
        <option value="1433">Land</option>
        <option value="1434">MultiFamily</option>
        <option value="1435">Rental</option>
        <option value="1436">Residential</option>
        <option value="1988">Residential / Condo</option>
        <option value="1987">Residential / Single Family</option>
    </select>

    <label for="city">City</label>
    <select name="city" id="city_number">
        <option value>- All Property Types -</option>
        <option value>--</option>
        <option value="cambridge">Cambridge</option>
        <option value="zanesville">Zanesville</option>
    </select>

    <input type="submit" value="Search for Properties" onclick="searchform()">
</form>

Javascript如下：

function searchform() 
{
    var propertyType = document.getElementById("property_type_number").value;
    var city = document.getElementById("city_number").value;

    target = "/idx/?" + city + propertyType + "hi";

    document.searchForm.action = target;
}

当我提交表单时，它似乎只使用目标变量的第一个字符串（“/ idx /？”）但忽略其余的。然后它会自动插入表单中的值。我希望它能够转到上面的自定义目标。

如果你想在网上看到它，地址是：http://lainegabriel.net/（它是左边的最后一个小部件）。

Answer 1

改变这个：

var propertyType = document.getElementById("property_type_number").value;
var city = document.getElementById("city_number").value;

用这个：

var select = document.getElementById("property_type_number");
var propertyType = select.options[ select.selectedIndex ].value;
select = document.getElementById("city_number");
var city= select.options[ select.selectedIndex ].value;

有什么不同吗？
我知道它的代码更大，但我从来没有遇到过这个问题（在我切换到 jquery 并忘记所有这些问题之前......）

Answer 2

好吧，我无法解释为什么表单行为如此，或者为什么它不起作用，因为看起来网上的每一点信息都表明你正在做的事情。但是，我可以，提供解决方法：

首先，将您的html更改为此，从提交按钮中删除'onclick'，然后替换表单标记：

<form name="searchForm" onsubmit="return searchform();">

其次，在searchform()函数中：

function searchform() {
    var propertyType = document.getElementById("property_type_number").value;
    var city = document.getElementById("city_number").value;


    target = "/idx/?" + city + propertyType + "hi";

    document.searchForm.action = target; // I just left this in here just in case you wanted it.
    window.location.href = target; // redirect the window to the new url/action
    return false; // prevent the default submit action from occurring
}

Demo

使用Javascript设置时表单操作不正确

2 个答案: