How to refresh a quiz without refreshing the web page? - javascript

I'm trying to add button to refresh the Quiz after answering the questions incorrectly but when I click reload it reloads the whole page instead, I'm using the function below, really appreciate any help. thanks
$(function() {
$("#myButton").click(function() {
window.location.reload();
});
});
Working Example Here

It sounds like you want to reset the form instead of refreshing the page. window.location.reload(); is basically hitting CTRL+R.
Consider just resetting the form tag.
document.getElementById('myform').reset();
Keep in mind, however, that you'll still have to reset any values located elsewhere (like the js files) that were based on user input.
If you want to retain the results of the quiz and visit another webpage, then you'll need to use AJAX and store the values in a backend somewhere.

Related

Google Tag Manager Form - Thank You Page

I am trying to use google tag manager to have a tag that will fire every time the user submits the form and lands on the thank you page. In this scenario, I know an option is to use the Trigger: Page View, and then specify the thank you page URL in the conditional statement.
However, since this URL can be shared, I only want to track when the user submits the form and lands on the thank you page (not when the URL is accessed through other ways). What would be the best way to tackle this?
Why would people share the thank-you page? I can imagine sharing a form, but why would the url of the Thank you page get shared.
However, what you can do is track clicks on the button or link that submits the form.
I ll advise assuming you NEED to fire when the user gets to the ThankYou Page for X reason and CANT be done on the button submit click.
Add a custom HTML tag with a trigger on the click of the form submit button (you can use build in variables such as Click Classes) and add a 'flag' on the session storage or a cookie (choose the one you are more comfortable with).
Then generate a trigger that fires on the Thankyou page AND has the flag on.
Example:
Tag when user submit the form:
<script>
storage.setItem('flagSubmit', 1);
</script>
Custom JS variable that checks if user has flag:
function(){
return storage.getItem('flagSubmit');
}
If you need any more help just ask.
Hope it helps!
-- EDIT: add info
As you comment you cant detect if the flag is being saved properly so here is a code you can paste on the console that ll avoid you browser to exiting the page and allowing you to see if your click tag worked and registered on session storage you data.
window.addEventListener("beforeunload", function() { debugger; }, false)

Can I keep fields in a form populated even if I move to a different page and then back?

I am currently looking at creating a form using HTML, CSS and a bit of JavaScript. I was wondering though if anyone had any ideas how I could keep all the fields populated?
I want to be able to fill in a form and click 'Next' which will go to a different page with a different form. But if the user presses the 'Back' button to edit some information on the previous page for example, how would I keep all the fields populates?
Bit stumped on this, so any suggestions would be appreciated :)
You may use localStorage or cookies for that purpose to store content of the page on the client' side.
See https://stackoverflow.com/a/27273657/696034 for an example; in you case, you call save() when receiving location change event, and load() on the page' initialization.

Refine Data From MYSQL database with PHP and Ajax function

I have a php page in which at left sidebar i have a query form and at right sidebar i have space to display result when query form is submitted without refreshing the whole page, Problem is that the whole page get refreshed every time i have tried many ajax function but no one could help me.
I want to display like this-
http://www.makaan.com/jaipur-property/residential-property-for-sale-in-jaipur/search-properties
In this Page At LeftSidebar when i click any checkbox it display result without refresh whole page.
Please Help Me, Any help will be appreciated.
you should catch a submit event and tell him, in case you make in with jQuery,
something like
$(form).submit(event){
event.preventDefault();
...
}

Retain form inputs upon page refresh

i'm programming in web using php, and javascript , and this is a general question i'd like to ask, normally upon page refresh everything that is in a textarea or input gets deleted;
Is there a way to retain the user inputs, typed characters or checked checkboxes?without saving into session? or do i really need to save it? Thank you!
(i'm not talking about form submit that leads to reload, but just plain typing into textarea and then pressing the refresh button.)
There's a tutorial on it on Toasted Digital.

to restore a same id in the page when refreshed

I am working on javascript as well as jquery. and i am using 2divs in my page. so when my page loads the second div is hidden and when a button from the first div is clicked it navigates to the second page. so when i press refresh button now. the page navigates to the first div as it reacts when the page is opened for the first time. any ideas or suggestions to make the second div display even when the page is refreshed. thanks in advance. here is my fiddled code it works fine in the fiddle as i exactly want. but it fails in my project code. http://jsfiddle.net/pWryf/ . any example to attain this through cookies.?
Here is my code for the div:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
});
Try something like this using localStorage:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
localStorage['shown'] = '.cont1';
});
$(function() {
var sel;
if (sel = localStorage['shown']) {
$('.cont1, #log1').hide().filter(sel).show();
}
});
http://jsfiddle.net/5aJZR/
Use can also use cookies for this purpose.
I can think of atleast 2 frontend approaches to this problem:
using a cookie or a more modern localstorage solution to handle sessions. (already been here, cookie)
using a one page app, where navigations is after the hash # sign. such as in backbone webapps.
You can also use some kind of server side session handling, most web framework have one embedded.

Categories

Resources