how do I change URL on page load javascript - javascript

I am trying to change url of the page by using
<body onload="location.replace('new url')">
but I want this to be back to my old URL on click un checking of a check box.
so suppose i have a checkbox as follows:
<input type="checckbox" checked>
as soon i uncheck it the page should go to the old url

use window.location.href instead.
<body onload="window.location.href = 'https://google.com'">

Related

Add hidden form variable to the end of the URL

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

How to pass value to other page when click an anchor tag?

I am begineer of Perl. I'd like to ask how to pass value to other page when clicking an anchor tag?
The part of code are:
# ...
$cq = new CGI;
$cq->param('user');
# ...
$htmlout.='<form name="mainform" method="POST" action="/scripts/yyyy.plex">';
$htmlout.='<input type="text" name="user" value="'.$user.'"/>';
$htmlout.='Link to Page A';
$htmlout.='<input type="submit" name="pageB" value="Click to Page B"/>';
# ...
print $htmlout;
I want to pass the value that user keyin can retain on every page, I try to use $cq->param('user') or pass in url but only work on Page B, any way I can get the value that user keyin after click the link to Page A?(without ajax)
note: Labels have the name "user" exist every other page.
Produce the following output from your script:
Link to Page A
If the value isn't known when you build the page, you'll need to use JavaScript (to build the URL or to submit a form).
Link to Page A

How can persist value of radio button after refreshing page using javascript?

We want get selected value of radio button after refreshing page. We have two radio button like Online & Offline. If I select Online and then after refreshing page at that time I want selected value of radio button back.
You can use following things :-
1) localStorage -HTML5
2) cookies ..
I would recommend using localStorage
before refreshing page set local storage:-
localStorage.setItem('radioBtnId',valSelected);
//valSelected is the selected value of radiobutton.
and after refreshing page, do
var val=localStorage.getItem('radioBtnId');
and use val to default select the radioButton.
Also delete the localstorage value because you don't need it any more as:
localStorage.removeItem('radioBtnId');
Adding code as given in the comment
<html>
<head>
<script>
function setDefaultValue(id)
{
localStorage.setItem('status',id);
}
function getDefaultValue()
{
var valId=localStorage.getItem('status');
document.getElementById("valId").checked = true;
localStorage.removeItem('status');
}
</script>
<title>
</title>
</head>
<body>
<form>
<input id="statusOnline" type="radio" value="Online" onchange="setDefaultValue('statusOnline');">
<input id="statusOffline" type="radio" value="Offline" onchange="setDefaultValue('statusOffline');">
</form>
</body>
</html>
haven't tested this code .. just giving you the Idea how it will be used . Hope it helps ...
Use Local storage.
localStorage.setItem('some key',radiobuttonValue); //To set values
localStorage.getItem('some key'); // To get values
These values will be stored on your browsers storage. Note that this doesnt work if user clears the cache.

Passing variables in URL

I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.

Method to open another jsp page in Javascript

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

Categories

Resources