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.
Related
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'">
I have tried manipulating the code used by Ke Yang where localStorage is used to mirror text in form fields across to other fields. I want to do something similar.
I have one page (a library of downloadables) which contains about 10 lead-generation forms on it. Once filled out and submitted, the form sends the user the downloadable. Simple stuff. But say the user wants to download more than one thing on this page, it doesn't make sense to have them keep filling out the same forms. The forms are exactly the same, same fields and field-names, just different form IDs.
I want to use localStorage so that once a user has filled out one form on the page, they can check a box at the top of any of the other forms and the browser will autofill their data, then they hit submit. Ideally, this data is saved even after they leave the page. Data submission is handled by the form itself, so there's no need for cookies (and localStorage is better).
Here's the (minimalised) code I have so far, which goes under the (function($) { in my scripts.js file:
$( ‘input[name=target]’ ).click(function() {if($(‘input[name=target]’).is(‘:checked’)) {
if (localStorage[“first-name”]) {
$(‘input[name=first-name]’).val(localStorage[“first-name”]);
}
if (localStorage[“last-name”]) {
$(‘input[name=last-name]’).val(localStorage[“last-name”]);
}
if (localStorage[“your-email”]) {
$(‘input[name=your-email]’).val(localStorage[“your-email”]);
}
}
});$(‘.wpcf7-text’).change(function () {
localStorage[$(this).attr(‘name’)] = $(this).val();
});
Above you see the names of the different fields within one form. The HTML looks like this, where the checkbox would need to be ticked to call the stored form data:
<p><input id="target2" name="target2" type="checkbox" value="Downloaded our stuff before?" /> Downloaded our stuff before?</p>
<input type = "text" name ="first-name" class="wpcf7-text">
<input type = "text" name ="last-name" class="wpcf7-text">
<input type = "text" name ="your-email" class="wpcf7-text">
The text previously entered into a form will need to be stored (not cleared) after a user hits submit, allowing them to download more stuff easily after their first download.
Thanks heaps in advance!
It seems to me that there are too many issues in your code
1) $( ‘input[name=target]’ ) . This should be $("input[name='target']") .Check this link for more.
2) Use setItem to set the items
3) You need to use .on to delegate the change
I have to rewrite the html to make this work. Just for demo I used only three input field
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" crossorigin="anonymous"></script>
</head>
<body>
<p><input id="target" name="target" type="checkbox" value="Downloaded our stuff before?" /> Downloaded our stuff before?</p>
<input type = "text" name ="first-name" class="wpcf7-text">
<input type = "text" name ="last-name" class="wpcf7-text">
<input type = "text" name ="your-email" class="wpcf7-text">
<script>
$("#target").change(function(){
if($(this).is(":checked")) {
if (localStorage['first-name']) {
$("input[name='first-name']").val(localStorage['first-name']);
}
if (localStorage['last-name']) {
$("input[name='last-name']").val(localStorage['last-name']);
}
if (localStorage['your-email']) {
$("input[name='your-email']").val(localStorage['your-email']);
}
}
});
$(".wpcf7-text").on("change",function () {
localStorage.setItem($(this).attr("name") , $(this).val());
});
</script>
</body>
</html>
Before applying below solution make sure you have given id to your form and your all form controls will have name and id, name and id of control should be identical.
call bellow function before submmiting form
function beforeSubmmit(){
localStorage["YourFormID"] = JSON.stringify($('#YourFormID').serializeArray());
}
on load of page call bellow function
function onLoad(){
if (loadFromLocal == true){
var fromFileds = JSON.parse(localStorage["YourFormID"])
for(var formfiled in fromFileds)
{
$("#"+formfiled.name).val(formfiled.value);
}
}
}
and one more thing
$('#YourFormID').serializeArray()
this function returns array objects , and each object is having two keys name & value, name is name of form control and value contains value of the control.
Just store this array in local storage and retrieve on load and set if by for loop, no need to do hard coding.
$("form").length
this will give you total forms count
$("form")[0].id
and this will give you id of form, you can put for loop and store all forms in local storage
I am trying to select option and redirect page with form action post method to get some information and get back to previous page with those input value after submit by javascript. Could anyone tell me how to do that?
this is my code in js:
var elements = document.getElementsByName("shipping_id")[0];
elements.onchange = function(){
if(this.selectedIndex == 1){
var newWin = open('/test/static/src/html/test.htm','test','height=589,width=1004');
};
};
code in html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<form method="post" action="http://test.ashx">
<input type="submit" value="submit" />
</form>
</body>
</html>
Thanks and looking forward to hear answers!!
You can use localStorage or sessionStorage to save information and then pass it to another page.
Below is the link for localStorage and sessionStorage examples:
http://www.w3schools.com/html/html5_webstorage.asp
Check this answer for reference:
Send value from one page to another
This is what AJAX was invented for. Not to worry, it's actually pretty simple.
The point of AJAX is that (from the first page) you send data to another file, that file does something with the data (e.g. a MySQL lookup, and create a formatted table with the data in it) and returns the result, which your code then displays back on the (first) page.
The best thing about AJAX is that it does all this behind the scenes, and the page does not change or refresh or flash. It looks professional...
Take a look at these examples to see how easy AJAX is.
A simple example
More complicated example
Populate dropdown 2 based on selection in dropdown 1
Using AJAX to make a Login system
I am trying to get the value of a range slider after it moves and then update my page. I have approached this by using "onchange" and calling some javascript to set a value to a text box and using php to get that value. The php does not even grab the value from the text area on load and I am not sure why. It says the id of the input text box is an "unidentified index." There might be a simple thing wrong or I may be approaching it completely wrong. I am new to this...
Here is the code for the slider.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script>
function printValue(sliderID, textbox) {
var x = document.getElementById(textbox);
var y = document.getElementById(sliderID);
x.value = y.value;
}
window.onload = function() { printValue('slider1', 'rangeValue1')};
</script>
</head>
<body>
<form action='slider.php' method='get'>
<input id="slider1" type="range" min="100" max="500" step="10" onchange="printValue('slider1','rangeValue1')">
<input id="rangeValue1" type="text" size="2">
</form>
<?php
echo $_GET['#rangeValue1'];
?>
</body>
</html>
The js function does set input text box, but the php script doesn't happen. I need to get the value in PHP because the page I'm including it in is written in PHP. I don't know if, or how, the page has to be reloaded. I tried using location.reload() in the onchange function and it just continuously loaded the page.. Please help! Any input will be helpful! Thanks!
It looks like you might be getting Javascript and PHP mixed up.
PHP is run solely on your server when a browser accesses a php file. The output of the php file (like when you use echo) is sent as a webpage. However, Javascript is run solely in the browser. To make them communicate, you will need to load another webpage (or reload the current webpage). You can either use a form or directly craft the URL (probably easier in this case).
So you could do something like this inside printValue():
location.querystring="?value=" + x.value;
This will create a GET argument, which you can access with $_GET['value'], and reload the page.
EDIT: Performance Warning!
Every time the slider is moved, your server will end up resending the webpage, which could slow down the server. You might want to only send the new value after the user has clicked a button or something, in which case it would be easier to use a form.
I have two buttons, one called "Previous" the other is called "Next". When they are clicked, they reload the JSP page in which they are defined. They are also supposed to either increment or decrement a variable.
<form name="input" action="MyPage.jsp" method="post">
<html>
<input type="submit" value="Previous" onclick="<% hitsCount--; %>">
</html>
<html>
<input type="submit" value="Next" onclick="<% hitsCount++; %>">
</html>
The problem I am having is that I cannot figure out how to define the variable in such a way that it is not reset each time the page loads.
For example if "hitsCount" is 0, and I click the "Next" button the page should reload and the value of "hitsCount" should be incremented by one. The next time I hit the "Next" button, the page reloads and "hitsCount" should contain a value of 2.
you can use session storage for keep the values in the client side
Here is a link where you can see how session storage works.
You could always use html5 local storage:
var hitsCount = localStorage.getItem("hitsCount");
localStorage.setItem("hotsCount", hitsCount++);
If the user is using an older browser that doesn't support local storage, try setting a cookie instead. If you don't like either of these options then you'll have to pass the hitsCount variable to the next screen using a url paramater.