Home/ Questions/Q 8899969
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T00:59:18+00:00

I have a multi page form, navigable both by forward and back buttons, but

  • 0

I have a multi page form, navigable both by forward and back buttons, but also via a side bar menu.

I want to avoid data that has been entered on the current page being lost, if the user leaves the page via the sidebar menu navigation:

Desired Goal:

When a user clicks the link in a menu, the “action” attribute of the form, is adjusted to match the destination of that link. As there are several pages, I’d rather not hard code several “if link to page1.php is click, then make the action equal page1.php etc”, so much as a function that can be called on click of a link, and will set the action to whatever the link destination is.

My attempt:

(I’m learning JavaScript, so I really am stabbing about in the dark a bit, I’d like to understand this better)

Here is my 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>

And here is my attempt at javascript:

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

I stitched it together from reading various tutorials, but it seems like there are many ways to do one thing, and so far this isn’t working for me, any suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are willing to include jQuery on your site (and hey, everyone’s doing it 🙂 ), I would suggest the following:

    <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>

    And the jQuery: 

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

    If you’re just getting into javascript, jQuery is a great place to get started and you can include it on your site just by adding to following to your <head> tag:

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