We Keep Coding

Call a function in javascript only after page load

I have a button that is set up to call a javascript function to automatically activate a "tab" on a page. When that tab is loaded, there are subtabs that display. I am trying to set it up so that one of the subtabs is also automatically activated when the button is clicked.
Currently I can get the first tab to select, but I can't get the subtab to select. #detailsTab is the id of the first tab. #personal-information is the id of the subtab I am trying to select.
The following is what I have.
This is all in the same file:
HTML:
<button class="button button--primary button--sm" onclick="viewDetials()">View Details</button>
Javascript:
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
window.onload = function personalSubTab() {
$("#personal-information").click();
}
</script>

Try combining your functions and adding a short delay for the subtab.
function viewDetials() {
$("#detailsTab").click();
setTimeout(function(){
$("#personal-information").click();
}, 200); // This value can be tweaked
}

The following will be called when the document is ready.
<script type="text/javascript">
function viewDetials() {
$("#detailsTab").click();
personalSubTab();
}
function personalSubTab() {
$("#personal-information").click();
}
// Document ready
$(function () {
personalSubTab();
});
</script>

I'm not exactly sure what you want to do - but if you want to generate a click event on another button/div use trigger, not click - like this:
function personalSubTab() {
$("#personal-information").trigger('click');}

Run jQuery on page load with values from fields

I'm passing values from one page to another by posting them and then putting them in to hidden fields on the next page. I've tried using the initial values and that doesn't work either, so my assumption is that it's to do with the jquery not checking for initial values. This is what I want to run:
function check() {
var Q1 = $("#question1").val();
if (Q1 == 'yes') {
$(".A1").css("display", "block");
} else {
$(".A1").css("display", "none");
}
Where #question1 is the ID of the field populated from the previous page, but how do I get the check function to run when the page has loaded? I've tried adding:
<script type="text/javascript">
check();
</script>
To the bottom of the page with no success, the only way it works at the moment is by clicking a button with this applied:
$(".theanswer").click(function() {
check();
return false;
});
I'm sure there's probably a simple way i'm unaware of so any help is much appreciated.
Cheers

Your check() function uses jQuery to retrieve elements. Because of this, you need to run the function after the DOM has been loaded. To do that, place the call to check() within a DOM ready event handler:
<script type="text/javascript">
$(function() {
check();
});
</script>
Also, you can simplify the check() function:
function check() {
$('.A1').css('display', $('#question1').val() == 'yes' ? 'block' : 'none');
}

Warp it the call to check function in document.ready.
<script type="text/javascript">
$(document).ready(function(){
check();
})
</script>

Just create a js file and link it you your html page
JS File
$(document).ready(function(){
check();
});
function check()
{
var Q1 = $("#question1").val();
if (Q1 == 'yes')
{
$(".A1").css("display", "block");
}
else
{
$(".A1").css("display", "none");
}
}
Html link
<script type="text/javascript" language="javascript" src="yourjsfilename.js"></script>

Can't get Checkboxes to stop displaying a hidden Div

I have inserted some javascript to get two checkboxes in particular to display a hidden Div when they are checked and to make that Div disappear when they are unchecked. The issue I am having is that all of the other checkboxes are making the Div appear when they are checked. Now they do not fade in or fade out like the original two checkboxes are supposed to do. Instead they other checkboxes just make the hidden Div appear only. How do I prevent the other checkboxes from influencing the Div.
the page is http://asilverwareaffair.net/_NEW/request-a-quote/
the correct checkboxes are:
Wedding Reception (Ceremony is off site)
Wedding Reception (Ceremony on site)
they are located under "Type of Event" in the "Event Details" section
the Div: id="weddingselect" class="hide" is hidden but appear when any checkbox is checked. However it properly fades in and out when the correct checkboxes above are checked and unchecked. What would cause all the other checkboxes on the page to make the "weddingselect" Div become visable and how do I stop them?
Here is the JavaScript I used to make the div fade in and out with the Wedding Reception checkboxes:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#wedchk1').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
$('#wedchk2').change(function () {
if (this.checked)
// ^
$('#weddingselect').fadeIn('slow');
else
$('#weddingselect').fadeOut('slow');
});
});
</script>
HOWEVER: I don't think my javascript has anything to do with it because if I remove all javascript the checkboxes on the page still make the Hidden div appear when they are checked... it doesn't make sense to me.

