Develop Reference

How make checkbox being true/false just after you checked them

I'm making a "What language you should learn"site but more complex
I don't know why but when i check my checkbox,they don't became true but when i reload the page now they are true
if (document.getElementById("langage1").checked) {
html = true;
}
if (document.getElementById("langage2").checked) {
phpmysql = true;
}
if (document.getElementById("langage3").checked) {
js = true;
}
if (document.getElementById("langage4").checked) {
python = true;
}
if (document.getElementById("langage5").checked) {
java = true;
}
if (document.getElementById("langage6").checked) {
swift = true;
}
if (document.getElementById("langage7").checked) {
batch = true;
}
if (document.getElementById("langage8").checked) {
jquery = true;
}
if (document.getElementById("langage9").checked) {
c = true;
}
if (document.getElementById("langage10").checked) {
cplus = true;
}
if (document.getElementById("langage11").checked) {
objectivec = true;
}
if (document.getElementById("langage12").checked) {
cdiaise = true;
}
if (document.getElementById("langage13").checked) {
construct = true;
}
if (document.getElementById("langage14").checked) {
wordpress = true;
}
if (document.getElementById("langage15").checked) {
unity = true;
}
if (document.getElementById("langage16").checked) {
gamemaker = true;
}
if (document.getElementById("langage17").checked) {
unreal = true;
}
if (document.getElementById("langage1").checked === false) {
html = false;
}
if (document.getElementById("langage2").checked === false) {
phpmysql = false;
}
Here is an example of the commands that should make them true,any idea how to fix that?

You have to add eventlisteners
document.getElementById("langage1").addEventListener("click", myFunction);
// example function
function myFunction() {
document.getElementById("langage1").innerHTML = "YOU CLICKED ME!";
}
This way you tell javascript to fire when you do something, in this chase a click. So every time you click the checkbox myFunction() fires

Validation using Ajax call not working

I am new to Ajax and Jquery.I have a form where there is a DepositAccountNumberId text box and its value is stored in a Hidden Field for Validation.
OnBlur event of DepositAccountNumberId TextBox should give a bootbox alert ("This Account Number has been Suspended"). I have posted the code below:
Javascript Function to CheckAccountSuspension()
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
// alert(accountNumberId);
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
//var jqXhr = $.post(url, d);
//jqXhr.done(function(data) {
$.post(url, d, function (data) {
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
} else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).fail(function() {
$('#DepositAccountNumberIdHiddenField').val('');
});
} catch (e) {
bootbox.alert('Error: ' + e);
}
}
Web Method
[WebMethod(EnableSession = true)]
public bool IsAccountSuspended(string accountNumberId)
{
int officeId = OfficeId;
return BusinessLayer.Transactions.Transactions.IsAccountSuspended(officeId, accountNumberId.ToLong());
}
IsAccountSuspended in Business Layer
public static bool IsAccountSuspended(int officeId, long accountNumberId)
{
if (accountNumberId <= 0)
{
return false;
}
return DatabaseLayer.Transactions.Transactions.IsAccountSuspended(officeId,accountNumberId);
}
IsAccountSuspended in Database Layer
public static bool IsAccountSuspended(int officeId, long accountNumberId)
{
if (accountNumberId <= 0)
{
return false;
}
var sql = "SELECT * FROM deposit.is_suspended(#AccountNumberId::bigint);";
using (var command = new NpgsqlCommand(sql))
{
command.Parameters.AddWithValue("#AccountNumberId", accountNumberId);
using (var table = DBOperations.GetDataTable(command))
{
if (table.Rows.Count >= 1)
{
return true;
}
return false;
}
}
}
The Validation does not work.The ajax is not called to check if the account is suspended.Help Please.

Try to use $.post method:
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
// alert(accountNumberId);
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = {accountNumberId: accountNumberId};
var jqXhr = $.post(url, d);
jqXhr.done(function (data) {
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
} else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).fail(function () {
$('#DepositAccountNumberIdHiddenField').val('');
});
} catch (e) {
bootbox.alert('Error: ' + e);
}
}
}
$('#DepositAccountNumberTextBox').on('blur', function () {
checkAccountSuspension();
});

