We Keep Coding

Automatically click button once the page loads

I have a starting page with some text, where when I click show images button in starting page, It will redirect to another page and displays images.
<form>
<select name="images" id="images">
<option value="cars">Car Images</option>
<option value="cycles">Cycle Images</option>
<option value="bike">Bike Images</option>
</select>
<input id="getimages" type="submit" name="submit" value="Get Images">
</form>
when I select any of the option and click Get Images button, only then it will show images accordingly. But I want to display images with automatically selected option(first) when page loads with out clicking Get Images button. I tried using
document.getElementById("getimages").click()
but the page is reloading again and again. How can I solve this with JS/JQuery. I hope you understand the above issue. If not please let me know. Thanks.

If you auto click the submit button when page loads without any condition it will create an infinite loop.
You can use select onchange event.
<select name="images" id="images" onchange="document.getElementById("getimages").click()">
But it's not the optimum solution.
I recommend you to use an ajax request to load images without any page refresh.

I don't know if I understood you well but if yes then this might help you:
I don't have your JS code but I can guess that you have an event runned when clicked the input, so you could just add the same event which would run when the document loads. I mean something like that
const showImages = () => {
// the code that shows the images
}
document.querySelector("#getimages").addEventListener("click", showImages())
document.addEventListener("load", showImages())

Javascript - Watch for 1st interaction/change on form element

I would like to know how to go about watching for the first change event on a series of form fields/input elements (I have multiple selects/dropdowns and text inputs), and trigger something, but only trigger it once. Not every time an item is changed. And any one of the fields can trigger it.
My situation is I have a services calculator that outputs both a quote for self funding and also estimates which government package level will cover their needs, there's a lot of select input elements/dropdowns and I want any one of these to be able to trigger the event above but only once, (first interaction with the calculator basically) but they are not in a form because we don't need to submit anything, just display the results (this is dynamically updated as fields are changed using .onchange). All of this calculation logic is working correctly I don't need help with any of that.
I just want to know how one would approach this with vanilla JS, if at all possible?

Use event delegation: add an input event listener to an element that's a parent of all the <form>s (it could be the document.body):
let hasRun = false;
document.querySelector('.container').addEventListener('input', (e) => {
if (hasRun) return;
hasRun = true;
console.log('Handler running');
});
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>
Or, with the once option (warning, not supported in IE):
document.querySelector('.container').addEventListener(
'input',
(e) => {
console.log('Handler running');
},
{ once: true }
);
<div class='container'>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
<form>
<select>
<option>foo</option>
<option>bar</option>
</select>
<input />
</form>
</div>

How to accurately track Form Abandonment in Google Analytics using jQuery or JavaScript

I (and possibly anyone who's ever been asked to tackle this task) would like to accurately track "Form Abandonment" in Google Analytics through the use of jQuery (or JavaScript). This allows reports to be generated from Google Analytics that show how far users got into the form filling process before they left or didn't submit a form.
Is there a better way to track form abandonment for the below #'s 1 & 2 (suggestions for other steps would be extra credit) by the use of a jQuery event trigger that covers the below scenarios but doesn't require a complex script involving form validation? The below examples are what I've used thus far:
1.) Tracking a click on each form field. When the event fires it passes: "form - placeholder text" to GA. The problem with this is that some users will use the Tab key to cycle through the fields and never click or only click once on the fields. Example:
$("form field").click(function(event){ fire event code here });
2.) I attempted to add a .on('keydown') to each of the events so that when a user clicks OR when a user begins to type in a field, the same value as in step 1 is passed to GA. The problem here is that some users use Chrome auto-fill data which does not trigger a keydown or a click. This occurs when a user has saved form data in their browser or in a plugin and the fields are all auto-filled for them. Example:
$("form field").keydown(function(event){ fire event code here });
3.) For drop-down selection menus I use:
$("form select").on('change',function(){ fire event code here });
This usually suffices.
4.) For Text areas I have the same issue where the tab key can be used. Comments sections are not usually ever auto-filled (and they are not required fields so really not that important overall). For this I tend to use:
(placed within the same container so it only triggers one event or the other but never both).
$("form textarea").click(function(event){ fire event code here });
AND
$("form textarea").keydown(function(event){ fire event code here });
5.) For Radio Menus I typically use:
$("form input[type='radio']").click(function(event){ fire event code here });
This tends to work nicely since they aren't typically triggered by auto fills.
On all events I use a 3 minute timeout before the event can fire again to prevent/reduce duplicate triggering per page load (I also filter by unique events in Google Analytics to ensure duplicate events per user are not shown).
It would be nice if all scenarios could be covered via a simple $("").on("something"){ fire event values } so that it could be implemented inside of Tag Managers or used inside of JS scripts.
For this scenario let’s assume we only have the following form and we want to track all possible interactions with the elements so we can know where users are abandoning (Please do not comment on submit tracking): three inputs, one select drop down, three radio menus and one text area (remember to please try and account for auto-fill and the Tab key).
<form>
<input name="Name" type="text" placeholder="Name *" title="Name *" class="form-field">
<input name="E-mail" type="text" placeholder="E-mail *" title="E-mail *" class="form-field">
<input name="Phone Number" type="text" placeholder="Phone Number *" title="Phone Number *" class="form-field">
<select title="dropDown" name="dropDown" class="form-field">
<option value="0">Select Something</option>
<option value="1">Select Something Else</option>
<option value="2">Select Another Something</option>
</select>
<input type="radio" name="gender" value="male"> Male</input>
<input type="radio" name="gender" value="female"> Female</input>
<input type="radio" name="gender" value="other"> Other</input>
<textarea name="Comments" placeholder="Comments" title="Comments" class="form-field"></textarea>
</form>
Any tips or recommendations would be very helpful.
Thank you!