You have the following code in your custom.js:
$('input[type="checkbox"]').change(function () {
if (this.checked) {
var chkVal = (this.value);
if(chkVal="Wedding Reception"){
$('#weddingselect').show();
//$('#weddingselect').css()
}else{
$('#weddingselect').hide();
}
}
//$('#weddingselect').hide();
});
That's why it's "working" even if you remove the mentioned script.

use $(this) not this.
thisis for native Javascript, $(this) is for jQuery.
Also use $(this).is(':checked') instead of $(this).checked..
And lastly, use {} for if else statements.
$(document).ready(function () {
$('#wedchk1').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
$('#wedchk2').change(function () {
if ($(this).is(':checked')) {
$('#weddingselect').fadeIn('slow');
}
else {
$('#weddingselect').fadeOut('slow');
}
});
});

How can I prevent double binding on JavaScript?

Here's my situation, I have a table which can add/remove rows dynamically and I need to bind the remove row when the page loads.
Here's my code:
<script type="text/javascript">
$(document).ready(function(){
$(".btnRemoveRow").bind("click", removeRow); });
</script>
But I also need to Bind another removeRow when I add rows here's on my external js
function addRow(){
{--add row code here--}
$(".btnRemoveRow").bind("click", removeRow);
}
so that the newly added rows will also be bind with the removeRow function,
here is my removeRow function:
function removeRow(){
var row = $(this).closest('tr');
var selected = row.find('input.qty,input.price,textarea,select').val();
$.getScript("calculate.js", function(){});
if(selected)
{
var r=confirm("Confirm Remove?");
if (r==true)
{
row.find('input.qty,input.price,textarea,select').attr("disabled", true);
row.find('input.hidden-deleted-id').val("yes");
row.find('.subtotal>center>h3').text("0");
calculate();
row.hide();
return false;
}
else
{
return false;
}
}
else{
row.find('input.qty,input.price,textarea,select').attr("disabled", true);
row.find('input.hidden-deleted-id').val("yes");
row.find('.subtotal>center>h3').text("0");
calculate();
row.hide();
return false;
}
};
Case 1: when I remove row without adding any rows first, it works fine (dialog box only appears once).
Case 2: when I add row first then remove the rows that were already bound on the page ready, dialog box appears twice.
Case 3: when I remove rows that I added, it works fine (dialog appears once).
(PS: still learning JavaScript)
Any idea how may I solve case no.2 please?

Add one event handler that is delegated, that way it will work for existing elements, and future elements
<script type="text/javascript">
$(document).ready(function(){
$(document).on("click", ".btnRemoveRow", removeRow);
});
</script>
replace document with the closest non-dynamic parent element.

Try this:
<script type="text/javascript">
$(function(){
$(".btnRemoveRow").click(function(){removeRow();});
});
</script>

How to hide a div on document ready, and then call it dynamically from Javascript?

I'm using this code to hide a div container where I'm placing text dynamically.
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
The problem I have is that I want to trigger the show div from a javascript function instead of a predefined click event. I've found this example which mateches the function I want, but I'm not sure how to trigger it from javascript instead of a click function.
JSFiddle Here

just hide the div using css
display:none;
.slidingDiv{
display:none;
}
and show it when ever you want using
.show()
$(".slidingDiv").show();
edit:
after you question edit, you can always trigger the click event programatically like
function yourFunction(){
$(".show_hide").click();
}

At any point in your script you can call the jQuery object with your div's id/class and run the show() function. i.e.
var javascript = "cool";
var foo = "I'm doing stuff";
var bar = "And some more stuff";
if (javascript === "cool")
jQuery(".slidingDiv").show();
else
$(".slidingDiv").show();

<script>
$(document).ready(function(){
$("input[type='file']").on("change", function () {
if(this.files[0].size > 1000000) //file size less than 1MB {
{
$("#fileAlert").show(); //calling a bootstrap 4 alert
}
$(this).val('');
}
});
});
</script>