We Keep Coding

Get boolean value from checkbox

I overtook a project from another dev'er.
The code allows me to get data from the form's text inputs, but not from the checkbox inputs.
The original developer wrote these functions (amongst others):
protected function getObjectString($key,$html=false,$escape=false)
{
$string = isset($this->classData[$key]) ? $this->classData[$key]."" : "";
if($html == true) $string = htmlspecialchars($string);
if($escape == true) $string = addslashes($string);
return $string;
}
and
protected function getObjectBool($key,$toString=false,$trueVal="yes",$falseVal="no")
{
$bool = intval(isset($this->classData[$key]) ? $this->classData[$key] : 0);
//$bool = intval(isset($this->classData[$key]) ? 1 : 0);
if($toString == true)
{
if($bool > 0) return $trueVal;
else return $falseVal;
}
return $bool > 0;
}
When I use
getObjectString("Email",false,false);
I get the value of form element
<div class="row">
<div class="col-lg-3 formlabel">E-mail</div>
<div class="col-lg-9"><input type="text" class="form-control" name="Email" value=""></div>
</div>
But when I use
getObjectBool("EmailMandatory",false,"yes","no");
I should get the value (checked=1, unchecked=0) from
<div class="row">
<div class="col-lg-3 formlabel">Mandatory</div>
<div class="col-lg-9">
<label style="font-weight: normal;">
<input type="checkbox" name="EmailMandatory" value="1" checked>
Use of mail address is mandatory
</label>
</div>
</div>
However, the value (from getObjectBool) is always empty. What am I doing wrong?
Addition, as requested by Professor Abronsius:
abstract class common_library_dbbase
{
/** CLASS PROPERTIES **/
protected $classData = array();
/** CONSTRUCTOR **/
function __construct($data,$tableName,$primaryIDName,$accountTable=false,$cacheEnabled = true)
{
// Set member data
$this->tableName = $tableName;
$this->primaryIDName = $primaryIDName;
$this->cacheEnabled = $cacheEnabled;
$this->accountTable = $accountTable;
// Is same class
if(is_object($data) && get_class($this) == get_class($data))
{
$this->classData = $data->toArray;
}
// Is array data
else if(is_array($data))
{
$this->classData = $data;
}
// Is number, load from db
else if(intval($data) > 0)
{
$this->classData = $this->loadByID($data);
}
}
}

When you pass false as second parameter the function returns a boolean, not an integer. You could do
getObjectBool("EmailMandatory",false,"yes","no") ? 1 : 0
Or
getObjectBool("EmailMandatory",true,1,0)

JavaScript validate multiple input boxes

I have this HTML form:
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input type="text" name="items[]" class="form-control items" id="items">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>
It has Add+ functionality which basically add more field. So If I add more field I have multiple ID of this field like: items, items1, items2, etc..
Now, In my JavaScript validation function, I want to check if this Items field or fields are empty or not.
I can check one field but how can I check multiple fields using JavaScript?
JavaScript validation code for one items field:
var items = document.getElementById("items");
if (items.value == "") {
alert("Item name is reuired");
items.focus();
return false;
}
JavaScript code for Add+ functionality:
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
var form = '<div class="delete-row"><div class="form-group row"><label class="col-sm-3 col-form-label">Items</label><div class="col-sm-7"><input type="text" name="items[]" class="form-control items"></div><div class="col-sm-2">( X )</div></div></div>';
$(wrapper).append('<div>'+form+'</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).parents('.delete-row').remove(); x--;
})
Full Validation code:
function validateForm () {
var amount = document.forms["salesform"]["amount"];
var buyer = document.forms["salesform"]["buyer"];
var buyerRegex = /^[a-zA-Z0-9_ ]*$/;
var receipt_id = document.forms["salesform"]["receipt_id"];
var receiptIdRegex = /^[a-zA-Z_ ]*$/;
var items = document.querySelectorAll(".items");
var itemsRegex = /^[a-zA-Z_ ]*$/;
var buyer_email = document.forms["salesform"]["buyer_email"];
var note = document.forms["salesform"]["note"];
var city = document.forms["salesform"]["city"];
var phone = document.forms["salesform"]["phone"];
var entry_by = document.forms["salesform"]["entry_by"];
if (amount.value == "") {
alert("Please enter the amount.");
amount.focus();
return false;
} else if (isNaN(amount.value)) {
alert("Amount should be only numeric value.");
amount.focus();
return false;
}
if (buyer.value == "") {
alert("Buyer name is required");
buyer.focus();
return false;
} else if (!buyerRegex.test(buyer.value)) {
alert("Buyer name only contain letter, number and space.");
buyer.focus();
return false;
} else if (buyer.value.length > 20 ) {
alert("Buyer name must be less than 20 characters long.");
buyer.focus();
return false;
}
if (receipt_id.value == "") {
alert("Receipt Id is reuired");
receipt_id.focus();
return false;
} else if (!receiptIdRegex.test(receipt_id.value)) {
alert("Receipt Id must contain only characters.");
receipt_id.focus();
return false;
}
items.forEach(ele => {
if (ele.value == "") {
alert("Item name is required");
ele.focus();// focuses on that particular input
return false;
}
})
return true;
}