You can track focus instead of the other events, focus is a bit more reliable since the fields must be focused to be used.

GTM Event on Content

I can't see to find an answer to this one anywhere. I'm trying to setup a trigger and event tag in Google Tag Manager to fire whenever content is present. Essentially, I am creating a simple event in Google Analytics for Product Views. The developer for this site is expensive, so I'd like to handle it purely in GTM.
One piece of content that only exists on product pages is the submit on the cart button.
Can anyone recommend a method to inject some code with GTM to fire when content exists so I can trigger a tag off it?
Here is the html in and around the cart button. I'm thinking that I can fire something when class="clsAddCartRight" exists or the submit - either one:
<div id="variationGroup" class="clsViewItemVariationGroup clsOverflow" style="clear:both;">
<div class="clsViewItemVariationList clsOverflow" style="width:200px;margin:0 auto;">
<select name="item_variations" id="item_variations_496" onchange="getDetails()">
<option value="1606" selected="selected">Medium</option>
<option value="1607">Large</option>
</select>
</div>
<div class="clsItemSaleDetailBlockBottom">
<form name="purchaseItemFrm" id="purchaseItemFrm" action="http://www.runwaycrush.com/marketplace/cart.html" method="post">
<input type="hidden" name="item_id" id="item_id" value="1602">
<input type="hidden" name="c_action" id="c_action" value="add">
<input type="hidden" name="item_ref" id="item_ref" value="kanduclothing">
<input type="hidden" name="item_matrix_id" id="item_matrix_id" value="4721">
<div class="clsItemCartBlock clsFloatRight" id="addCartButton" style="margin:20px auto 0px; width:318px;">
<div class="clsAddCartLeft">
<div class="clsAddCartRight">
<input type="submit" name="add_to_cart" id="add_to_cart" value="ADD TO CART">
</div>
</div>
</div>
</form>
</div>
</div>

You can use a DOM type variable in GTM and use the "CSS Selector" option to select the element by classname (if the same class is there multiple times it will pick the first occurence). If you set the attribute name field to "class" the value for that variable will be the value of the class attribute.
Actually I think it would be better if you use the button itself and look for the "id" attribute with the value of "add_to_cart", because ids are unique per page (or should be).
However you also need an event to trigger a tag.
The value will be available only after the DOM has rendered. So the easiest way would be to set up a pageview and set the trigger type to "DOM Ready" and have if only fire when the value of your DOM variable matches the classname (or id respectively) of the button.
However if your product page urls follow any recognizable pattern it would be a lot better to use a url filter in a pageview trigger. That way you could have your tags trigger on pageload, which for many tags is much preferable.

jqtransform onclick events not firing

I have a form using the jqtransform jQuery plugin that gives forms an aesthetic makeover. However, I can't get my onclick events to fire.
I have a form setup similar to this:
<select name="person">
<option value="1">Yes</option>
<option value="2">No</option>
<option class="maybe" value="0">Maybe</option>
</select>
I also have a hidden div container which expands the form:
<div class="expander" style="display:none;">
More info <input type="text" name="moreinfo" />
</div>
Then the final piece of the puzzle:
<script>
$(".maybe").click(function () {
$(".expander").show("slow");
});
</script>
Any help would be greatly appreciated.

try using the change event instead of click.
http://api.jquery.com/change
here's a working example: http://jsfiddle.net/dwick/Sh4PA/

This is a dirty workaround, but works for me...
change the type of your input field to reset, then add an onclick event handler
<input type='reset' value='submit' onclick='$(#myFormId).submit()' />