There is no such method like ajaxPost in JQuery. Use $.Post at its place.
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
$.post(url,d,function(data){
if (data) {
var ret = data.d;
if (ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
}
else {
$('#DepositAccountNumberIdHiddenField').val('');
bootbox.alert("This Account Has been Suspended");
exist = false;
}
}
}).error(function() {
$('#DepositAccountNumberIdHiddenField').val('');
})
}
catch (e) {
bootbox.alert('Error: ' + e);
}

This is How it worked.
Like some of the experts above said about the use of postAjax and $.post.
As everywhere in the project it was used as postAjax by previous developers here.
I was actually passing a null value again in the hidden field.
This code worked.
var exist = true;
function checkAccountSuspension() {
var accountNumberId = $('#DepositAccountNumberIdHiddenField').val();
if (accountNumberId == "") {
//
} else {
try {
var url = '/WebMethods/AccountDetails.asmx/IsAccountSuspended';
var d = { accountNumberId: accountNumberId };
//$.post(url, d, function (data) {
var jqXhr = ajaxPost(url, d, true);
jqXhr.done(function (data) {
var ret = data.d;
if (!ret) {
$('#DepositAccountNumberIdHiddenField').val(accountNumberId);
exist = true;
}
else {
//$('#DepositAccountNumberIdHiddenField').val('');
// bootbox.alert("<b class='text-red'>Suspended Account</b> <br/>This Account has been Suspended.");
swal({
title: "Suspended Account!",
text: "This Account is Suspended",
type: "error",
confirmButtonText: "OK",
imageSize: "20x20"
});
exist = false;
resetAllInputs();
}
}).fail(function (ex) {
bootbox.alert("Requested process fail to execute");
//$('#DepositAccountNumberIdHiddenField').val('');
});
}
catch (e) {
bootbox.alert('Error: ' + e);
}
}
}

How to return string from a function to another function?

I've made a login form that will check that username and password are valid or not.
Everything is good, until I press Login.
After press login button it said that username and password is wrong although it is not.
How could I fix this? I think it is about return in userCheck() and pwdCheck() functions.
Here is my form
<form name="loginForm" id="loginForm">
<input type="text" id="user" name="user" onfocus="userFocus()" onblur="userBlur()">
<span id="userWarn" class="warnSpan">Username is required.</span>
<input type="text" id="pwd" name="pwd" onfocus="pwdFocus()" onblur="pwdBlur()">
<span id="pwdWarn" class="warnSpan">Username is required.</span>
</form>
Here is the javascript:
var pwdElem = document.getElementById("pwd");
var pwdVal = document.getElementById("pwd").value;
var pwdWarn = document.getElementById("pwdWarn");
var pwdLen = pwdVal.length;
var pwdCheck = pwdCheck();
var userElem = document.getElementById("user");
var userVal = document.getElementById("user").value;
var userWarn = document.getElementById("userWarn");
var userLen = userVal.length;
var userCheck = userCheck();
function userFocus()
{
userElem.style.backgroundColor = "#ccffff";
userElem.style.border = "1px inset #00ffff";
userElem.style.color = "#00ffff";
}
function userBlur()
{
var userLenx = document.getElementById("user").value.length;
if (userLenx != 0)
{
userOk();
}
else
{
userError();
}
}
function pwdFocus()
{
pwdElem.style.backgroundColor = "#ccffff";
pwdElem.style.border = "1px inset #00ffff";
pwdElem.style.color = "#00ffff";
}
function pwdBlur()
{
var pwdLenx = document.getElementById("pwd").value.length;
if (pwdLenx >= 8)
{
pwdOk();
}
else
{
pwdError();
}
}
function userCheck()
{
var userLenx = document.getElementById("user").value.length;
if (userLenx != 0)
{
return "ok";
}
else
{
return "error";
}
}
function pwdCheck()
{
var pwdLenx = document.getElementById("pwd").value.length;
if (pwdLen >= 8)
{
return "ok";
}
else
{
return "error";
}
}
function userError()
{
userElem.style.backgroundColor = "#ffcccc";
userElem.style.border = "1px inset #ff0000";
userElem.style.color = "#ff0000";
userWarn.style.visibility = "visible";
}
function pwdError()
{
pwdElem.style.backgroundColor = "#ffcccc";
pwdElem.style.border = "1px inset #ff0000";
pwdElem.style.color = "#ff0000";
pwdWarn.style.visibility = "visible";
}
function userOk()
{
userElem.style.backgroundColor = "#ddffdd";
userElem.style.border = "1px outset #00bb00";
userElem.style.color = "#00bb00";
userWarn.style.visibility = "hidden";
}
function pwdOk()
{
pwdElem.style.backgroundColor = "#ddffdd";
pwdElem.style.border = "1px outset #00bb00";
pwdElem.style.color = "#00bb00";
pwdWarn.style.visibility = "hidden";
}
function errorForm()
{
if (userCheck=="error"&&pwdCheck=="error")
{
userError();
pwdError();
}
else if (userCheck=="error"&&pwdCheck=="ok")
{
userError();
}
else if (userCheck=="ok"&&pwdCheck=="error")
{
pwdError();
}
else
{
alert("Sorry, an error occured.\n\nPlease refresh page and try again.");
}
}
function loginSubmit()
{
if (userCheck=="ok"&&pwdCheck=="ok")
{
userOk();
pwdOk();
loginForm.submit();
}
else
{
errorForm();
}
}
Here is the Jsbin
Please help, I am new to coding!