You can try something like this,Query SelectorAll,As forEach returns undefined ,you can try with every
const items = [...document.querySelectorAll("input[type=text]")];
items.every(ele => {
//console.log(ele.value)
if (ele.value == "") {
alert("Item name is reuired");
ele.focus();// focuses on that particular input
return false;
}
})
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input type="text" name="items[]" class="form-control" id="items">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>

Here's a version of Shubh's answer but querying by class. It's very important to note that you cannot short circuit forEach in javascript by returning from the function, so I altered this solution to use a for loop. For more information you can read this SO question about it.
let items = document.querySelectorAll(".items")
for (let i = 0; i < items.length; i++) {
if (items[i].value == "") {
alert("Item name is required");
items[i].focus(); // focuses on that particular input
return false;
}
})
<div class="input_fields_wrap">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Items</label>
<div class="col-sm-7">
<input class="items" type="text" name="items[]" class="form-control">
</div>
<div class="col-sm-2">
<button class="add_field_button btn btn-success btn-sm float-right">Add+</button>
</div>
</div>
</div>

I would change the input field to have a class that's called item
Then I would loop all those items.
var items = document.querySelectorAll('.item');
for (var i = 0; i < items.length; i++) {
var item = items[i];
// validate
}

The functionality to increment the id is quite useless in your case. getElementById will give you the first match. In your case, where you want to check several elements it'll be wise to use QuerySelectorAll:
document.querySelectorAll('.form-control').forEach(node => {
if(items.value == "") {
...
}
})

JavaScript Checkbox

