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>

Appear a textbox only when the checkbox is checked and not save the field in the database if is not checked

Sorry for english grammar, not my native language.
I want to show a textbox only when the checkbox is checked. So, i have this code:
HTML
<table>
<tr>
<td>
<input type = "checkbox" id="NCFtxt" onclick="obtenerNCF()"> Marcar casilla para generar Comprobante Fiscal
</td>
</tr>
<tr>
<td>
NCF: <input readonly="readonly" name= "txtNCF" type= "text" id= "txtNCF" value= "<?php echo $cobro->ncf; echo $ncf; ?>" />
</td>
</tr>
</table>
JAVASCRIPT
<script language="javascript">
$("#txtNCF").hide();
function obtenerNCF() {
var chequear = document.getElementById("NCFtxt");
if (chequear.checked == true){
$("#txtNCF").show();
} else {
$("#txtNCF").hide();
}
}
</script>
So, this is "working", is hiding the field when the checkbox is checked, but still saving the data at the Database. How can I do to not only hide the field, but neither saved in the database? I was trying some things but none worked, this seems simple, but it confusing me

If you don't want to save something based on a checkbox... look at the $_POST if the checkbox has a value or not (if not, then it was not checked). Then save or not-save the extra data.
Give the checkbox a name and value:
<input type="checkbox" name="NCFtxt_checkbox" value="1" id="NCFtxt" onclick="obtenerNCF()">
And in PHP look for it:
if ( empty($_POST['NCFtxt_checkbox']) ) {
// dont save extra data
} else {
// else do save the extra data
}
A second solution is to use a lot of javascript, and when the checkbox is UN-checked, you clear-out the content of the other text box as you hide it. That way it would be submitted 'emtpy' to begin with.

how to identify submit() that arrived from javascript method(not button) in asp.net

I have a list of users that in the end of each line in the table I added two links("href"):
one for "update" user and secend for "delete" user.
So for enable that I added a call to javascript function that capture the ID of user
and insert it to some form that I created before (form with only one "hidden" field),
and then the function activated submit() operation to the server part (asp.net code).
I checked and the submit() operation works ok(checked with respons.write()...)
But I know how to recognize a submit form button inside IsPost by ask what the value
of the submit button (for example: if(Request.Form["ExpertButton"]== "delete"){..some code here....})
But when I activate submit() with javascript, how could I recognize post?
I tryed with the value of the hiiden field but it's not capture this
and it skiped of the if statement....
the list of users code:
foreach(var row in db.Query(displayExperts,nameOfExpert))
{
<tr>
<td class="dispExpertActScreen">#row.ExpertID</td>
<td class="dispExpertActScreen">#row.name</td>
<td class="dispExpertActScreen">#row.password</td>
<td class="dispExpertActScreen">#row.allowBonds</td>
<td class="dispExpertActScreen">#row.allowStocks</td>
<td class="dispExpertActScreen">#row.allowExchangeTraded</td>
<td class="dispExpertActScreen">#row.allowMutualFund</td>
<td class="dispExpertActScreen">update</td>
<td class="dispExpertActScreen">delete</td>
</tr>
}
the form code:
<form method="post" name="deleteExpert" style="font-size: medium; margin-top: 10%" dir="rtl">
<input type="hidden" name="expertID" id="expertID" value="">
</form>
the javascript code:
<script>
function expertToDelete(expertID) {
document.getElementById('expertID').value = expertID;
document.getElementById('deleteExpert').submit ();
}
</script>
the asp.net code:
#{
var db = Database.Open("MyProjectSite");
var display="no";
var displayExperts="";
var nameOfExpert="";
var category="";
if(IsPost)
{
if(Request.Form["ExpertButton"]== "search")// this is by button!!!
{
some code.....
}
//Response.Write("^^^^^^^^^^^^^^^^^^^^^");
if(Request.Form["ExpertButton"] != "")// this need to be by javascript submit() method !!! here I need to recognize it.
{
var id=Request.Form["expertID"];
Response.Write("^^^^^^^^^^^^^^^^^^^^^"+id);
var deleteQuery="DELETE FROM InvestmanExperts WHERE ExpertID=#0";
db.Execute(deleteQuery,id);
}
}
db.Close();
}
thanks...

Why not puting another hidden input value :
<input type="hidden" name="txtJavascriptMode" id="txtJavascriptMode" value="">
then in your javascript code :
<script>
function expertToDelete(expertID) {
document.getElementById('expertID').value = expertID;
document.getElementById('txtJavascriptMode').value = 'true';
document.getElementById('deleteExpert').submit ();
}
</script>
and in your serverside you can checkout
if(Request["txtJavascriptMode"] == "true")
{}

how to add date picker to a textbox in a div which has display none?