The issue with you code seems to be in the function loginSubmit(). It should read as follows:
function loginSubmit()
{
if (userCheck()=="ok"&&pwdCheck()=="ok") // <--change here
{
userOk();
pwdOk();
loginForm.submit();
}
else
{
errorForm();
}
}
The two variables you were referring to (userCheck and pwdCheck) are initialised as soon as the page loads. This means they will represent the state of the login and password fields when the page loads. Since these fields are empty when the page loads, the loginSubmit() function will always show the error. Hope this helps.

You are returning a string from the function, but you aren't using it for anything...
Short example
function getString() {
return "A string";
}
// I don't even store the string...
getString();
So to fix it, use the string that is returned
// Store it
var example = getString();
// Use it
alert(example);

Below code will do the validation which you are trying
function validate()
{
if(trim(document.frmLogin.sUserName.value)=="")
{
alert("Username is required.");
document.frmLogin.sUserName.focus();
return false;
}
else if(trim(document.frmLogin.sPwd.value)=="")
{
alert("Please Enter a Password");
document.frmLogin.sPwd.focus();
return false;
}
}

You appear to have a problem with the way you are trying to call userCheck, pwdCheck, etc.
You are missing the parentheses, which means you are comparing the function itself (i.e. not the result of calling the function) with a string.
your comparisons should look something like this once you've added the parentheses
if (userCheck()=="error"&&pwdCheck()=="error")

Understanding callback function differences

