Develop Reference

JQuery , adding div dynamically with error message

I am getting the below json response from an validation api , the first attribute is the id of each input field with the error message.
{
"backgroundcolor": "Color is not Supported",
"terms" : "Sorry the Terms are blank"
}
I am using jquery and bootstrap and want to append the below html just after each input field of that specific id . Is this possible to add div dynamically ?
<div id="backgroundcolor" class="invalid-feedback">
Color is not Supported
</div>
Before :
<div class="col-md-6">
<input type="text" class="form-control is-invalid" id="backgroundcolor" aria-describedby="validationServer03Feedback" required>
</div>
After :
<div class="col-md-6">
<input type="text" class="form-control is-invalid" id="backgroundcolor" aria-describedby="validationServer03Feedback" required>
<div id="backgroundcolorFeedBack" class="invalid-feedback">
Color is not Supported.
</div>

JavaScript alone is the best and fastest solution, so here it is how i would do it:
let response = JSON.parse(response);
let fragment = document.createDocumentFragment()
let child = document.createElement('div');
child.id = Object.keys(response)[0] + 'FeedBack';
child.className = 'invalid-feedback';
child.innerText = Object.values(response)[0];
fragment.appendChild(child);
document.getElementById(Object.keys(response)[0]).after(fragment);
I hope it'll help.
Note: createDocumentFragment() may be slightly faster than createElement alone, but it's not required.
Edit: you can also check if there is already div with that error, it would prevent duplication of divs
if(!document.getElementById(Object.keys(response)[0].length) {
// Here goes code from above
}

In Javascript why is appending to TextArea field failing in one case but not the other

I have a javascript function that takes a value from a select and append its to the end of a textarea field (mask) whenever a new selection is made from the select
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
}
This function is used by two different elements on the same page as follows:
<div class="form-group">
<label for="edit_filename_mask_mask" id="edit_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="edit_filename_mask_mask" name="edit_filename_mask_mask"
aria-describedby="edit_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="editMaskVarList" id="editMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="editMaskVarList" onchange="addToEditMask('editMaskVarList', 'edit_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
.....
and
<div class="form-group">
<label for="add_filename_mask_mask" id="add_filename_mask_masklabel">
Mask
</label>
<textarea type="text" id="add_filename_mask_mask" name="add_filename_mask_mask"
aria-describedby="add_filename_mask_masklabel" class="form-control" rows="10" cols="80"></textarea>
</div>
<div class="form-group">
<label for="addMaskVarList" id="addMaskVarListlabel">
Mask Fields
</label>
<select class="mb-2 form-control custom-select" id="addMaskVarList" onchange="addToEditMask('addMaskVarList', 'add_filename_mask_mask');">
<option>
acoustic (Acoustic)
</option>
......
In each case the select and the mask are both within a Bootstrap modal dialog. But it only works for the second case (add_filename_mask_mask) not the first case (edit_filename_mask_mask)
I added some debugging to ensure
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value;
document.getElementById(mask).append(" + "+selectedValue);
alert('Adding to mask:'+mask+':'+scriptvar+':'+document.getElementById(mask).value);
}
that the function was actually being called in both cases and all the variables a renamed correctly. Yet although there are no webconsole errors and the append() method doesnt report any error the value of mask doesnt change for edit_filename_mask_mask
I cannot create a SSCE since there seems to be no difference between the working and non working version. The only difference of note is that when modal dialog is first displayed edit_filename_mask_mask has a value but add_filename_mask_mask does not. However edit_filename_mask_mask continues to fail if I blank out edit_filename_mask_mask , and add_filename_mask_mask when has value.

What happens if you try some safety checks ?
function addToEditMask(select, mask)
{
var selectedValue = document.getElementById(select).value || "";
var textarea = document.getElementById(mask);
textarea.value = (textarea.value || "") + " + " + selectedValue;
}

Variable name is "selectedValue" and you call to "selectValue"

jQuery input validation not working after on newly created input field with jquery append function