I am having troubles with a script with JS, I am still learning but I am stuck for a while.
The solution should be,
IF a checkbox is checked and the value is "" <-- the msgbox should say an message that the textbox should be filled with a value, and so for each checked checkbox, if you uncheck the checkbox, it should dissapear.
Code of 2 checkboxes in html page
<label>
bangkirai
<input id="chk_bangkirai" type="checkbox" onchange="enableTextBox()" />
</label>
<input type="text" id="bangkirai" name="bangkirai" disabled onchange="enableTextBox()" />
<label>
beukenhout
<input id="chk_beukenhout" type="checkbox" />
</label>
<input type="text" id="beukenhout" name="beukenhout" disabled/>
and the JavaScript, I made for each checkbox an other function, but I need to combine the error message in the same msgbox.
function enableTextBox() {
divOutput = document.getElementById("msgbox2");
strValideer = "<ul>";
if (document.getElementById("chk_bangkirai").checked === true) {
document.getElementById("bangkirai").disabled = false;
}
else {
document.getElementById("bangkirai").disabled = true;
}
if (document.getElementById("bangkirai").value === "") {
strValideer += "<li><b>bangkirai: </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function enableTextBox2() {
divOutput = document.getElementById("msgbox2");
strValideer = "<ul>";
if (document.getElementById("chk_beukenhout").checked === true) {
document.getElementById("beukenhout").disabled = false;
}
else {
document.getElementById("beukenhout").disabled = true;
}
if (document.getElementById("beukenhout").value === "") {
strValideer += "<li><b>beukenhout: </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
I should probably use an array or an for each itteration ... but I can only find examples with forms ...
I will keep looking for a solution myself, but I hope I can get some inspiration here by experienced coders.
Thanks in advance

You could simplify this a lot and make it more... Concise and less dependent on which checkbox you have. We will do this with an external script and no onClick attributes on our HTML. This will enable us to separate our logic code from our design code. I will also use a placeholder instead of value, as it will create issues when people need to start entering a value (aka, you need to only have the text there when theres no value etc...) It just makes it more complicated.
Since we are dealing with numbers ('stuks' or amounts), lets also only allow number values to be inserted. Lastly, I have not bothered to replicate your HTML as I think the simplified example will make it easier to understand. Update I have also added the required and disabled sattributes here, settings your input to required when the checkbox is checked and disabled when not.
Check the below snippet for comments on the steps taken to do this:
// First, let select all fieldsets like this:
var fieldsets = document.querySelectorAll( 'fieldset.checkbox-message' );
// Lets loop through them
for( let i = 0; i < fieldsets.length; i++ ){
// Lets create variables to store our fieldset, checkbox and input for later use.
let fieldset = fieldsets[ i ];
let checkbox = fieldset.querySelector( 'input[type="checkbox"]' );
let input = fieldset.querySelector( 'input[type="number"]' );
// Lets also store the message we put in placeholder
// We will also give it a default value,
// in case you forget to set the placeholder.
let message = input.placeholder || 'Please fill in the amount';
// Now lets define a function that will fill the placeholder
// based on the checked value of the checkbox
// We will be storing it in a variable because of the scope of a `for` block.
// If you would use function setState() it might be defined globally
// So multiply checkboxes would not work.
let setState = function(){
if( checkbox.checked ){
input.placeholder = message;
input.disabled = false;
input.required = true;
} else {
input.placeholder = '';
input.disabled = true;
input.required = false;
}
}
// Now lets listen for changes to the checkbox and call our setState
checkbox.addEventListener( 'change', setState );
// Lrts also call setState once to initialise the correct placeholder
// for our input element to get started. This will remove any placeholders
// if the checkboxes are unchecked.
setState();
}
<fieldset class="checkbox-message">
<label for="bangkirai">Bangkirai</label>
<input type="checkbox" id="bangkirai" />
<input type="number" placeholder="Tell us, how many 'bangkirai'?" />
<span>stuks</span>
</fieldset>
<fieldset class="checkbox-message">
<label for="beukenhout">Beukenhout</label>
<input type="checkbox" id="beukenhout" />
<input type="number" placeholder="How many 'beukenhout'?" />
<span>stuks</span>
</fieldset>
Good luck coding!

#somethinghere's answer is concise but if we modify your answer as it is you could check this
function enableTextBox() {
bangkirai_validation = document.getElementById("bangkirai_validation");
if (document.getElementById("chk_bangkirai").checked === true) {
document.getElementById("bangkirai").disabled = false;
}
else {
document.getElementById("bangkirai").disabled = true;
bangkirai_validation.style.display='none';
return;
}
if (document.getElementById("bangkirai").value =="") {
bangkirai_validation.style.display='block';
}else
{
bangkirai_validation.style.display='none';
}
}
function enableTextBox2() {
beukenhout_validation = document.getElementById("beukenhout_validation");
if (document.getElementById("chk_beukenhout").checked === true) {
document.getElementById("beukenhout").disabled = false;
}
else {
document.getElementById("beukenhout").disabled = true;
beukenhout_validation.style.display='none';
return;
}
if (document.getElementById("beukenhout").value == "") {
beukenhout_validation.style.display='block';
}else
{
beukenhout_validation.style.display='none';
}
}
<fieldset>
<legend>Bestel gegevens</legend>
<div class="container">
<div class="row">
<div class="span7 id=" houtsoorten"">
<div class="control-group">
<label class="control-label">
bangkirai
<input id="chk_bangkirai" type="checkbox"
onchange="enableTextBox()" >
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini"
type="number" id="bangkirai" name="bangkirai" placeholder="aantal" disabled
onkeyup="enableTextBox()" onchange="enableTextBox()">
<span class="add-on">stuks</span>
<div style="display:none;" id="bangkirai_validation">Please enter a value</div>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
beukenhout
<input id="chk_beukenhout" type="checkbox" onchange="enableTextBox2()" >
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini"
type="number" id="beukenhout" name="beukenhout" placeholder="aantal"
disabled onkeyup="enableTextBox2()" onchange="enableTextBox2()" >
<span class="add-on">stuks</span>
<div style="display:none;" id="beukenhout_validation">Please enter a value</div>
</div>
</div>
</div>

When the cursor leaves the input box #select-or-enter-category, this code checks whether the given input exists in the dropdown or not

I have this code I use for showing a warning message:
<div class="row clearfix">
<div class="col-sm-8 col-sm-offset-2">
<div>
<div class="form-line focus">
<span class="category-status" style="color: red;">
This entered category is not found in the category list.<br>
Press button on the right to save this new category.
</span>
</div>
</div>
</div>
</div>
Then, I have another code use for typeahead dropdown:
<div class="row clearfix">
<div class="col-sm-7 col-sm-offset-2">
<div class="form-group form-float">
<div class="form-line focus">
<input type="hidden" id="cat-id" name="category_id" value="">
<input type="text" id="select-or-enter-category" name="category" data-provide="typeahead"
placeholder="Enter/Select a category" value="" required="required" class="form-control">
</div>
</div>
</div>
<div class="col-sm-1">
<button type="button" id="save-category" data-toggle="tooltip" data-placement="top" title=""
class="btn btn-warning" data-original-title="Save this input as New Category">
<i aria-hidden="true" class="fa fa-bookmark-o" style="display: inline;"></i>
</button>
</div>
</div>
And this is my javascript/jquery code:
When the user types keyword in an input box #select-or-enter-category,
this javascript code will give a dropdown as typeahead for the given keyword.
/**
* Autocomplete for category - ADD TASK MODAL
* #return {[type]} [description]
*/
$(document).ready(function(){
axios_get('/axiosCategory', function(data) {
var cat = [];
var $input = $("#select-or-enter-category");
let temp;
data.forEach(function(item) {
temp = {
id: item.id,
name: item.categoryName
}
cat.push(temp);
});
$input.typeahead({
source: cat,
autoSelect: true
});
$input.change(function() {
// console.log($input);
var current = $input.typeahead("getActive");
if (current) {
$('#cat-id').val(current.id);
}
});
});
});
When the cursor leaves the input box #select-or-enter-category, this code checks whether the given input exists in the dropdown or not. If not, the warning message will show up that will ask the user to save the input as a new category.
/**
* Display the message asking the user to save the
* new category
*
* #return void
*/
$('#select-or-enter-category').focusout(function() {
let val = $(this).val();
axios_get('/axiosCategory', function(data) {
let search = false;
data.forEach(function(item) {
if (val == item.categoryName) {
search = true;
}
});
if (search == false) {
$('.category-status').removeAttr('hidden');
} else {
$('.category-status').attr('hidden', true);
}
});
});
Then problem is that when the user clicks an item from the dropdown using the mouse, the error message shows up which is not what I want to happen.
I want the error message to show up only when the cursor actually leaves the input box #select-or-enter-category.
But if the user only uses keyboard for choosing an item from the dropdown and enter it, there is no problem.
Do you have any suggestions?

Try this one
$(document).ready(function(){
axios_get('/axiosCategory', function(data) {
dataGlobal = data;
var cat = [];
var $input = $("#select-or-enter-category");
let temp;
data.forEach(function(item) {
temp = {
id: item.id,
name: item.categoryName
}
cat.push(temp);
});
$input.typeahead({
source: cat,
autoSelect: true
});
$input.change(function() {
var current = $input.typeahead("getActive");
if (current) {
$('#cat-id').val(current.id);
}
});
$input.focusout(function() {
let val = $('#select-or-enter-category').val();
let current = $input.typeahead("getActive");
let search = false;
let str = current.name.substring(0,val.length);
if (str == val) {
val = current.name;
}
dataGlobal.forEach(function(item) {
if (val == item.categoryName) {
search = true;
}
});
if (search == false) {
$('#category-status').removeAttr('hidden');
} else {
$('#category-status').attr('hidden', 'hidden');
}
});
});
});

Javascript append and undo problems

I am having a few problems with javascript. I am trying to create a function for when I click a radio button it will run that function. (I got this to work).
My problem is when I click the radio button to order alphabetically it orders but then when i clicked the other radio buttons to change function it is still ordered alphabetically due to "APPEND" my question is how can I get my program to work so when I kill alphabetically ordered it only orders for that and when i click back to something else its ordered how it was originally.
Here is part of my code:
Javascript:
function radiobuttonclicked() {
var allChampions1 = $(".masterychampsforsum > .colzz");
var selectedcheckyesnochest = document.getElementsByName("optioncheckradiomasterychamps");
if (selectedcheckyesnochest[0].checked == true) {
allChampions1.show();
}
else if (selectedcheckyesnochest[1].checked == true) {
var selectedChampions1 = $(".masterychampsforsum > .colzz[data-chest-champion^='yes']");
allChampions1.hide();
selectedChampions1.show();
}
else if (selectedcheckyesnochest[2].checked == true) {
var selectedChampions1 = $(".masterychampsforsum > .colzz[data-ranked-champion^='yes']");
allChampions1.hide();
selectedChampions1.show();
} else if (selectedcheckyesnochest[3].checked == true) {
var alphabeticallyOrderedDivs = $('.colzz').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).data('championalphabeta').toLowerCase(), $(b).data('championalphabeta').toLowerCase());
});
var container = $("#masterychampsforum");
container.detach().empty().append(alphabeticallyOrderedDivs);
$('.summonerLayout-summary').append(container);
}
}
HTML:
<div class="tabItem Content SummonerLayoutContent summonerLayout-summary" data-tab-spinner-height="800" data-tab-is-loaded-already="true">
<div class="SearchChampion" style="margin-top:20px;padding: 10px;border: 1px solid #000;background-color: #111111;">
<form class="SearchChampionForm" onsubmit="return false;" style="position: relative;">
<input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_all" onclick="radiobuttonclicked();" checked/> <label for="option_all" style="font-size:16px;">ALL</label>
<input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Chest" id="option_chest" onclick="radiobuttonclicked();"/> <label for="option_chest" style="font-size:16px;">CHEST</label>
<input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_ranked" onclick="radiobuttonclicked();"/> <label for="option_ranked" style="font-size:16px;">RANKED</label>
<input name="optioncheckradiomasterychamps" style="margin-left:15px;vertical-align: middle;margin-top: -1px;" type="radio" value="Ranked" id="option_alpha" onclick="radiobuttonclicked();"/> <label for="option_alpha" style="font-size:16px;">ALPHABETICAL</label>
</form>
</div>
<div class="masterychampsforsum" id="masterychampsforum">
<div class="colzz" data-champion-name="'.$getLeagueKeyNamelistsidez.'" data-champion-key="'.$getLeagueKeyNamelistsidez.'" data-chest-champion="'.$champchestyes.'" data-ranked-champion="'.$checkchampionidyesnotrue.'" data-championalphabeta="'.$getLeagueKeyNamelistsidez.'">
</div>
</div>
The data in the data-championalphabeta is Names.
Link to what i got currently

