We Keep Coding

How to execute JS when page load instead of event trigger?

I'm trying to come up with a JS that detects number of empty fields in my form. I have 3 fields. If JS counted 2 or more empty fields, JS will change the css color to red. If JS counted 1 empty field, JS will change the css color to green. This works fine when i enter data into the input field. However, when i load the page with data already inside the two fields, the color still remain red. How can make the JS check if there already values in the input box and switch color accordingly based on number of empty fields when the page is loaded?
Below is when the page is loaded but showing red even though there are only 1 empty field.
I have checked all forums but no answer to my problem
'''HTML'''
<table>
<tr></tr><td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td></tr>
<tr><td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2"/></td></tr>
<tr><td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]"/></td></tr>
<tr><td> </td></tr>
</table>
<div id="result"></div>
<div class="containerbox">
<div id="centerbox1" style="background-color: #FF6C60;">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
</div>
</div>
</div>
</div>
'''JS'''
$(document).ready(function(){
$('.user_field').blur(function() {
var text = "field(s) empty";
var count = $('.user_field').not(function() {
return this.value;
}).length;
$('#result').html(count + " " + text);
//*alert(count);
var udata = count;
if (udata > 2){
document.getElementById("centerbox1").style.backgroundColor = '#FF6C60';
}
else
if (udata <= 2)
{
document.getElementById("centerbox1").style.backgroundColor = '#99C262';
}
});
});
I expected the background color to be green as there are 2 data in the fields when the page is loaded but the page shows color red.

Move the function out of the blur event handler, and call it from the ready() handler:
$(document).ready(function() {
// Function of its own
function checkFields() {
var text = "field(s) empty";
var count = $('.user_field').not(function() {
return this.value;
}).length;
$('#result').html(count + " " + text);
//*alert(count);
var udata = count;
$('#centerbox1').css('background-color', udata > 2 ? '#FF6C60' : '#99C262');
}
// Set up event handler
$('.user_field').blur(checkFields);
// Call function
checkFields();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr></tr>
<td> Field 1: <input class="user_field" type="text" name="1[user_fname]" value="1" autofocus/></td>
</tr>
<tr>
<td>Field 2: <input class="user_field" type="text" name="1[user_lname]" value="2" /></td>
</tr>
<tr>
<td>Field 3: <input class="user_field phone" type="text" name="1[user_mobile]" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<div id="result"></div>
<div class="containerbox">
<div id="centerbox1" style="background-color: #FF6C60;">
<div class="value">
<p><span style="color: #fff ;font-weight:bold; font-size:36px">test</span></p>
</div>
</div>
</div>
</div>

Adding new input using Jquery breaks tooltips

I'm writing a form and I have to let the user add as many rows as required.
As you can see, my inputs are treated as arrays to later save the data to the DB. (That will be another new thing to me)
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var fieldHTML = '<tr> <td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td> <td><input type="text" id="Descripcion" name="Descripcion[]"></td> <td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td> <td style="width: auto"> <div class="range-field "> <input type="range" name="NivelTRL[]" min="1" value="1" max="9" /> </div> </td> </tr>'; //New input field html
var x = 1; //Initial field counter is 1
//Once add button is clicked
$(addButton).click(function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(wrapper).append(fieldHTML); //Add field html
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="step-content">
<div class="container">
<div id="table" class="table-editable ">
<table class="table field_wrapper">
<tr>
<th>Nombre</th>
<th>Descripción</th>
<th>Aplicaciones</th>
<th>Nivel TRL</th>
<th><i class="material-icons">add</i>
</th>
</tr>
<tr class="">
<td><input type="text" id="NombreProyecto" name="NombreProyecto[]"></td>
<td><input type="text" id="Descripcion" name="Descripcion[]"></td>
<td><input type="text" id="AplicacionesProyecto" name="AplicacionesProyecto[]"></td>
<td>
<div class="range-field">
<input type="range" name="NivelTRL[]" min="1" value="1" max="9" />
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
Everything looks perfect but when the user adds a new row and interacts with the range input, this won't feedback the user about the value he/she is picking.
Just the original one will have the tooltip.
After some testing, it even affects the 'tooltipped' class used to, well, show tooltips over any element.
This is the codepen, It's all ready to show you the problem
How to reproduce it:
In the codepen provided, you will see the blue cross, when you click on it a new row will be added.
Play around with the first range input, it will show you the value on the tooltip.
In the later added range input, it wont.
Thank you for reading, have a nice day.

You should reinit your range elements.
Simply add this code
M.Range.init($('input[type=range]'));
after this
$(wrapper).append(fieldHTML); //Add field html

First, it's not a tooltip on that range input... It's the Materialize nouiSlider effect. So you have to initialyse this on the new element.
M.Range.init(element);
By the way, I did not found this specific is the documentation about range... But I got inspired by this other initialisation example.
CodePen updated

JQUERY AJAX LOAD-TEXTBOX FOCUS

I am trying to get the text in a div to show when the textbox beside the div is focused on. I am not seeing that text
Below is the jquery script
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function () {
$('#newroleHelpDiv').load('help.html');
});
//when textbox loses focus
txtbox.blur(function () {
$('#newroleHelpDiv').html('');
});
});
</script>
Below is the ASP code
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td> <input type="text" id="newrole" /> </td>
<td> <div id="newroleHelpDiv" runat="server"></div></td>
</tr>
</table>
</fieldset>
</asp:Content>
Below is the help.html file where the help text is coming from
<div id="newroleHelpDiv">
You may add an employee to this role
</div>

