Performing form action via submit button depending on the '<a>' link chosen from another different page using javascript
Question
There are 4 different HTML pages namely: "HomePage.html", "ABCpage.html", "Page1.html" & "Page2.html".
HomePage.html - In this page there are 2 links both when clicked are redirected to 'ABCpage.html'. The following is the HTML code below.
<body>
<a href="ABCpage.html" id="page1">Page 1</a>
<a href="ABCpage.html" id="page2">Page 2</a>
</body>
ABCpage.html - In this page there is only an input button named 'Enter', which when clicked should redirect either to "Page1.html" or "Page2.html" depending on the link choosed from "HomePage.html"
<body>
<form method="post">
<input type="submit" id="submit" value="Enter" />
</form>
</body>
"Page1.html" and "Page2.html" are just blank pages.
So what should I do to redirect from "ABCpage.html" to either "Page1.html" or "Page2.html" depending on the links chosen from "HomePage.html". Now I am purely using javascript for client side scripting and JSP for server side scripting and am not familiar with jquery. Now the link that I choose from "HomePage.html" should directly affect the form action in "ABCpage.html" for redirecting it further either to "Page1.html" or "Page2.html" depending on the link chosen. So what could be the javascript code for the following as I am finding it hard to get a solution for this.
2 answers
solution1
0 2015-11-11 07:57:47
You will need to pass query string params from the first page. So the href values on the links on the homepage should look more like this:
ABCpage.html?page=2 ABCpage.html?page=1
Then on the ABCpage.html you will need to parse the query string params from the URL using javascript and append them to your form action. The logic in your JS would read the query string params and determine the form action based on some basic conditional statements.
Here is a function you can use to retrieve the querystring param once you are on the ABCpage:
function getParameterByName(name) { name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]"); var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"), results = regex.exec(location.search); return results === null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " ")); }
solution2
0 2015-11-11 08:06:03
You need to remember the user choice. There are many ways to do it like using a cookie, local storage API or simply passing it by url.
The last is the simplest in my oppinion and you can do it basically in two ways:
a) By passing it as an url parameter that can be read server side which enables server to serve actually distinct pages even the only difference happening to be the form action url. That is:
- Link1 = abcPage.html?id=1
- Link2 = abcPage.html?id=2
b) By using the hashurl, that is not readable server side and then you really need to rely in javascript to read it (and detect its change if you want) from the location object.
- Link1 = abcPage.html#1
- Link2 = abcPage.html#2
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.