将表单提交到侧栏菜单链接的目标（javascript/php/html表单）

我有一个多页表单，可以通过前进和后退按钮导航，也可以通过侧栏菜单导航

如果用户通过侧栏菜单导航离开页面，我希望避免当前页面上输入的数据丢失：

期望的目标：

当用户单击菜单中的链接时，表单的“action”属性将被调整以匹配该链接的目标。因为有几个页面，我不想硬编码几个“如果链接到page1.php是click，那么让动作等于page1.php等等”，而是一个可以在点击链接时调用的函数，并将动作设置为链接目的地是什么

我的尝试：

（我正在学习JavaScript，所以我真的在暗中摸索了一下，我想更好地理解

这个

）

这是我的html

<form id="myform" action="default_action.php" method="POST">

... form inputs...

<input type="submit" name="DefaultSubmit" value="Next Page">
</form>


<div id="navmenu" class="navmenu">
    <ul id="sidebarmenu1">
        <li><a href="?page=1" class="menu1" onclick="OnMenuClick()">Page 1</a></li>
        <li><a href="?page=2" class="menu2" onclick="OnMenuClick()">Page 2</a></li>
        <li><a href="?page=3" class="menu3" onclick="OnMenuClick()">Page 3</a></li>
    </ul>
</div>

... 表单输入。。。

下面是我对javascript的尝试：

<script>
function OnMenuClick()
{
document.myform.action ="this.getAttribute("href")"
document.myform.submit();
}
</script>

函数OnMenuClick（）
{
document.myform.action=“this.getAttribute（“href”）”
document.myform.submit（）；
}

我通过阅读各种教程将其拼凑在一起，但似乎有很多方法可以完成一件事，到目前为止，这对我不起作用，有什么建议吗？

试试：

<div id="navmenu" class="navmenu">
    <ul id="sidebarmenu1">
        <li><a href="?page=1" class="menu1" onclick="OnMenuClick(this)">Page 1</a></li>
        <li><a href="?page=2" class="menu2" onclick="OnMenuClick(this)">Page 2</a></li>
        <li><a href="?page=3" class="menu3" onclick="OnMenuClick(this)">Page 3</a></li>
    </ul>
</div>

<script>
function OnMenuClick(element)
{
    document.myform.action = element.getAttribute("href");
    document.myform.submit();
}
</script>

函数OnMenuClick（元素）
{
document.myform.action=element.getAttribute（“href”）；
document.myform.submit（）；
}

如果你愿意在你的网站上加入jQuery（而且大家都这么做了：），我建议如下：

<form id="myform" action="default_action.php" method="POST">

... form inputs...

<input type="submit" name="DefaultSubmit" value="Next Page">
</form>
<div id="navmenu" class="navmenu">
    <ul id="sidebarmenu1">
        <li><a href="?page=1" class="menu1">Page 1</a></li>
        <li><a href="?page=2" class="menu2">Page 2</a></li>
        <li><a href="?page=3" class="menu3">Page 3</a></li>
    </ul>
</div>

如果您刚刚开始使用javascript，那么jQuery是一个很好的入门平台，您只需在

标记中添加以下内容即可将其包含在站点中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

这个世界应该是：

<div id="navmenu" class="navmenu">
    <ul id="sidebarmenu1">
        <li><a href="?page=1" class="menu1" onclick="OnMenuClick(this)">Page 1</a></li>
        <li><a href="?page=2" class="menu2" onclick="OnMenuClick(this)">Page 2</a></li>
        <li><a href="?page=3" class="menu3" onclick="OnMenuClick(this)">Page 3</a></li>
    </ul>
</div>

<script>
    function OnMenuClick(t)
    {
      document.getElementById('myform').action =t.getAttribute("href")
      document.myform.submit();
    }  
</script>

函数OnMenuClick（t）
{
document.getElementById（'myform'）。action=t.getAttribute（“href”）
document.myform.submit（）；
}  

这里不需要使用jQuery。事实上，我已经在整个网站上使用jQuery，用于其他用途（我还不太了解它！所以这看起来会奏效。让我试着把它融入到我的真实代码中……谢谢！我知道，但我想如果有人只是在学习javascript，他们会对浏览器的差异和所有其他让人头疼的问题感到不那么沮丧，而库较少的javascript带来的问题。总有超过一个答案是：）没问题-如果你已经有了jquery，你也可以使用它：）-尽管确保你使用的是1.7或更高版本。on（）也不起作用，但你必须删除

onclick=“blah”

内容

<div id="navmenu" class="navmenu">
    <ul id="sidebarmenu1">
        <li><a href="?page=1" class="menu1" onclick="OnMenuClick(this)">Page 1</a></li>
        <li><a href="?page=2" class="menu2" onclick="OnMenuClick(this)">Page 2</a></li>
        <li><a href="?page=3" class="menu3" onclick="OnMenuClick(this)">Page 3</a></li>
    </ul>
</div>

<script>
    function OnMenuClick(t)
    {
      document.getElementById('myform').action =t.getAttribute("href")
      document.myform.submit();
    }  
</script>