id should be unique so if you have id="newroleHelpDiv" main html, you should use another id for your help.html
not sure if you could load the html file, but if loaded it only once, then you can show and hide like this:
$(document).ready(function() {
$('#newroleHelpDiv').load('help.html');
$('#newroleHelpDiv').hide();
//$jquery selector
//find textbox and place it in a variable
var txtbox = $('input[type="text"]');
//when textbox recives focus
txtbox.focus(function() {
$('#newroleHelpDiv').show();
});
//when textbox loses focus
txtbox.blur(function() {
$('#newroleHelpDiv').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<fieldset style="width:350px">
<legend> New Role</legend>
<table>
<tr>
<td>Insert New Role:</td>
<td>
<input type="text" id="newrole" /> </td>
<td>
<div id="newroleHelpDiv" runat="server">You may add an employee to this role</div>
</td>
</tr>
</table>
</fieldset>

How to clear Input data from within JQuery Div

I have a simple form users can fill out and also add a new form to add multiple entries.
Everything works fine except when I enter data in the first set of inputs and click create new memberships it will take the data from the form and put it in the text boxes.
How can I stop that?
http://jsfiddle.net/811yohpn/2/
I have tried a couple different ways.
$('#education').find('input:text').val('');
$('#education: input').val('');
However that will clear all entries.

Call find on the newDiv, instead of all inputs within #education.
Updated fiddle
newDiv.find('input:text').val('');
var ed = 1;
function new_education() {
ed++;
var newDiv = $('#education div:first').clone();
newDiv.attr('id', ed);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:deled(' + ed + ')" > Delete Education ' + ed + ' </a>';
newDiv.find('tr:first th').text('Education ' + ed);
newDiv.append(delLink);
newDiv.find('input:text').val(''); // <----------- added this
$('#education').append(newDiv);
}
function deled(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('education');
parentEle.removeChild(ele);
//ed--;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<legend>Education</legend>
<div id="education">
<div id="1">
<table border=3>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Education 1</th>
</tr>
<tr>
<td>
<label>School Name</label>
<input type="text" name="schoolname[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Type</label>
<input type="text" name="degreetye[]" maxlength="30" size="30"/>
</td>
<td>
<label>Degree Field</label>
<input type="text" name="degreefield[]" maxlength="30" size="30"/>
</td>
</tr>
</table>
</div>
</div>
<br/><a class="js-addNew btn btn-info" href="javascript:new_education()"> Add New Education </a>

You need to clear the inputs under the cloned element
newDiv.find('input').val('')
Demo: Fiddle
Your selectors are selecting all input elements within the #education container, that is not what you want. The newDiv variable refers to the newly created element so you can use that to find the input elements within in and then clear it

JavaScript calendar not working when adding a div

I have a JS calendar script that works fine in one div. I also have a jQuery script that takes the div and clones it. The calendar script does not work in the cloned div, though. The calendar does not pop up. Here is my code:
<script type="text/javascript" src="tcal.js"></script>
<script>
$(document).ready(function () {
$('#addRow').click(function () {
$('<div/>', {
'class': 'extraPerson',
html: GetHtml()
}).hide().appendTo('#container1').slideDown('slow');
});
function GetHtml() {
var len = $('.extraPerson').length;
var $html = $('.extraPersonTemplate').clone();
$html.find('[name=puloc]')[0].name = "puloc" + len;
$html.find('[name=pudate]')[0].name = "pudate" + len;
$html.find('[name=putime]')[0].name = "putime" + len;
$html.find('[name=punumber]')[0].name = "punumber" + len;
return $html.html();
}
});
</script>
<div class="extraPersonTemplate">
<table frame="box" style="width:500px">
<tr>
<td colspan="3">
<?php
//php code to access mysql database
echo '<select name="puloc" style="width: 482px">';
echo '<option value="">--Select Origin Location--</option>';
while($opt = mysql_fetch_array($resultOptions))
{
echo '<option value="'.$opt['displayName'].'">'.$opt['displayName'].'</option>';
}
echo '</select>';
?>
</td>
</tr>
<tr>
<td>
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
Pick up date:<BR>
<input class="tcal" placeholder="" type ="text" name="pudate" style="width:130px">
</td>
<td>
Pick up time<br>
<input placeholder="" type ="text" name="putime" style="width:150px">
</td>
<td>
Pick up number<BR>
<input placeholder="" type ="text" name="punumber" style="width:150px">
</td>
</tr>
</table>
<div></div>
</div>
<div id="container1">
<script type="text/javascript" src="tcal.js"></script>
</div>
<i class="icon-plus-sign icon-white"></i> Add Origin</p>
Here is my javascript file on pastebin: http://pastebin.com/WEhJHUKe

The tCal code only runs once, when you generate the page (see the very final method in the js class, which adds an event handler for window.onload). It looks at the page at that time and adds the tCal element to the row it sees with the class 'tcal'. Adding another row (even with that class) will not trigger another update.
When you add another row, try running f_tCalInit() again--this should force it to inspect the page again, find your new row with the 'tcal' class, and append the date control to it.

Put the code that binds the calendar into a function, and after cloning and adding a new field to page, call the function again to bind the calendar again