My code:
checkIsMotoOrEcomerce: function(booAnim) {
var objIsEcmOrMto = $('.isMotoOrEcm'),
objEcom = objIsEcmOrMto.filter('[name="ecommerce"]'),
objMoto = objIsEcmOrMto.filter('[name="moto"]'),
objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox'),
strBehaviorShow,
strBehaviorHide,
objMain = this;
if (booAnim) {
strBehaviorShow = 'slideDown';
strBehaviorHide = 'slideUp';
} else {
strBehaviorShow = 'show';
strBehaviorHide = 'hide';
}
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible());
} else {
objEcmBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible());
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible());
} else {
objMotoBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible());
}
},
checkIsMotoOrEcmVisible: function() {
var objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox');
if (objMotoBox.is(':visible') && !objEcmBox.is(':visible')) {
console.log('moto');
} else if (!objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('eccomerce');
} else if (objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('both');
} else {
console.log('none');
}
}
I cannot understand why this is working on first run, but when I'm running second time then its returning error "Uncaught TypeError: undefined is not a function".
When I am using this code:
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible);
} else {
objEcmBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible);
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](objMain.checkIsMotoOrEcmVisible);
} else {
objMotoBox[strBehaviorHide](objMain.checkIsMotoOrEcmVisible);
}
It not returning any errors but working only on first run.
Can you help me understand the differences between using objMain.checkIsMotoOrEcmVisible() and objMain.checkIsMotoOrEcmVisible
Why when I put function name instead calling object propety, everything seams to work?
function blabla() {
var objMotoBox = $('.motoBox'),
objEcmBox = $('.apiIntegrationBox');
if (objMotoBox.is(':visible') && !objEcmBox.is(':visible')) {
console.log('moto');
} else if (!objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('eccomerce');
} else if (objMotoBox.is(':visible') && objEcmBox.is(':visible')) {
console.log('both');
} else {
console.log('none');
}
}
if (objEcom.is(':checked')) {
objEcmBox[strBehaviorShow](blabla());
} else {
objEcmBox[strBehaviorHide](blabla());
}
if (objMoto.is(':checked')) {
objMotoBox[strBehaviorShow](blabla());
} else {
objMotoBox[strBehaviorHide](blabla());
}

integrating two javascripts codes into one code to show alerts

In my first javascript i am showing alerts if any text box having class check is left empty before submitting, if all are filled then in second javascript i am showing an alert that confirm submit?. But how to make these two as one javascript code?
<script type="text/javascript">
jQuery('input.test').not('[value]').each(function() {
var blankInput = jQuery(this);
//do what you want with your input
});
function confirmation(domForm) {
var jForm = jQuery(domForm);
var jFields = jForm.find('.check');;
var values = jFields.serializeArray();
var failedFields = [];
for(var i = 0; i < values.length; i++) {
var o = values[i];
if(o.value == null || o.value.length == 0) {
failedFields.push(jFields.filter('[name=' + o.name + ']').attr('title'));
}
}
if(failedFields.length > 0) {
var message = '';
if(failedFields.length == values.length) {
message = 'fill all fields please';
}
else {
message = 'please fill the fields:';
for(var i = 0; i < failedFields.length; i++) {
message += "\n";
message += failedFields[i];
}
}
csscody.alert(message);
return false;
}
var answer = confirm("Confirm save?")
if (answer){
window.location = "confirmsubmit.jsp";
}
else{
return false;
}
return true;
}
</script>
javascript to show confirm submit alert after text boxes having class check are filled
<script type="text/javascript">
$().ready(function() {
$('#btn_submit').click(function(e) {
e.preventDefault();
var that = this;
var text = "Confirm save?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
window.location = "confirmsubmit.jsp";
}
else {
return false;
}
}
})
});
});
</script>
html
<form action="confirmsubmit.jsp" onsubmit="return confirmation(this)" method="POST">
<input type="text" class="check"/>//alert if text box is left empty
<input type="submit" id="btn_submit"/>
</form>

I don't get why you need the second script. You call the validator function onsubmit. Why do change the window.location when you have set the same action? There is not point in binding the same function the the click-event of the button.
You don't need the second script, but have to change the first script.
function confirmation(domForm) {
// Your other code
// ...
if(failedFields.length > 0) {
// Your other code
// ...
csscody.alert(message);
return false;
}
// Your other code
// ...
/* Solution before your comment:
var answer = confirm("Confirm save?")
// This is already the action-target: window.location = "confirmsubmit.jsp";
return answer;
*/
var text = "Confirm save?";
csscody.confirm(text, {
onComplete: function(e) {
if (e) {
// Probably doesn't work because this seems to be asynchronous?
return true;
}
else {
return false;
}
}
});
}