I have a text box in a div whose display is none by default and it will display only when a link is clicked. I tried to add date picker in the textbox inside the hidden div. but i couldn;t do it as the date picker is nt displaying. if code is needed for this tip. i can provide or if more explainations,i can provide that too..please help me how to over come this problem.
Note : the datepicker works in other fields which are visible. but not working with the textbox in the hidden div. Below is the HTML Code of the div and the text field with nxt_date is the field where i wanna add date picker.
The below div will be the innerHTML of another div when a link is clicked. I have added the JS function below for the link.
This is the link which triggers editor function :
<a id='edit' style='cursor:pointer;' onClick='editor();'><b style='color:#689BB9;'>Add Payment</b></a>
JQUERY
$(function() {
$("#nxt_date").date_input();
});
$.extend(DateInput.DEFAULT_OPTS, {
stringToDate: function(string) {
var matches;
if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
return new Date(matches[1], matches[2] - 1, matches[3]);
} else {
return null;
};
},
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return dom+ "-" + month + "-" + date.getFullYear();
}
});
JAVASCRIPT
function editor(){
val=document.getElementById("shwDiv").innerHTML;
document.getElementById("payDiv").innerHTML=val;
document.getElementById('net_pay').value='<? echo $paid->net_payable;?>';
document.getElementById('balance').value='<? echo $paid->balance_amount;?>';
}
HTML
<div id="shwDiv" style="display:none">
<table style="background-color:#CFE0EA;width:30px;font-size:13px;">
<tr>
<td>
<strong>Netpay:</strong>
<input type='text' id='netpaid' value = '<? echo$net1; ?>' class= 'box'size="3" readonly />
</td>
<td>
<strong>Paid:</strong> <input type='text' value='<? echo $paid1; ?>' id='paid1' size="3" name='paid1' class="box" readonly />
<input type='hidden' value='<? echo $paid1; ?>' id='paid1_hidden' size="3"></td>
</td>
<td>
<strong>Balance:</strong>
<input type='text' value='<? echo $balance1;?>' id='balance1' readonly size="3" class="box"/>
<input type='hidden' value='<? echo $balance1;?>' id='balance1_hidden' />
</td>
<td>
<strong>Paying now:</strong><br/><input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
</td>
<td>
<strong>Due Date:</strong><input type='text' class="box" id='nxt_date' size="3" />
</td>
<td><input type="button" value="Save" id="save" class="add_btn" onClick="pay_submit();" style="margin-top:10px;height:25px;"/></td>
</tr>
</table>
</p>
</div>

I think it's not working because you expect the datepicker to be copied (created) when you set the innerHTML of the "payDiv" from the "shwDiv".
First of all, there are some inconstancies in your code:
You tags have several times a classattribute: <input type='text' class="box" id='paying_now' onkeyUp='aa(this.value);' size="3" class="box" onkeypress="return isNumberKey(event)" />
Your elements have IDs. If you copy the innerHTML from one div to the other, you will have multiple time the same ID which is not allowed. Use the name attribute.
To correct your situation, do this:
You have to initialize again the datePicker instance for the field in the "payDiv" after you set the 'innerHTML'.
function editor() {
// always you 'var' to declare variables, otherwise they go to the global scope
var shwDivContent = $('#shwDiv').html(),
$payDiv = $('#payDiv');
$payDiv.html(shwDivContent);
// instanciate the datepicker in the 'payDiv'
// assuming you have added a 'name' attribute to your field
$payDiv.find('input[name=nxt_date]').date_input();
$payDiv.find('input[name=net_pay]').val('<? echo $paid->net_payable;?>');
$payDiv.find('input[name=balance]').val('<? echo $paid->balance_amount;?>');
}

using jquery or javascript

I have this code in my page. with two textboxes and one textarea.
<fieldset>
<legend><b>Search Criteria</b></legend>
<table>
<tr>
<td>
Find Text:
<input type="text" style="width:150px" id="txtFind"/>
<input type="button" id="btnfind" value=" Find "/>
</td>
</tr>
<tr>
<td>
Replace Text:
<input type="text" style="width:150px" id="Text1"/>
<input type="button" value="Replace Text" id="btnReplace"/>
</td>
</tr>
</table>
</fieldset>
<br />
<fieldset>
<legend><b>Result</b></legend>
<table>
<tr>
<td>
<%:Html.TextArea("Hello ASP.NET here")%>
</td>
</tr>
</table>
</fieldset>
in my first textbox if I enter "here" then I click the Find button it should find the text
if I enter "MVC" on second text box click Replace Text button it should replace the text "here" to "MVC" ("Hello ASP.NET MVC").,
Please can any one help me out? How to do this with javascript or jquery?
Thanks

Asuming your textarea has id="textarea", you should do this:
$("#btnfind").click(function(){
var find = $("#txtFind").val();
var replace = $("Text1").val();
var text = $("#textarea").val();
while(text.indexOf(find) >= 0){
text = text.replace(find, replace);
}
$("#textarea").val(text);
});
(Note that we're not using Regular expressions to replace because the text to find is dynamic so we'd have to escape the 'find' text).
Hope this helps. Cheers

this should get you started: http://jsfiddle.net/DD7t5/
using jQuery and a highlight jQuery plugin
var $result = $('#result'),
$txtFind = $('#txtFind'),
$txtReplace = $('#txtReplace');
$('#btnFind').click(function() {
$result.removeHighlight();
var findValue = $txtFind.val();
if (findValue.length > 0) {
$result.highlight(findValue) // find and highlight
}
});
$('#btnReplace').click(function() {
$result.text($result.text().replace(eval('/' + $txtFind.val() + '/gi'),
$txtReplace.val())); // replace
});