I am trying to use buttons in an html/javascript program to redirect someone to another one of my pages. Basically, I created a .jsp page that gives the user some buttons to click. If the user clicks a button, it calls a method that is supposed to open a new .jsp page that I created under the same project. However, I have no clue how to do this as I am brand new to Javascript and HTML. I provided an example below:
Sample Page
<html>
<title>Web Page</title>
<body>
<p>Please click a button to redirect you to the page you wish to go to.</p>
<br>
<form>
<input type="button" id="idname" value = "General Info " onclick="goToInfo()"/><br>
</form>
<br>
<form>
<input type="button" id="idname" value = "Other Information" onclick="goToOther()"/><br>
</form>
<script type="text/javascript">
function goToInfo(){
}
function goToOther(){
}
</script>
</body>
</html>
*For example, I have another page in my NetBeans project that is called "GeneralInfo.jsp" and I want goToInfo() to be able to redirect the person to that page. Thank you for your help.
You could use window.location to redirect the user to the corresponding JSP pages; however, you'll need to make sure your paths in the code below match the actual paths to your JSP page as mapped by your servlet or based on the absolute path relative to the application.
function goToInfo(){
window.location = '/GeneralInfo.jsp';
}
function goToOther(){
window.location = '/someOtherJSPPage.jsp';
}
If you get 404 errors when trying to redirect to your JSP page, try turning up your logging level to ALL or DEBUG so that you can see the logs from the framework or Java container, these will hopefully show you the real file paths so that you can then adjust the URL to match the actual target location.
this should open new tab with GeneralInfo.jsp when you click on the General Info button..
function goToInfo(){
window.location = "GeneralInfo.jsp";
}
you can use this method,
<input type="button" value="General Info" name="INfoPage"
onclick="document.forms[0].action = 'infoPage.jsp';" />
or the easy way is,
General Info
Related
I have the following three php files:
reports.php, bwdates-reports-details.php and visitor-detail.php
reports.php contains my form which inputs the from and to date (erased some parts for brevity):
<form method="post" action="bwdates-reports-details.php">
...
<input type="date" id="fromdate" name="fromdate">
...
<input type="date" id="todate" name="todate">
<button type="submit" name="submit">Submit</button></p>
</form>
bwdates-reports-details.php outputs whatever parameters inputted in "fromdate" and "todate" of reports.php, see image below
As you can see in the image, there is an option to view the details of a transaction by clicking the "View Details" icon - i class="fa fa-edit fa-1x".
In view details (visitor-detail.php), There is a "Go Back" button.
<div align="center">
<button onclick="goBack()">Go Back</button>
</div>
There is also a goBack javascript function:
<script>
function goBack() {
window.history.back();
}
</script>
But when the go back button is clicked, I am getting Confirm Form Resubmission error. What I wanted to achieve with the "go back" button is to be able to go back to bwdates-reports-details.php with all the variables I passed through in reports.php. How do I achieve what I wanted to do? Please take note that this isn't a purchase related website. php or javascript will do. Thanks!
If a form is submitted (probably with the POST method), you send this data to the new page that is then opened. This page is also added to the history not only with the URL but also the sent data.
If you then leave this page and want to navigate back to this previous page you will get an "Resubmission" error, because the browser would need to send the data again to do so, but that is probaby a bad thing to do, because the data of the form would be sent twice. (Imagine that was a purchase form and the client would buy everything again.)
To make your goBack function work there are no other ways than get rid of that form submission page somehow or put a page in between that is not a form-data-receiver.
The best way would be to not go back in the browser history if you don't know from what pages the user navigated to this. Instead just navigate to an overview or dashboard.
Edit:
If that page your working on is only accessible by that response page of the form, maybe going two pages back will fix your error: history.back(2);
Because your form is using POST method and when you click on goBack button, it goes on previous page without variables. You may use put dates variable with goBack button and also use
if(isset($_GET['your variable name'];
{`fetch your variables`}
on your previous page.
Desired result was achieved by using the GET method instead of POST method (see https://www.tutorialspoint.com/php/php_get_post.htm). reports.php form code was replaced from:
<form method="post" action="bwdates-reports-details.php">
to:
<form method="get" action="bwdates-reports-details.php">
In bwdates-reports-details.php where I have the following variables:
$fdate=$_POST['fromdate'];
$tdate=$_POST['todate'];
Instead I replaced it with:
$fdate=$_GET['fromdate'];
$tdate=$_GET['todate'];
The goback javascript function I have in visitor-detail.php stays the same. And works like a charm. Thanks and cheers!
Hello I created a simple application that allows me to do a database search. I created an html page with functions in javascript. This is what shows my index.html
<hmtl>
<body onload="initialize()">
<h1>Choose your route:</h1>
<form action="/find" method="POST" autocomplete="on">
<td><input type="text" name="mypos" placeholder="Your Position" size="20" /></td>
<td><input type="text" name="yourpos" placeholder="Destination" size="20" /></td>
<td><button type="submit">Search</button></td>
<button type="Reset" value="Reset">Reset</button>
<div id="map_canvas" style="1500px; 1000px"></div>
</body>
</html>
After inserting the coordinates in the changes and then searching, my output will be a separate line where I can print to the screen if the route exists or not ie: Route not found or Route found.
My problem is to insert a button to go back to this point in the search so as to go back to the start page or index.html. The problem is that I only have one html page (index.html) so any command can only insert it in the search page and not in the results page (the results page is just a printed string is not another html page). This page also interacts with flask. I hope I was clear. Thank you very much for the attention.
As far as I could understand, what you have is index.html doing a postback, and the response of that postback renderizes a different page with the result of the insertion. And it's that result page from where you want to back to index.html. Well, you have two options:
1. In the result page, create a button like this:
<button class="backbutton">Back</button>
<script>
// Somewhere in your initialization code:
const backbutton = document.querySelector('.backbutton');
backbutton.addEventListener('click', function(){
window.history.back();
});
</script>
That gives you some flexibility because it doesn't depend on the route to your index.html page.
2. Simply include a link to your index.html page in your result page:
<a href="index.html">Back to search form</button>
If you want to use the values from a form input after the form is submitted (and cleared), you need to have memorized the value somewhere beforehand. One way to do this is to add (to the input) a listener for the blur event (which happens when the input loses the focus, implying that the user is done editing the input).
In the listener function, you can store the value in a javascript variable for later, like
const firstMyPosInput = document.getElementsByName("myPos")[0];
let myPosValue = firstMyPosInput.value;
Now you can add a new button element (like <button id="myBtn">Try again</button> and give it a click listener that sets the input's value back to what it was before like firstMyPosInput.value = myPosValue.
I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";
My Form Works Successfully But in website URL it only Shows the address to a Form.I have multiple Pages in which the Form button shown.All I want when a user click on The Form for Page A for that Particular page it should shown as
"www.form.com?test=page A" - this should displayed on website URL
or when the Form is submitted the receiver should view that this form coming from Page A..In the Form field I hidden this fields name 'Test' so the user cannot see it but only the receiver can view it that its coming from Page A
On my Html code I have redirected to the Build in Form.
Here is my java script code
<script type="text/javascript" src="http://test.com/form/y.php/test2"></script><no1script>Online Form - </no1script>
How to show it to my Website URL
I understand your question as "How can I redirect with a specific GET parameter?", correct me if I'm wrong.
The solution for that would be quite simple: Append the GET parameter to the forms action:
<form action="target.php">
gets
<form action="target.php?test=page_a">
so that on target.php if you evaluate the GET values, test has the value page_a.
If you're trying to hide the post data, you can try something like:
<form action="https://test.com/forms/discount" style="display:none">
<input type="text" name="couponCode" value="secret">
<input id="myform" type="submit">
</form>
<script>
document.querySelector("#myform").click();
</script>
Note: This won't stop any web ninjas, so you should think of something else, like web tokens that function sortta like private public keys.
I have two html pages one is parent.htm and other is child.html where i have given href in parent.htm' tochild.html, here i have to access the elements ofparent.htminchild.html`, here are my two files
parent.htm
<!DOCTYPE html>
<html>
<body>
<form>
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<html>
<script type="text/javascript">
function parent(){
//here i want to access values from parent.htm page, but does not work
var value = parent.getElementById('text1').value;
var value2=top.getElementById('text1').value;
alert(value);
}
</script>
<body onload="parent()">
<form>
</form>
</body>
</html>
Thanks in advance
Probably the easiest way to do what you want is through a cookie. It's a small text file stored on the client that can persist values across pages. If you don't specify an expiration date, the cookie will expire when the user closes their browser.
Cookie tutorial
Edit
Something else you could do is use Javascript to submit the form by clicking on the link. I think it's formname.submit() - which would allow you to read the values out of the form post. (Though it would be a little more work than just reading the cookie)
If you're only passing one or two fields I'd use the cookie. More than that you may want to consider submitting the form through Javascript.
First change the following:-
Open kid
to :-
Open kid
target="_self" means that the child page will open in the same parent window, effectively destroying the parent and its code.
Afterwards, access the parent's form textbox element with:-
var parentTextBox = window.opener.document.getElementById('text1');
I think you cannot do that, at least the way you are trying.
Once you clicked on "Open kid", your current page will be replaced by the new one, so you can't access that attribute.
You should be able to get around this by using cookies, passing the needed values in the url or with Web Storage.
You should be able to user window.opener to grab a reference to the parent window.
var parent = window.opener
I see -- you cannot access DOM elements from a previous page via javascript (AFAIK).
This is traditionally handled with HTTP post variables, passing the form variables collection to the subsequent page via some back-end procedures.
Or (as Moje notes) open the page in a new window so you can access the parent with window.opener
parent.htm
<!DOCTYPE html>
<html>
<body>
<form method="GET" id="myform" action="child.html">
<input id=text1 type=text name="test2">
Open kid
</form>
</body>
</html>
child.html
<!DOCTYPE html>
<html>
<body onload="alert(window.location.toString().split('?')[1].split('=')[1])">
</body>
</html>
Might contain some typo, but the idea is to submit form by GET to the child and then read GET parameters from window.location after child.html is loaded.