0

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

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

期望目标：

当用户点击菜单中的链接时，表单的“action”属性会被调整以匹配该链接的目的地。由于有几个页面，我宁愿不硬编码几个“如果指向page1.php的链接是点击，则使动作等于page1.php等”，就像一个可以在点击链接时调用的函数，并将操作设置为链接目标。

我的尝试：

（我正在学习JavaScript，所以我真的有点在黑暗中刺痛，我想this更好地理解）

这是我的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>

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

4

3 回答 3

1

如果您愿意在您的网站上包含 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>

和 jQuery：

$(function () {
    $('#sidebarmenu1 a').on('click', function (event) {
        var url = $(this).attr('href');
        $('#myform').attr('action', url);
        $("#myform").submit();
        event.preventDefault();
    });
});​

如果您刚接触 javascript，jQuery 是一个很好的入门起点，您只需在您的<head>标签中添加以下内容即可将其包含在您的网站中：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
于 2012-11-29T05:15:18.770 回答
0

尝试：

<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>
于 2012-11-29T05:14:42.950 回答
0

这应该是世界：

<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>
于 2012-11-29T05:15:49.753 回答