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.
Related
Hi guys can you help me solve this i used display:none to hide some input fields and display them with a select tag, if it's on a specific country, so when i tried submitting the form it keeps asking the hidden input field to be filled whereas they are hidden with select tag, i want this specific input field to be disable if hidden, then enable when show with required, so if input is shown enable required else disable required if input is hidden
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required><div> </div>
<input id="second" name="second" placeholder="second " value="" required><div> </div>
<input id="third" style="display:none;" placeholder="third" name="third" value="" required><div> </div>
<input id="forth" style="display:none;" placeholder="forth" name="forth" value="" required><div> </div>
<input type="submit" value="submit">
</form>
<script type="text/javascript">
function showDiv(select){
if(select.value== "United States"){
document.getElementById('third').style.display = "block";
} else{
document.getElementById('third').style.display = "none";
}
if(select.value== "United kingdom"){
document.getElementById('forth').style.display = "block";
} else{
document.getElementById('forth').style.display = "none";
}
}
</script>
and also the space between the "second" and the "third" is what i want as the space between the "second" and the "forth" and any other fifth and six if i decided to add to the text field, i want hidden input field to be on same line
second and third
https://i.ibb.co/dQcXS2x/1.png
second and forth
https://i.ibb.co/c11VBfc/2.png
You may set the required attribute for such inputs, like this:
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
Something like this:
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
<form action="d.php" method="POST">
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
<input id="first" name="first" placeholder="first" value="" required>
<div> </div>
<input id="second" name="second" placeholder="second " value="" required>
<div> </div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
<div> </div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
<div> </div>
<input type="submit" value="submit">
</form>
Update:
With div and CSS3 styles.
(function() {
var selTest = document.getElementById("test");
var first = document.getElementById("first");
var second = document.getElementById("second");
var third = document.getElementById("third");
var forth = document.getElementById("forth");
selTest.onchange = function() {
if (this.value === "United States") {
third.style.display = "block";
third.required = true;
} else {
third.style.display = "none";
third.required = false;
}
if (this.value === "United kingdom") {
forth.style.display = "block";
forth.required = true;
} else {
forth.style.display = "none";
forth.required = false;
}
};
}());
form {
border: #ccc solid 1px;
}
form div {
margin: 1em;
}
<form action="d.php" method="POST">
<div>
<select id="test" name="form_select" title="Select Country" onchange="showDiv(this)" required>
<option value="">- Select Country -</option>
<option value="United States">United States</option>
<option value="United kingdom">United kingdom</option>
<option value="Canada">Canada</option>
</select><br/>
</div>
<div>
<input id="first" name="first" placeholder="first" value="" required>
</div>
<div>
<input id="second" name="second" placeholder="second " value="" required>
</div>
<div>
<input id="third" style="display: none;" placeholder="third" name="third" value="" required>
</div>
<div>
<input id="forth" style="display: none;" placeholder="forth" name="forth" value="" required>
</div>
<div>
<input type="submit" value="submit">
</div>
</form>
I have few fields on this code snippet. Here I have radio button If Field_One is checked show mentioned input field (country select, first name, last name, mobile, email, trans id) same like if Field_Two is checked show mentioned field (reference no, id no and trans id)
Here Trans ID. First Name, Last Name is mandotory for both radio button and its a required field. But I have added few required field without last name.
And Field_Two radio field will show field like reference id and id no. I want if only one field is required field and if only one field is filled up then its ok from both reference id and id no.
But My code is not working properly See the below snippet
One thing if First Country is Africa then show another Dropdown box with Country2 but its also required when Africa is selected but Africa not selected its not required.
$(document).ready(function () {
function make_required_inputs(el) {
let value = el.val();
let div = $('div.' + value);
$('input[required]').removeAttr('required');
div.find('input.required').attr('required', true);
$('input[name="trxid"]').attr('required', true);
}
function validation() {
let valid = true;
$.each($('input[required]'), function () {
if ($(this).val() == '') valid = false;
});
if (valid) {
jQuery('#button1').attr('disabled', false);
} else {
jQuery('#button1').attr('disabled', true);
}
}
$('input[type="radio"]').click(function () {
if ($(this).attr("value") == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
$("#country").show();
}
if ($(this).attr("value") == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
$("#country").hide();
}
validation();
});
let checked = $('input[name="myfield"]:checked');
let value_checked = checked.attr("value");
if (value_checked == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide();
}else if (value_checked == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide();
}
$('input[type="radio"]')
make_required_inputs($('input[name="myfield"]:checked'));
$('input[name="myfield"]').on('change', function () {
make_required_inputs($(this));
validation();
});
$('input').keyup(function (e) {
validation();
});
jQuery("#country").change(function(){
jQuery(this).find("option:selected").each(function(){
var optionValue = jQuery(this).attr("value");
if(optionValue=='za'){
jQuery("#country2").show();
} else{
jQuery("#country2").hide();
}
});
}).change();
jQuery("#country2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option>Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<br><br>
<select name="country2" class="required" id="country2">
<option>Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="text" name="last_name" placeholder="Last Name"/>
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no"/>
<br><br>
<input type="text" class="required" name="email" placeholder="Email"/>
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled/>
Update:
$(document).ready(function () {
function validation() {
let valid = true;
$.each($('input[required]:not([name="reference_no"],[name="id_no"]),select[required]'), function () {
if ($(this).val() == '') valid = false;
});
let one = 0;
if ($('input[one="true"][required]').length == 0) {
one = 1;
} else {
one = 0;
$.each($('input[one="true"][required]'), function () {
if ($(this).val() !== '') one++;
});
}
if (valid && one > 0) {
jQuery('#button1').prop('disabled', false);
} else {
jQuery('#button1').prop('disabled', true);
}
}
function required(value) {
$('input.required,select.required').prop('required', true);
if (value == "Field_One") {
$(".Field_One").show();
$(".Field_Two").hide().find('input,select').prop('required', false);
$("#country").show().addClass('required').prop('required', true);
}
if (value == "Field_Two") {
$(".Field_Two").show();
$(".Field_One").hide().find('input,select').prop('required', false);
$("#country").hide().removeClass('required').prop('required', false);
jQuery("#country2").hide().removeClass('required').prop('required', false);
}
validation();
}
$('input[type="radio"]').click(function () {
required($(this).val());
});
let value_checked = $('input[name="myfield"]:checked').attr("value");
required(value_checked);
$('select,input').on('change keyup', function () {
validation();
});
jQuery("#country").change(function () {
var optionValue = jQuery(this).find("option:selected").attr("value");
if (optionValue == 'za') {
jQuery("#country2").show().addClass('required').prop('required', true);;
} else {
jQuery("#country2").hide().removeClass('required').prop('required', false);;
}
validation();
}).change();
jQuery("#country2").hide().removeClass('required').prop('required', false);
});
let valid2 = true;
$.each($('#domain_name,select[required]'), function () { if ($(this).val() == '') valid2 = false; }); if (valid2) { jQuery('#domsBtn').prop('disabled', false); } else { jQuery('#domsBtn').prop('disabled', true); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myfield" value="Field_One" checked="true" /> Field_One
<input type="radio" name="myfield" value="Field_Two" /> Field_Two
<br><br>
<select name="country" class="required" id="country">
<option value="">Select</option>
<option value="us">US</option>
<option value="uk">UK</option>
<option value="za">Africa</option>
</select>
<select name="country2" class="required" id="country2">
<option value="">Select</option>
<option value="eg">Egypt</option>
<option value="ng">Nigeria</option>
<option value="gh">Ghana</option>
<option value="za">South Africa</option>
</select>
<br><br>
<input type="text" name="first_name" class="required" placeholder="First Name" />
<br><br>
<input type="submit" id="firstCheck" value="First Name Check" disabled />
<br><br>
<input type="text" name="last_name" placeholder="Last Name" />
<br><br>
<div class="Field_One">
<input type="text" name="mobile_no" placeholder="Mobile no" />
<br><br>
<input type="text" class="required" name="email" placeholder="Email" />
</div>
<br>
<div class="Field_Two">
<input type="text" name="reference_no" one="true" class="required" placeholder="Reference no" /><br><br>
<input type="text" name="id_no" one="true" class="required" placeholder="ID no" />
</div><br>
<input type="text" name="trxid" class="required" placeholder="Trans ID" />
<input type="submit" id="button1" value="Submit" disabled />
I'm trying to change the value of my input box by changing two different select options.
The first select box is product_type with two different data attributes on the options: data-price and data-price_c.
The second Select box pay_type is to selecting between data-price or data-price_c, to update the value of lprice.
This is what I've tried:
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var selected_type = pt.options[pt.selectedIndex];
sp.onchange = function(){
var selected = sp.options[sp.selectedIndex];
if (selected_type === 1){
lp.value = selected.getAttribute('data-price');
} else {
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
};
sp.onchange();
count.onchange = function(){
fp.value = lp.value * count.value;
}
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" onchange="update();">
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
I hope I understated you correctly what needs to be done from code and explanation:
Your first problem was that you had your selected_type outside of you onchange function so it wasn't getting the changed options onchange.
Second is that you where trying to compare values 1 & 2 with element without actually extracting those values from element (missing .value on selected_type)
I assumed you will need to update the values on your Pay type change too as well as Select Product, so there is nit trick to wrap both HTML selects into one div in this case div id="wrapper" and that will listen on both selects and call function if any of them are changed. So now you call it on wrapper.onchange.
I would also advise to put your calculation fp.value = lp.value * count.value; inside this function to update total price on change of any of those elements so I wrapped your Count: into wrapper div.
Hope this helps.
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
I have a basic form with some input fields and a dropdown(select field).
Almost all fields have a form of validation. When a field has an error, an error message with the CSS class 'errorText' is displayed next to the field.
By default, my submit button is 'disabled'. I want to remove the 'disabled' attribute from my submit button once all tags with 'errorText' CSS classes are hidden/removed.
my current script just hides all tags with 'errorText' when an error occurs. how do I stop it from doing that and how can I enable my submit button once all fields have been properly enter/validated? Thanks.
EDIT: SOLVED. CODE UPDATED.
// Field Validations
$('#firstName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="firstName"]').addClass('errorText');
$('#errorFName').show();
} else {
$('label[for="firstName"]').removeClass('errorText');
$('#errorFName').hide();
}
});
$('#lastName')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$('label[for="lastName"]').addClass('errorText');
$('#errorLName').show();
} else {
$('label[for="lastName"]').removeClass('errorText');
$('#errorLName').hide();
}
});
$('#state')
.on('blur', function() {
var $this = $(this);
if ($('#state').val() == "") {
$('label[for="state"]').addClass('errorText');
$('#errorState').show();
} else {
$('label[for="state"]').removeClass('errorText');
$('#errorState').hide();
}
});
// Submit Button validation
$('input, select').on('keyup, blur', function() {
if ($('.errorText:visible').length ||
$('#firstName' || '#lastName' || '#state').val() == '' ) {
$('input[type="submit"]').prop('disabled', true);
} else if ($('#firstName').val() != '' &&
$('#lastName').val() != '' &&
$('#state').val() != '' ) {
$('input[type="submit"]').prop('disabled', false);
}
});
.errorText {
color: #c4161c;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div>
<label for="firstName" class="required">First Name</label>
</div>
<div>
<input type="text" name="firstName" id="firstName" />
</div>
<div class="errorText" id="errorFName" style="display:none;">Please enter a First Name</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
</div>
<div>
<input type="text" name="lastName" id="lastName" />
</div>
<div class="errorText" id="errorLName" style="display:none;">Please enter a Last Name</div>
<br />
<div>
<label for="state" class="required">State</label>
</div>
<div>
<select name="state" id="state">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
</div>
<div class="errorText" id="errorState" style="display:none;">Please select a State</div>
<br />
<input type="submit" class="LargeButton" value="Submit Referral" disabled />
If it helps, check this update using data-attribute. We group the label,input,error in a div and handle error message. Also simplified the check valid on input and select element but can be modified.
html
<div>
<label for="firstName" class="required">First Name</label>
<input type="text" name="firstName" id="firstName" />
<span class="errorText" style="display:none;">Please enter a First Name</span>
</div>
<br />
<div>
<label for="lastName" class="required">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<span class="errorText" style="display:none;">Please enter a Last Name</span>
</div>
<br />
<div>
<label for="state" class="required">State</label>
<select name="state" id="state" data-valid="">
<option value="">Select State</option>
<option value="alabama">Alabama</option>
<option value="alaska">Alaska</option>
<option value="arizona">Arizona</option>
<option value="arkansas">Arkansas</option>
<option value="california">California</option>
<option value="etc">etc..</option>
</select>
<span class="errorText" style="display:none;">Please select a State</span>
</div>
<br />
<input type="submit" id="submit" class="LargeButton" value="Submit Referral" disabled />
script
$(function() {
$('input,select')
.on('blur', function() {
var $this = $(this);
if ($this.val() == '') {
$this.data("valid", 'false');
//find the immediate span with errorText and show it
$this.next("span.errorText").show();
} else {
$this.data("valid", 'true');
$this.next("span.errorText").hide();
}
checkInputs();
});
});
function checkInputs() {
//find all the input and select items where the data attribute valid is present and make an array
var array = $('input,select').map(function() {
return $(this).data("valid");
}).get();
//if there are not empty or false indicating invalid value set submit property to true
if (array.indexOf("") == -1 && array.indexOf("false") == -1) {
$("#submit").prop("disabled", false);
} else {
$("#submit").prop("disabled", true);
}
}
css
.errorText {
color: #c4161c;
display: block;
}
I am able to create how many inputs fields I want to but I'm struggling with properly naming them and indexing so after submiting the form I will be able to recreate/display the results in correct order.
Here is a link to the webiste http://89.69.172.125/test.php#
Every champion input index-id goes like 1, 2, 3, 4 etc with this code
$('body').on('click', '#addChampion', function() {
$('<p>\
Remove\
<br>\
<label for="p_scnts">\
<input type="text" id="champion[]" size="20" data-id="'+i+'" list="champions" name="champion[]" placeholder="Enter Champion\'s name" />\
<datalist id="champions"></datalist>\
Add General Change\
Add Spell\
<a></a>\
</label>\
</p>').appendTo(scntDiv);
i++;
return false;
});
But every champions has spells which are something like subcategories in this example and I am not able to properly id them
$('body').on('click', '#addSpell',function() {
var championdataid = $('input[id="champion[]"]').attr('data-id');
$(
'<p>\
<select name="change[]" id="change[]" onchange="val(this)">\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>\
</select>\
<label for="var">\
<input type="text" id="championSpell[]" name="championSpell[]" data-id="'+y+'" readOnly="true">\
<br>\
<textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
Add Change\
Remove Spell\
</p>').appendTo($(this).next());
y++;
return false;
});
So ipnput championSpell[] data-id for champion1 should be 1, 2, 3, 4 etc. for champion2 should be 1,2,3,4 etc. and now you can add 3 spells to champion1 it will be 1,2,3 then 3 to champion2 it will be 3,4,5 and then 2 more to champion1 it would be 6,7.
And here is the whole source code without styles and irrelevant code:
<h2>
Add Another Champion
</h2>
<form name="second_form" id="second_form" action="#" method="POST" style="margin: 0;" >
<div id="p_scents">
<p>
<label for="p_scnts">
<input type="text" id="champion[]" size="20" list="champions" data-id="1" placeholder="Enter Champion's name">
<datalist id="champions"></datalist>
Add General Change<a></a>
Add Spell<a></a>
</label>
</p>
</div>
<br/><input type="submit" value="submit">
</form>
<script>
y=0;
function change(x, dblchamp){
if(dblchamp===true){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="Q2"){x=2;}
if(x==="W"){x=3;}
if(x==="W2"){x=4;}
if(x==="E"){x=5;}
if(x==="E2"){x=6;}
if(x==="R"){x=7;}
if(x==="R2"){x=8;}
}else if(dblchamp===false){
if(x==="Passive"){x=0;}
if(x==="Q"){x=1;}
if(x==="W"){x=2;}
if(x==="E"){x=3;}
if(x==="R"){x=4;}
}
console.log(x);
return x;
}
function val(elm) {
var championsWithExtraSpells = ["Aatrox", "Elise", "Fizz", "Heimerdinger", "Jayce", "Lee Sin", "Nidalee", "Rek'Sai","Twisted Fate"];
var championName = $(elm).closest("label").find("input").val();
if($.inArray(championName, championsWithExtraSpells)==-1){
var existsInArray = false;}
else{
var existsInArray = true;}
var d = $(elm).val();
var spellname = document.getElementById("championSpell[]");
var z = champions[""+championName+""][change(d, existsInArray)];
test = $(elm).nextAll("input").first().val('test');
console.log(test);
$('input[name="championSpell[]"]').val(champions[""+championName+""][change(d, existsInArray)]);
}
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents label').size() + 1;
var j =0;
$('body').on('click', '#addChampion', function() {
$('<p>\
Remove\
<br>\
<label for="p_scnts">\
<input type="text" id="champion[]" size="20" data-id="'+i+'" list="champions" name="champion[]" placeholder="Enter Champion\'s name" />\
<datalist id="champions"></datalist>\
Add General Change\
Add Spell\
<a></a>\
</label>\
</p>').appendTo(scntDiv);
i++;
return false;
});
$('body').on('click', '#remScnt', function() {
if( i >2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('body').on('click', '#addGeneral',function() {
$(
'<p>\
<label for="var">\
<textarea type="text" id="champion[]" size="20" name="GeneralChange[]" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
Remove Change\
</p>').appendTo($(this).next());
j++;
return false;
});
$('body').on('click', '#remVar',function() {
$(this).parent('p').remove();
return false;
});
$('body').on('click', '#addSpell',function() {
var championdataid = $('input[id="champion[]"]').attr('data-id');
$(
'<p>\
<select name="change[]" id="change[]" onchange="val(this)">\
<option value="Passive">Passive</option>\
<option value="Q" selected>Q</option>\
<option value="W">W</option>\
<option value="E">E</option>\
<option value="R">R</option>\
</select>\
<label for="var">\
<input type="text" id="championSpell[]" name="championSpell[]" data-id="'+y+'" readOnly="true">\
<br>\
<textarea type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Description" />\
<select>\
<option value="buff">Buff</option>\
<option value="nerf">Nerf</option>\
<option value="new">New</option>\
<option value="change">Change</option>\
<option value="bugfix">Bugfix</option>\
</select>\
</label>\
Add Change\
Remove Spell\
</p>').appendTo($(this).next());
// $('input[name="championSpell[]"]').attr('data-id', y);
y++;
return false;
});
});
</script>
Can't you just add extra function to "reset" the counter (id) after applying previous champ? Add query system or something like that?