i'm using jQuery append function to clone the input fields on front-end, it is working fine but the issue is i have validation on parent element, it is not working on the newly append input fields. This is my jQuery code.
jQuery(function($) {
$("#addChild").click(function() {
$(".name-field:first").clone().find("input").val("").end()
.removeAttr("id")
.appendTo("#additionalselects")
.append($('<a class="delete" href="#"><i class="fa fa-times"></i></a>'));
});
$("body").on('click', ".delete", function() {
$(this).closest(".name-field").remove();
});
});
//Validation
$(document).ready(function() {
$('.name-field').on('input', function() {
// added for bit of simplicity or you can directly get valuess
var name = $('input[name="firstname"]').val();
var date = $('input[name="date"]').val();
if (name != "" && date != "") {
// values seems filled remove class
$('#stepname').removeClass('disabled');
} else {
// user has emptied some input so add class again.
$('#stepname').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="name-field" class="name-field row">
<div class="col-xs-12 col-sm-6 childname">
<div class="field text-left">
<label class="text-left">Name of child</label>
<input id="firstname" class="firstname" name="firstname" type="text" />
</div>
</div>
<div class="col-xs-12 col-sm-6 dateofbirth">
<div class="field text-left">
<label class="text-left">Date of birth</label>
<input type="text" class="date" id="thedate" name="date" />
</div>
</div>
</div>
Next Step
Can anyone help me with this, how can achieve this?
Thanks in advance.

As you are adding .name-field dynamically so event are not binding to the new rows try to change your parent element like,
$('#additionalselects').on('input','.name-field input',function(){
//^^^ use other static element or document if not works
var parent = $(this).closest('.name-field'); // get the parent of focused input
var name = parent.find('input[name="firstname"]').val();
var date = parent.find('input[name="date"]').val();
$('#stepname').toggleClass('disabled',(!name || !date));
});
Also you should make the below changes in your HTML,
Remove all id which are part of cloning
Make an array of fields which are to be cloned like firstname[]

I need help showing and hiding data based on a checkbox

Alright so I have a form. In the form I have a lot of check boxes. If a person clicks on the checkbox. It shows the field below the box. If they click on the checkbox again it makes the field below the checkbox disappear and makes the field have no value.
here is the code. I have JS running the show and hide. and Html calling it.
function ShowCutSewDescription() {
var select = $('#send_item_to_cutsew');
console.log(select)
//select = parseInt(select);
if (select.attr('checked', true)) {
$('#cutsew-checked').show();
}else {
$('#cutsew-checked').hide();
}
}
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>

Changes made
► select.attr('checked', true) to select.is(":checked")
► $('#send_item_to_cutsew') to $('[name="send_item_to_cutsew"]') since there is no element with that Id.
Working Demo
function ShowCutSewDescription() {
var select = $('[name="send_item_to_cutsew"]');
if (select.is(":checked")) {
$('#cutsew-checked').show();
} else {
$('#cutsew-checked').hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-3 control-label">Sending item to Cut/Sew Manager</label>
<div class="col-md-9">
<input type="checkbox" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">
</div>
<div id="cutsew-checked">
Sample box
</div>

I assume this is using jQuery. If so, the selector that you have input is looking for something with an id of send_item_to_cutsew.
jQuery uses css selectors as a base, as referenced by this page: https://api.jquery.com/category/selectors/
The proper way to get the input that you want based on the name is as follows:
var select = $('[name="send_item_to_cutsew]');
or you can set the id to the above like so:
<input type="checkbox" id="send_item_to_cutsew" name="send_item_to_cutsew" class="form-control input-inline input-medium" placeholder="Enter text" onchange="ShowCutSewDescription()">

JQuery/JavaScript: Iterate through form fields, perform calculation, then submit

Right now my code is very "hard-coded" and repetitive. I'd like to know if there is a cleaner way to do the following. Ideally, I want to iterate through my forms fields with a loop and calculate the results with one statement, but I'm struggling to figure out how best to do so.
Summary: I have ten form fields, each with a distinct decimal value that a user may or may not supply. When the user hits submit, it should add the value in the input field with a value being displayed on the current HTML page, then insert into the DB.
First, I grab that value from the form input field and convert it into a number with two decimal places. I then grab the current total from the HTML and add the two numbers together. After that I inject that total back into the form input field so that it can be stored in $_POST and inserted into a database.
How can I make my code more DRY (ie, Don't Repeat Yourself)? Below are just two examples but they are exactly the same except for the element calls:
var subtotal = Number($("#housing").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-housing').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#housing').val(total);
var subtotal = Number($("#utilities").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-utilities').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#utilities').val(total);
I would like to iterate through my input fields like so, but I'm trying to figure out how I could display the logic inside:
var input = $('.form-expenses :input');
input.each(function() {
// Insert switch statement here?? Some other construct??
});
HTML: (Uses Bootstrap 3 classes)
FORM:
<form class="form-expenses form-horizontal" role="form" method="post" action="/profile/update">
<div class="form-group">
<label for="housing" class="control-label col-sm-3">Housing</label>
<div class="input-group input-group-lg col-sm-9">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="housing" id="housing" />
</div>
</div>
<div class="form-group">
<label for="utilities" class="control-label col-sm-3">Utilities</label>
<div class="input-group input-group-lg col-sm-9">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="utilities" id="utilities" />
</div>
</div>
...
<button class="btn btn-lg btn-primary btn-block" id="update-expenses" type="submit"> Update</button>
</form>
OUTPUT:
<tr>
<td>Housing</td>
<td id="output-housing">$<?php echo $total['housing']?></td>
</tr>
<tr>
<td>Utilities</td>
<td id="output-utilities">$<?php echo $total['utilities']?></td>
</tr>

Something like this should work. Assumes the same prefixing relationship of output/input ID's
$(function() {
$('form.form-expenses').submit(function() {
updateValues();
return false/* prevent submit for demo only*/
})
})
function updateValues(){
$('.form-expenses :input').not('#update-expenses').each(function(){
var $input=$(this), inputId=this.id;
var curr=$('#output-'+inputId).text().replace("$", "");
$input.val(function(i,val){
return (1*(val ||0) + 1*curr).toFixed(2);
})
});
}
DEMO
From a UI perspective, this seems very counter intuitive to change values that user just input.
To create ajax data object instead of updating the display values:
function getAjaxData(){
var ajaxData={}
$('.form-expenses :input').not('#update-expenses').each(function(){
var $input=$(this), inputId=this.id;
var curr=$('#output-'+inputId).text().replace("$", "");
ajaxData[this.name] =(1*(val ||0) + 1*curr).toFixed(2);
});
return ajaxData
}
/* in submit handler*/
$.post('path/to/server', getAjaxData(), function(response){/*do something with reponse*/})

"if I allow a user to add/remove fields, then this could get a bit sticky"
In that case, give your fields a class name. As long as that exists on added fields, they will all be calculated.
<input type="text" class="form-control calculate-me" name="housing" id="housing" />
And iterate though all, using their ids as a reference
$(".calculate-me").each(function(){
var ref=this.id;
var subtotal = Number($("#" + ref).val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-' + ref).html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#' + ref).val(total);
});