javascript - 根据从选择标签中选择的选项选择表单操作

Question

我对此很陌生，所以这可能不是解决这个问题的最佳方法。基本上，我试图在提交表单时运行三个 .php 文件之一。我运行哪个 .php 文件应该取决于用户从 id="periodDisplay" 的选择字段中选择的值。非常感谢一些帮助。

<script>

    function onSubmitForm(){

    if(document.getElementById("periodDisplayed").selectedIndex == 'This Week')
    {
        return document.selectDisplay.action ="thisWeek.php";
    }

    else if(document.getElementById("periodDisplayed").selectedIndex == 'This Month')
    {
        return document.selectDisplay.action ="thisMonth.php";
    }

    else if(document.getElementById("periodDisplayed").selectedIndex == 'All Workouts')
    {
            return document.selectDisplay.action ="allWorkouts.php";
    }

    else
    {
        return document.selectDisplay.action = "index.html";
    }
return true;
    }
</script>




<form id="selectDisplay" onsubmit="return onSubmitForm();">
    I want to see 
    <select id="unitDisplayed">
        <option>Distance</option>
        <option>Time</option>
    </select>
     for 
    <select id="periodDisplayed">
        <option>This Week</option>
        <option>This Month</option>
        <option>All Workouts</option>
    </select>

    <input type="submit"></input>
</form>

Answer 1

您是否调试以查看 selectedIndex 返回的内容？它返回一个整数，而不是所选选项的值/文本。

为什么搞得这么复杂。将值设置为您要访问的页面并引用它。所有代码都简化为一行。

HTML

<select id="periodDisplayed">
    <option value="thisWeek.php">This Week</option>
    <option value="thisMonth.php">This Month</option>
    <option value="all.php">All Workouts</option>
</select>

JavaScript

function onSubmitForm() {
    document.selectDisplay.action = document.getElementById("periodDisplayed").value;
    return true;
}

Answer 2

应该

function onSubmitForm(){

if(document.getElementById("periodDisplayed").value == 'This Week')
{

    document.selectDisplay.action ="thisWeek.php";
    return true;
}
....

document.selectDisplay.action = "index.html";
return true;

}