Develop Reference

javascript update form field by multiple option values

First of all, im new at this. I want to make a simple form to calculate a volume of right rectangular prism.
If the user select option custom, then user can customize the length(custom_panjang), width (custom_lebar) and height(custom_tinggi).
But there is other option without customize (10x10x5),etc.
I've found the solution to calculate the result from the customize option. But how can i calculate the other option (without calculate).
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">
Or you can see the demo right here
https://jsfiddle.net/aurj74nq/
Please help me, thank you.

Call the mult when the value changes in the select. Also, call pilihUkuran once at the end so that the function will be called for the initial value of the select. If you don't want this, then you can omit it.
function pilihUkuran() {
var custom = document.getElementById("ukuran");
if (custom.value == "30x30x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(30, 30, 5)
} else if (custom.value == "10x10x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(10, 10, 5)
} else if (custom.value == "20x20x5") {
document.getElementById("customukuran1").style.visibility = "hidden";
mult(20, 20, 5)
} else
document.getElementById("customukuran1").style.visibility = "visible";
}
function mult(pj, lb, tg) {
var isipj = pj;
var isilb = lb;
var isitg = tg;
var hasil = isipj * isilb * isitg;
document.getElementById('rupiah').value = hasil;
}
pilihUkuran(); // Optional
<div>
<label class="col-sm-2 mb-3"> Ukuran</label>
<select name="ukuran" id="ukuran" class="form-select-auto" onchange="pilihUkuran()" placeholder="Input ukurannya" method="post" required>
<option name="ukuran_1" id="ukuran_1" value="custom" method="post">Custom</option>
<option name="ukuran_2" id="ukuran_2" value="10x10x5" selected>10x10x5 cm</option>
<option name="ukuran_3" id="ukuran_3" value="20x20x5">20x20x5 cm</option>
<option name="ukuran_4" id="ukuran_4" value="30x30x5">30x30x5 cm</option>
</select>
</div>
<div id="customukuran1" style="visibility: hidden;">
<select name="customukuran" id="customukuran" class="form-control" style="display:none;" method="get">
<!-- MENDAPATKAN VARIABEL P x L x T -->
<input class="customp" id="custom_panjang" onkeyup="mult(this.value,document.getElementById('custom_lebar').value,document.getElementById('custom_tinggi').value);" name="custom_panjang" type="number" placeholder="Panjang (cm)">
<input class="customl" id="custom_lebar" onkeyup="mult(document.getElementById('custom_panjang').value,this.value,document.getElementById('custom_tinggi').value);" name="custom_lebar" type="number" placeholder="Lebar (cm)">
<input class="custom3" id="custom_tinggi" onkeyup="mult(document.getElementById('custom_panjang').value,document.getElementById('custom_lebar').value,this.value);" name="custom_tinggi" type="number" placeholder="Tinggi (cm)">
</select><br>
</div>
<input class="mr-5 rupiah" name="rupiah" id="rupiah" disabled style="color: black; font-weight: bolder;">

jQuery does not see the text that was added

