Develop Reference

How to track when a Radio button is clicked in Google Tag Manager without clicking the submit button/moving on from the page?

I've a pretty simple question but its been bothering me for a few days now. I want to track when someone clicks a radio button as a trigger or click, essentially to track the click and pull the data I need even if they haven't clicked submit or moved off the page. I just want to be able to do it when its clicked on the page but I can't seem to get my head around it in Google Tag Manager.
I ended up coming up with this so far but its pulling all clicks.
My solution was to create a custom variable that isolates the radio button by its class using Query Selector, then create a tag that fires on all clicks. The issue is that this is bringing back way more data than I need. It is bringing back random clicks on the page.
I tried to set it up in google tag manager as Some clicks, then set it to My Radio Variable - Equals - True but this didn't bring back anything at all.
My Radio Variable:
function () {
return document.querySelector('[class="radios__input"]:checked').id
}
I'm still new to this so any help would be greatly appreciated, thanks in advance.

This might require not only the variable.
Now you can get the id from the radio element which is great.
But you said it is returning a lot of other element you don't need so looks like it is lack of the trigger setting.
Trigger should be the important one in this scenario.
You can narrow down the range to only the radio element you want to track.
Like configure the trigger to
Click Element , match css selector , {Your special css selector to the radio button}
If you are not familiar about the above I mentioned. You can attach some screenshots about what is your trigger and variable and how you use it in your GTM.

How to prevent multidocument form page from reloading?

I'm working on a web app that takes the user through multiple forms with simple interface of a 'back' button, form, 'save' button and a 'next' button.
Clicking 'save' only calculates a number from given answers and sends it to localStorage.
When I then click 'next', it opens the next html file I prepared, constructed the same way, just with a different form. The problem is that if I press 'back', the form on the first page is empty, but when I use the browser's 'back' button, it's all there. How do I get this result with my 'back' and 'next' buttons? I'd like the user to be able to browse their answers as well as see a certain form already completed if they encounter it on a different path (there are various paths through 3 to 5 of 11 forms created, depending on what the user wants to calculate).
I understand it's opening the html file every time I click an 'a href', but I don't know how to change it. I tried searching for html form reloading prevention etc. but it doesn't seem to yield any answers. I'm not sure I know how to formulate my problem in a simple enough way.

Best simple solution would pretty much be what "Manolo" suggested.
Put all the forms you need in one HTML doc
Set all the form's style to "display: none" except the first
Create a simple JS function that changes the "display" style accordingly and attach it with the "onclick" attribute to your buttons.
Sorry for the lack of code. Typed this on mobile and hoped it would be straight forward enough. Hope this helped.

Load the forms as you need them using javascript to request them to your server. Use fetch api.
Other solution is to add all the forms to one page and hidde them all from the user. When the user click next you hide firstForm and show secondForm.

You can use History_API of DOM to manipulate the history
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
And can catch thee event of back and next button of navigator with
WindowEventHandlers

Clicking on a link hidden based on time

Well I am a newbie and i want to know that can I click on a link which is hidden and shows on a particular through JavaScript on console in Google chrome. I want to click on that link before the time it become visible. I noted its attribute tag when it becomes visible.
I want to click on below attribute tag which become visible on a particular time.
<a onclick="aplook(this,'01785','xxxx','xxx','10-12-2014','xx','xx',3);" id="refid2">Click Here </a>

The link first needs to load before an action can be perform on it.
You could use CSS to hide the link, and then use javascript to click on it.

Back button / bfcache: Object hidden in DOM via jquery is visible again when going back?

I have a webpage with a box that appears on the first visit.
In other parts of the site, there are 'back' buttons, and also, of course, the browser back button.
However, the when using the back button (browser or html), the box is visible again.
Is there a way to ensure that the box will not be displayed again when going back? Even removing the object completely with .remove() doesn't work.
I've made an example jsbin here:
http://jsbin.com/losilu/2/
First, click the link to hide the box, then click the second link to go forward.
HTML:
<div id="hide-on-back">
Make this go away
</div>
1. Click First To Hide<br/>
<br/>
2. Go Forward
JS:
$(document).ready(function(){
$('a#hide-box').click(function(e){
e.preventDefault();
$('#hide-on-back').fadeOut();
});
});
HTML/JS (Back Button):
<a id="go-back" href="#" onclick="function(){history.go(-1);}">Go Back</a>

As soon as you reload the page any modification you've done to the dom via javascript gets reset to its initial state. So, either you use ajax (e.g. with jquery.load I believe) to avoid getting the whole page reloaded or you provide a url parameter which you can check for via jquery (Get url parameter jquery Or How to Get Query String Values In js)
Last solution would be saving the information using cookies.

Populate form by link click before posting with jQuery

I'm building a small website with JQTouch and the first problem I've run into yet is with a form.
I have a form
<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>
(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:
<a class="submit" href="#" value="somevalue">Text displayed</a>
Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:
<input name='somename' type='hidden' />
On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())
The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.
My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?
Thanks in advance.

I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().
But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.