0

進むボタンと戻るボタンの両方でナビゲートできる複数ページのフォームがありますが、サイドバーメニューからもナビゲートできます。

ユーザーがサイドバー メニュー ナビゲーションを介してページを離れた場合に、現在のページに入力されたデータが失われるのを回避したい:

望ましい目標:

ユーザーがメニュー内のリンクをクリックすると、フォームの「アクション」属性がそのリンク先に一致するように調整されます。いくつかのページがあるので、「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>

さまざまなチュートリアルを読んでまとめましたが、1 つのことを行うには多くの方法があるようです。これまでのところ、これはうまくいきません。何か提案はありますか?

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 に答える