There is a script. It adds text from selects to the tags of the Special Price block. At input of number the new similar block is added. It is necessary to add exactly the same block as the previous one. But the text from the tags <span> (numb, curr) is not added. I understand that this script only parses the original HTML markup?
https://playcode.io/301889?tabs=console&script.js&output
The code:
(function() {
$(document).ready(function() {
$('.field.inline.specially > span.curr').text(
$('#id_lot_currency > option:selected').eq(0).text()
);
$('.field.inline.specially > span.numb').text(
$('#id_lot_type > option:selected').eq(0).text()
);
$(document).on('change','#id_lot_currency',function () {
$('.field.inline.specially span').eq(3).text($('option:selected',this).text())
})
$(document).on('change','#id_lot_type',function () {
$('.field.inline.specially span').eq(1).text($('option:selected',this).text())
});
})
var copy = document.querySelector('.field.inline.specially').cloneNode(true);
document.querySelector('html').addEventListener('input', function(e) {
if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
var error = 0;
for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
evt.value = evt.value.replace(/[^\d]/, '');
if (!evt.value || +evt.value < 1) error++;
}
if (!error) {
var last = document.querySelectorAll('.field.inline.specially');
last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
}
}
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
<label for="id_lot_minimum" class="subhead">Lot minimum:</label>
<input type="number" name="lot_minimum" required id="id_lot_minimum" />
<select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
<option value="1">kg</option>
<option value="2">foot</option>
</select>
</div>
<div class="field inline" id='lot'>
<label for="id_lot_cost" class="subhead">Cost:</label>
<input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
<select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
<option value="1">usd</option>
<option value="3">blg</option>
<option value="2">uah</option>
</select>
</div>
<div class="field inline specially">
<label for="specially" class="subhead">Special price</label>
<span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
<span class='numb'></span>
<span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
<span class='curr'></span>
</div>

instead of $('#item').on('change',function) use $(document).on('change','#item',function) which will work on event the injected HTML.

(function() {
$(document).ready(function() {
$('.field.inline.specially > span.curr').text(
$('#id_lot_currency > option:selected').eq(0).text()
);
$('.field.inline.specially > span.numb').text(
$('#id_lot_type > option:selected').eq(0).text()
);
$(document).on('change','#id_lot_currency',function () {
$('.field.inline.specially span.curr').text($('option:selected',this).text())
})
$(document).on('change','#id_lot_type',function () {
$('.field.inline.specially span.numb').text($('option:selected',this).text())
});
})
document.querySelector('html').addEventListener('input', function(e) {
var copy = document.querySelector('.field.inline.specially').cloneNode(true);
if (e.target.classList.contains('event') && e.target.tagName == 'INPUT') {
var error = 0;
for (var evt of document.querySelectorAll('.field.inline.specially input.event')) {
evt.value = evt.value.replace(/[^\d]/, '');
if (!evt.value || +evt.value < 1) error++;
}
if (!error) {
var last = document.querySelectorAll('.field.inline.specially');
last[last.length - 1].insertAdjacentHTML('afterEnd', copy.outerHTML);
}
}
});
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field inline" id="lot_minimum">
<label for="id_lot_minimum" class="subhead">Lot minimum:</label>
<input type="number" name="lot_minimum" required id="id_lot_minimum" />
<select name="lot_type" style="width: 100px" class="select2" id="id_lot_type">
<option value="1">kg</option>
<option value="2">foot</option>
</select>
</div>
<div class="field inline" id='lot'>
<label for="id_lot_cost" class="subhead">Cost:</label>
<input type="number" name="lot_cost" step="0.01" required id="id_lot_cost" />
<select name="lot_currency" style="width: 100px" class="select2" id="id_lot_currency">
<option value="1">usd</option>
<option value="3">blg</option>
<option value="2">uah</option>
</select>
</div>
<div class="field inline specially">
<label for="specially" class="subhead">Special price</label>
<span class="id_specially_price"><input type="text" name="adittional_specially_price" style="width: 165px" class="event" id="" /></span>
<span class='numb'></span>
<span class="id_specially_number"><input type="text" name="adittional_specially_number" style="width: 100px" class="event" id="" /></span>
<span class='curr'></span>
</div>

Do not repeat yourself best practices showing and hiding fields

I am trying to figure out the best way to show and hide fields that are being reused. Cleaning up the code so that I do not repeat myself "DRY". Will someone please assist me in the best practices of doing so?
What I have is a select that allows the user to choose from two different reports.
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreport" value="checklistreport" >Checklist Stats</option>
<option id ="locationreport" value="locationreport" >Location Stats</option>
</select>
Then each report have a lot of similar fields. How can I have them use the same fields but hide/show the differences and go to the correct form "action" based which report is chosen.
Location Report
<form name="generatereport" method="post" action="_location_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
</script>
Checklist Report
<form name="generatereport" method="post" action="_checklists_queries.cfm">
<select name="Location" id="loc" multiple="multiple" required size="8">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="7" readonly></textarea>
<br /><br />
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="8">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="7" readonly></textarea>
<br /><br />
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
<br /><br />
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
<br /><br />
<input type="submit" name="submit" value="Continue" />
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Many of these fields are the same is there a way i can just have one set and show them if either option is chosen and not have two different sets?
This is what I have tried:
<select class="form-control" id="reporttype" name="reporttype">
<option value="" selected="selected">Select Report</option>
<option id ="checklistreports" value="checklistreports" >Checklist Stats</option>
<option id ="locationreports" value="locationreports" >Location Stats</option>
</select>
<script>
$(document).on('change', '#reporttype', function() {
var value = $(this).val();
//var checklistreport = $("#checklistreport");
//var locationreport = $("#locationreport");
var location = $("#location");
var employeelist = $("#employeelist");
var chosendates = $("#chosendates");
var formattype = $("#formattype");
var submitbtn = $("#submitbtn");
if (value == "checklistreports") {
//checklistreport.show();
//locationreport.hide();
location.show();
employeelist.show();
chosendates.show();
formattype.show();
submitbtn.show();
} else if (value == "locationreports") {
//checklistreport.hide();
//locationreport.show();
location.show();
employeelist.hide();
chosendates.show();
formattype.show();
submitbtn.show();
} else {
//checklistreport.hide();
//locationreport.hide();
location.hide();
employeelist.hide();
chosendates.hide();
formattype.hide();
submitbtn.hide();
}
});
</script>
<br /><br />
<!--<div id="locationreport" style="display: none;">-->
<form name="generatereport" method="post" action="_location_queries.cfm">
<!--<div id="checklistreport" style="display: none;">-->
<form name="generatereport" method="post" action="_checklists_queries.cfm">
</form>
<div id="location" style="display: none;">
<select name="Location" id="loc" multiple="multiple" required size="9">
<option value="OPERATIONS">Operations</option>
<option value="CCC">Contact Center</option>
<option value="QA">QA Department</option>
<option value="DS">DeSoto</option>
<option value="PS">Palma Sola</option>
<option value="LWR">Lakewood Ranch</option>
<option value="NR">North River</option>
<option value="SDL">SDL</option>
<option value="FSC">FSC</option>
</select>
<button id="add" type="button">ADD ALL</button>
<button id="rem" type="button">REMOVE ALL</button>
<textarea id="selected" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="employeelist" style="display: none;">
<cfquery name="GetActiveEmps" datasource="tco_associates">
SELECT assoc_userid, assoc_last, assoc_first FROM tco_associates
WHERE assoc_status = 'ACTIVE'
and assoc_last NOT LIKE 'Test%'
and len(assoc_last) > 0
ORDER BY assoc_last
</cfquery>
<select name="EmployeeName" id="EmployeeName" multiple="multiple" required size="9">
<cfoutput query="GetActiveEmps">
<option value="#assoc_userid#">#Trim(assoc_last)#, #Trim(assoc_first)#</option>
</cfoutput>
</select>
<button id="add1" type="button">ADD ALL</button>
<button id="rem1" type="button">REMOVE ALL</button>
<textarea id="selected1" rows="10" readonly></textarea>
</div>
<br /><br />
<div id="chosendates" style="display: none;">
<label for="StartDate">From</label>
<input type='text' name="StartDate" id="StartDate" value="" required/>
<br /><br />
<label for="EndDate">To</label>
<input type='text' name="EndDate" id="EndDate" value="" required/>
</div>
<br /><br />
<div id="formattype" style="display: none;">
<label for="Format">Format</label>
<select name="Format" required>
<option selected value="">Select Format</option>
<option value="print">Print</option>
<option value="pdf">Preview</option>
<option value="xls">Excel</option>
</select>
</div>
<br /><br />
<div id="submitbtn" style="display: none;">
<input type="submit" name="submit" value="Continue" />
</div>
</form>
<script type="text/javascript">
// JS for Showing Chosen Locations in textarea
var opts = document.querySelectorAll('#loc option');
document.getElementById('add').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = true;
}
reflectChange();
});
document.getElementById('rem').addEventListener('click', function() {
for ( var i=0; i<opts.length; i++ ) {
opts[i].selected = false;
}
reflectChange();
});
document.getElementById('loc').addEventListener('change', reflectChange);
function reflectChange() {
document.getElementById('selected').value = '';
for ( var i=0; i<opts.length; i++ ) {
if(opts[i].selected)
document.getElementById('selected').value += opts[i].text+'\n';
}
}
// End JS for Showing Chosen Locations in textarea
// JS for Showing Chosen Associates in textarea
var opts1 = document.querySelectorAll('#EmployeeName option');
document.getElementById('add1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = true;
}
reflectChange1();
});
document.getElementById('rem1').addEventListener('click', function() {
for ( var i=0; i<opts1.length; i++ ) {
opts1[i].selected = false;
}
reflectChange1();
});
document.getElementById('EmployeeName').addEventListener('change', reflectChange1);
function reflectChange1() {
document.getElementById('selected1').value = '';
for ( var i=0; i<opts1.length; i++ ) {
if(opts1[i].selected)
document.getElementById('selected1').value += opts1[i].text+'\n';
}
}
// End JS for Showing Chosen Associates in textarea
</script>
Not sure how I choose which action for the form. Depending on which report is chosen.
https://jsfiddle.net/bobrierton/o2gxgz9r/10018/