Barmar is right, you have to make a copy first and then you can sort against this copy.
When the last case of your if statement is executed, the DOM is updated.
As the function radiobuttonclicked always retrieves the list from the DOM (the line: var allChampions1 = $(".masterychampsforsum > .colzz")), all the next executions of the function are retrieving the previously ordered list and your original order is lost.
Instead try that (not the best code ever but with this context that will do):
var allChampions1
function radiobuttonclicked() {
if(!allChampions1)
allChampions1 = $(".masterychampsforsum > .colzz").clone();
var selectedcheckyesnochest = document.getElementsByName("optioncheckradiomasterychamps");
if (selectedcheckyesnochest[0].checked == true) {
updateContainer(allChampions1);
} else if (selectedcheckyesnochest[1].checked == true) {
var selectedChampions1 = allChampions1.filter("[data-chest-champion^='yes']");
updateContainer(selectedChampions1);
} else if (selectedcheckyesnochest[2].checked == true) {
var selectedChampions1 = allChampions1.filter("[data-ranked-champion^='yes']");
updateContainer(selectedChampions1);
} else if (selectedcheckyesnochest[3].checked == true) {
var alphabeticallyOrderedDivs = allChampions1.clone().sort(function(a, b) {
return String.prototype.localeCompare.call($(a).data('championalphabeta').toLowerCase(), $(b).data('championalphabeta').toLowerCase());
});
updateContainer(alphabeticallyOrderedDivs);
}
}
function updateContainer(newList){
var container = $("#masterychampsforum");
container.detach().empty().append(newList);
$('.summonerLayout-summary').append(container);
}