You have a few options here:
Option #1:
Always show the "common" inputs, and only hide the inputs that are conditional upon selection, that way your code is cleaner because you only have to manage the conditional elements (not all of them as you are doing now)
Option #2:
Use CF includes to hold your "common" elements, and "conditional" elements, combining them where necessary to build the correct list.
Option #3:
Use JavaScript to hold your "common" elements, and "conditional" elements, and render the composed list based on your conditions.
var location = $('select[name=Location]');
// This lists could hold anything you want, jQuery elements
// references, strings, etc.
var lists = {
common: ['a', 'b', 'c'],
locationreports: ['location #1', 'location #2'],
checklistreports: ['checklist #1', 'checklist #2']
};
$('#reporttype').on('change', function() {
var value = $(this).val();
// Grab a copy of the common list to begin with
var options = [].concat(lists.common);
// Now combine the conditional options
if (value === "checklistreports" || value === "locationreports") {
options = options.concat(lists[value]);
}
// Now you have a complete list of options to show based
// your conditions, so now you can just show them all, or
// do whatever you want with this new list.
location.empty();
options.forEach(function($element) {
// Do something with the list
location.append('<option value="' + $element + '">' + $element + '</option>');
})
There are lots of other options, but between using and combining includes, or composing objects together you should be able to customize a nice DRY workflow.

show next custom error message if user enter only first input in any row

iam working on form validation, my requirement is show erro message if user did not fill all field in a row. in my page there are two rows every row contains two input fields. when i click submit button when all fields are empty it should show error. page first two inputs working. when user enter first field the next field also mandatory. no need of second row, if user filled first row and also filed second row first field, the second row second field mandatory.
in this manner is my requirement i have written some code.
Thanks in advance.
HTML
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var result;
var i = 1
for (i = 1; i < sameCls.length; i++) {
result += sameCls[i]
if (result == 1) {
version1Error.textContent = "Enter version";
return false;
} else {
version1Error.style.display = "none";
}
}
}
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div id="version1Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice1Error" class="selectDevice1Cls"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div id="version2Error" class="firstN"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div id="selectDevice2Error" class="selectDevice2Cls"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>

OK i add it to this code.check it!.
<form name="createNewRelease" onsubmit="return crtNewRelease();">
<select class="form-control" id="sltProject">
<option value="">Select Project</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">Domino’s Makeline App</option>
</select>
<div id="firstNError" class="firstN"></div>
<input class="form-control " placeholder="Release Name" type="text" id="releaseName">
<div id="lastNError" class="firstN"></div>
<div class="selectPlatform">
<h6>Select platforms (you can select both)</h6>
<div class="row">
<div class="col-md-5">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionIpa" />
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice1">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span> </span></div>
</div>
<div class="row">
<div class="col-md-5 ">
<input class="form-control newformInputs" placeholder="Version number" type="text" id="versionApk">
<div class="error"></div>
</div>
<div class="col-md-5 ">
<select class="form-control newformInputs" id="selectDevice2">
<option value="">Select device</option>
<option>iPhone</option>
<option>iPad</option>
</select>
<div class="error"></div>
</div>
<div class="col-md-1"> <span></span></div>
</div>
</div>
<div class="btnsRow">
<button class="btn" type="submit">Create Release</button>
Cancel
</div>
</form>
JS :
function crtNewRelease() {
var versionIpa = document.getElementById("versionIpa");
var version1Error = document.getElementById("version1Error");
var selectDevice1 = document.getElementById("selectDevice1");
var selectDevice1Error = document.getElementById("selectDevice1Error");
var versionApk = document.getElementById("versionApk");
var version2Error = document.getElementById("version2Error");
var selectDevice2 = document.getElementById("selectDevice2");
var selectDevice2Error = document.getElementById("selectDevice2Error");
if (sltProject.value == "") {
sltProject.style.border = "solid 1px red";
firstNError.textContent = "Select Project";
firstNError.style.color = "red";
firstNError.style.marginTop = "10px"
sltProject.focus();
return false;
}
if (releaseName.value == "") {
releaseName.style.border = "solid 1px red";
lastNError.textContent = "Enter Release Name";
lastNError.style.color = "red";
lastNError.style.marginTop = "10px"
releaseName.focus();
return false;
}
var sameCls = document.getElementsByClassName("newformInputs");
var inputArray = [];
var errorPos = [];
var result;
var i = 0;
for (i = 0; i < sameCls.length; i++) {
result = sameCls[i];
if (result.value == "" ) {
errorPos.push(i);
} else {
//version1Error.style.display = "none";
}
}
//reset error class
var listerror = document.getElementsByClassName("error");
for(var t5 = 0 ; t5 < listerror.length ; t5++ ){
listerror[t5].textContent = "";
}
console.log(errorPos);
var flag = false;
if(errorPos.length > 0){
for (i = 0; i < sameCls.length; i=i+2 ) {
if(i % 2 == 0){
console.log(errorPos.indexOf(i));
if(errorPos.indexOf(i)==-1){
if(errorPos.indexOf(i+1)==-1){
flag = true;
}
else{
flag = false;
}
}
}
}
if(!flag){
for(var t2= 0 ; t2 < errorPos.length ; t2++){
console.log(sameCls[errorPos[t2]]);
for(var t3 = 0 ; t3 < sameCls[errorPos[t2]].parentNode.childNodes.length; t3++ ){
if(sameCls[errorPos[t2]].parentNode.childNodes[t3].className == "error"){
sameCls[errorPos[t2]].parentNode.childNodes[t3].textContent = "Erorr!!";
sameCls[errorPos[t2]].parentNode.childNodes[t3].style.display = "block";
return false;
}
}
}
}
}
return false;
}
Check It!

Form Validation?

I'm just trying to make this check form validation. Like it shouldn't let the form submit unless everything is filled in, then it should do the total only if it works. I'm new to this and I have no idea what is going on, but it is just showing a blue box at the top of my screen by default, and then submitting/accepting regardless of the form being filled out or not.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hands-on Project 6 - Order</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<section>
<article>
<h2>Pizza Order Form</h2>
<div id="errorMessage">
</div>
<form action="results.html" id="orderForm">
<input type="hidden" name="hidden" id="hidden">
<fieldset>
<legend>Delivery Information</legend>
<label for="nameinput">Name</label>
<input type="text" id="nameinput" name="name">
<label for="addrinput">Street Address</label>
<input type="text" id="addrinput" name="address">
<label for="cityinput">City</label>
<input type="text" id="cityinput" name="city">
<label for="emailinput">Email</label>
<input type="email" id="emailinput" name="email">
<label for="phoneinput">Phone</label>
<input type="tel" id="phoneinput" name="phone">
</fieldset>
<fieldset>
<legend>Order</legend>
<p>
<span class="nonLabel">What type of crust:</span>
<br>
<input type="radio" name="crust" id="thin" value="1">
<label for="thin">Thin Crust</label>
<input type="radio" name="crust" id="original" value="0">
<label for="original">Original Crust</label>
<input type="radio" name="crust" id="thick" value="3">
<label for="thick">Deep Dish</label>
</p>
<label for="size" class="nonLabel">What size pizza:</label>
<select id="size" name="size">
<option value=""> </option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="XL">Extra Large</option>
</select>
<p>
<span class="nonLabel">What topping(s):</span>
<br>
<input type="checkbox" id="pepperoni" name="toppings" value="Pepperoni">
<label for="pepperoni">Pepperoni</label>
<input type="checkbox" id="sausage" name="toppings" value="Sausage">
<label for="sausage">Sausage</label>
<input type="checkbox" id="bacon" name="toppings" value="Bacon">
<label for="bacon">Bacon</label>
<br>
<input type="checkbox" id="greenpep" name="toppings" value="Green Peppers">
<label for="greenpep">Green Peppers</label>
<input type="checkbox" id="onion" name="toppings" value="Onions">
<label for="onion">Onions</label>
<input type="checkbox" id="xcheese" name="toppings" value="Extra Cheese">
<label for="xcheese">Extra Cheese</label>
</p>
<p>
<label for="instructions" id="instrlabel">Special Instructions:</label>
</p>
<textarea id="instructions" name="instructions" rows="3" cols="60"
placeholder="Special Requests, Delivery Details"></textarea>
</fieldset>
<fieldset id="submitbutton">
<input type="submit" id="submitBtn" value="Add to Cart">
</fieldset>
</form>
</article>
</section>
<script>
document.getElementById("submitBtn ").addEventListener("submit",
validateForm(evt));
</script>
</body>
</html>
JavaScript:
// validate required fields
function validateForm(evt){
if(evt.preventDefault){
evt.preventDefault();
}
else {
evt.returnValue = false;
}
formValidity = true;
validateFormControls();
}
function validateFormControls(){
var inputElements = document.querySelectorAll("fieldset:first-of-type
input");
var errorDiv = document.getElementById("errorMessage");
var crustBoxes = document.getElementsByName("crust");
var fieldsetValidity = true;
var elementCount = inputElements.length;
var currentElement;
try {
for(var i = 0; i < elementCount; i++){
currentElement = inputElements[i];
if(currentElement.value === ""){
currentElement.style.border = "3px solid #0B907A";
currentElement.style.backgroundColor = "#FFC58A";
fieldsetValidity = false;
}
else {
currentElement.style.border = "";
currentElement.style.backgroundColor = "";
}
}
currentElement.querySelectorAll("select")[0];
if (currentElement.selectedIndex === 0){
currentElement.style.border = "3px solid #0B907A";
currentElement.style.backgroundColor = "#FFC58A";
fieldsetValidity = false;
}
else{
currentElement.style.border = "";
currentElement.style.backgroundColor = "";
}
if (!crustBoxes[0].checked && !crustBoxes[1].checked &&
!crustBoxes[2].checked){
crustBoxes[0].style.outline = "3px solid #0B907A";
crustBoxes[1].style.outline = "3px solid #0B907A";
crustBoxes[2].style.outline = "3px solid #0B907A";
}
else {
crustBoxes[0].style.outline = "";
crustBoxes[1].style.outline = "";
crustBoxes[2].style.outline = "";
}
if (fieldsetValidity === false){
throw "Please complete all required fields.";
}
else {
errorDiv.style.display = "none";
errorDiv.innerHTM = "";
}
catch(msg){
errorDiv.style.display = "block";
errorDiv.innerHTML = msg;
formValidity = false;
}
}
}
function orderTotal(){
var itemTotal = 5;
var crusts = document.getElementsByName("crust");
var toppings = document.getElementsByName("goodnight");
var sizes = document.querySelectorAll("select")[0];
if (sizes.selectedIndex > 0) {
itemTotal += ((sizes.selectedIndex * 1) * 2);
}
for (var i=0; i < toppings.length; i++){
if (toppings[i].checked) {
itemTotal += 1;
}
}
for (var i=0; i < crusts.length; i++){
if (crusts[i].checked) {
itemTotal += (crusts[i].value * 1);
}
}
alert ("Your order total is $" + itemTotal);
document.getElementById("hidden").value = itemTotal;
}

Wrong id parameter
document.getElementById("submitButton ").addEventListener("submit", validateForm(evt));
Must be
document.getElementById("submitBtn").addEventListener("submit",validateForm(evt));