Basically I'm not a coder I need an example of the proper code to accomplish this please. I am trying to make an electronic PTO form which I have linked within fiddle. What I want to do is if type1 changes then it deletes or subtracts anything in hours1 and really preferably in what ever total field the type1 has filled. So if you go to fiddle select Sick and type 8 in the hours field it will auto count in the total hours for sick onchange. However what if someone selects sick and really meant to select vacation currently they have to manually delete and re-enter all the numbers. I would like to automate the whole thing. I really appreciate your wisdom on this.
Here is the selection fields there are multiple.
<select name="type1" id="type1">
<option value="">Please Select</option>
<option value="Sick">Sick</option>
<option value="Vacation">Vacation</option>
<option value="Holiday">Holiday</option>
<option value="Floating Holiday">Floating Holiday</option>
<option value="Jury Duty">Jury Duty</option>
<option value="Bereavement">Bereavement</option>
<option value="Suspension Paid">Suspension Paid</option>
<option value="Suspension Unpaid">Suspension Unpaid</option>
</select>
This is where the employee enters in the hours of sick or whatever.
<input onchange="javascript:process()" name="hours1" class"hours1" type="text" id="hours1" size="4" maxlength="2" />
When they do this it automatically adds the hours together using the
Sick
<input name="totsick" type="text" id="totsick" size="4" maxlength="2" />
Vacation
<input name="totvac" type="text" id="totvac" size="4" maxlength="2" />
jsfiddle demo
Basically, you should recalculate all the numbers on each change of the type selects, and hours inputs.
that way you avoid miscalculations and lots of unnecessary logic.
here is an example FIDDLE
new code:
//this clause runs after DOM is loaded
$(function(){
//attach a onchange handler to all the type selects and hours texts easily
$("select[id^='type']").change(function(){
processTHREE();
});
$("input[id^='hours']").change(function(){
processTHREE();
});
});
function processTHREE() {
//reset all totals
$("#totsick").val("0");
$("#totvac").val("0");
$("#tothol").val("0");
$("#totfl").val("0");
$("#totjd").val("0");
$("#totber").val("0");
$("#totsp").val("0");
$("#totsu").val("0");
//get a list of all selects whose id starts with the word 'type'
var _types = $("select[id^='type']");
//iterate through them and check values
//the id/value here are the id of the select, and the select itself, not his selected value
$.each(_types, function (_idx, _value) {
var current_select = _types[_idx];
//gets the value of the selected option in the current select
var Selected_value = $("option:selected", current_select).val();
//get the corresponding hours value, parent().parent() goes up twice
//from the select, which means ->td->tr and in the same row search for
//hours input
var selected_hours = $("input[id^='hours']",$(current_select).parent().parent()).val();
//check the value and add to relevant field
if (Selected_value == "Sick") {
addTo("totsick",selected_hours);
} else if (Selected_value == "Vacation") {
addTo("totvac",selected_hours);
} else if (Selected_value == "Holiday") {
addTo("tothol",selected_hours);
} else if (Selected_value == "Floating Holiday") {
addTo("totfl",selected_hours);
} else if (Selected_value == "Jury Duty") {
addTo("totjd",selected_hours);
} else if (Selected_value == "Bereavement") {
addTo("totber",selected_hours);
} else if (Selected_value == "Suspension Paid") {
addTo("totsp",selected_hours);
} else if (Selected_value == "Suspension Unpaid") {
addTo("totsu",selected_hours);
}
});
}
function addTo(elId,hours) {
var element = document.getElementById(elId);
var current = element.value;
//alert(current+"/"+add);
// + before for integer conversion
element.value = +current + +hours;
}
Related
I do have a form with a variable amount of dropdowns I want to check, if something is selected before submit.
What I have is this javascript, but it works for the 1st dropdown only.
var ddl = document.getElementById("status");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == "")
{
alert("Machine status must be selected");
return false;
}
for this dropdown (this comes from a loop so I have a variable amount of them within the form)
<select name="mstatus[]" id="status">
<option value="">please select</option>
<option value="status1">ok</option>
<option value="status2">not ok</option>
</select>
Any hint in the right direction, much appreciated. thanks
I would suggest giving the selects you wish to iterate through the same class and use Jquerys .each(). https://api.jquery.com/each/
For the validation I would use a data tag to help you with the alert label
<select class="form-select" data-label="Machine status"></select>
Then the JS code
$('.form-select').each(function(index, element) {
let value = $(element).val();
let label = $(element).data("label");
if (value === "") {
alert(`${label} status must be selected`);
return false;
}
});
Without Jquery you could do.
document.querySelectorAll('.form-select').forEach(function (element, index) {
//do same code here
});
Good day.
I need to copy what's being typed into a textbox to multiple other text boxes.
The catch is that there is a dropdown which must determine this.
The process: User will enter a "Commodity" into the "Commodity" text box.
After this, they will then select from a dropdown the number of "Delivery Places". If they choose "1"; textbox "Commodity1" will have the same contents as the main "Commodity" textbox.
If they choose "2" as "DeliveryPlaces", both "Commodity1" & "Commodity2" will have the contents typed into "Commodity". This process should follow until "5" for "DeliveryPlaces".
The reason I want it done like this is that most of our clients will only order one type of commodity, even though it will be transported to multiple locations;
function copy(){
if (document.getElementById("DeliveryPlaces").value = "1")
{
document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
}
else if (document.getElementById("DeliveryPlaces").value = "2")
{
document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
}
else if (document.getElementById("DeliveryPlaces").value = "3")
{
document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
document.getElementById("Commodity3").value=document.getElementById("Commodity").value;
}
else if (document.getElementById("DeliveryPlaces").value = "4")
{
document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
document.getElementById("Commodity3").value=document.getElementById("Commodity").value;
document.getElementById("Commodity4").value=document.getElementById("Commodity").value;
}
else if (document.getElementById("DeliveryPlaces").value = "5")
{
document.getElementById("Commodity1").value=document.getElementById("Commodity").value;
document.getElementById("Commodity2").value=document.getElementById("Commodity").value;
document.getElementById("Commodity3").value=document.getElementById("Commodity").value;
document.getElementById("Commodity4").value=document.getElementById("Commodity").value;
document.getElementById("Commodity5").value=document.getElementById("Commodity").value;
}
else
{
document.getElementById("Commodity1").value="";
document.getElementById("Commodity2").value="";
document.getElementById("Commodity3").value="";
document.getElementById("Commodity4").value="";
document.getElementById("Commodity5").value="";
}
}
<p>
Commodity
</p><input type="textbox" id="Commodity" onkeyinput="copy();">
<p>
Commodity1
</p><input type="textbox" id="Commodity1">
<p>
Commodity2
</p><input type="textbox" id="Commodity2">
<p>
Commodity3
</p><input type="textbox" id="Commodity3">
<p>
Commodity4
</p><input type="textbox" id="Commodity4">
<p>
Commodity5
</p><input type="textbox" id="Commodity5">
<p>
Delivery Places
</p>
<select style="width:50px;" id="DeliveryPlaces">
<option value="-">-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
so by filling it in automatically we save the user some time.
I managed to get it working without the if conditions, that was simple enough. Now, however, it's only filling in "Commodity1" even though I choose a "DeliveryPlace" which IS NOT "1".
Any help would be appreciated.
Switch:
if (document.getElementById("DeliveryPlaces").value = "1")
to
if (document.getElementById("DeliveryPlaces").value == "1")
The code is actually switching DeliveryPlaces to 1 in your statement
Try using:
var e = document.getElementById("DeliveryPlaces")
var selection = e.options[e.selectedIndex].value;
Then do your condition based on the value in selection.
you are currently selecting the value of the Select element not the option you have actually selected.
Edit: it may be text rather than value you need on your selection, but give it a go!
I would do it like this:
function copy() {
var e = document.getElementById("DeliveryPlaces")
var selection = parseInt(e.options[e.selectedIndex].value);
var input = document.getElementById("Commodity").value;
var field;
for (var i = 1; i < 6; i++) {
field = "Commodity" + i;
if (i <= selection) {
document.getElementById(field).value = input;
} else {
document.getElementById(field).value = "";
}
}
}
This way, you can clear the other commodities, when you change to a lower delivery place + you can easily add more by editing the for loop.
Your function should receive the number of the dropdown. That is, if you selected 2 copy (2) so you can use a for and go through the ones you want to fill
for (i = item.length; i = 0; i--) {
document.getElementById("Commodity"+i).value=document.getElementById("Commodity").value;
}
The for will go from low to high until it reaches 0. that means that it will count if it is 5. 5,4,3,2,1 and will fill all the fields that you want. This avoids the amount of spaghetti code you have in your structure.
I understand that you are using pure javascript. But you could use jquery and it would make the job easier.
I want to know if it is possible to hit an event if the period sign . is removed from textbox.
for example I have a textbox#Quantity which takes numeric values as input with period sign
and i have a drop down control#unitValue which have three option
I had successfully hit an event on period sign . key press as follows
$("#Quantity").keypress(function(e) {
if(e.which == 46) {
//successfully disabled Gram in Unit
}
});
Now I want to enable "Gram" option in the drop down if the period sign . is removed from the textbox.
I have an idea but don't if it is right to do so.
Idea is:-
On any key press add each letter to an array, Then on backspace key press, I check if the letter on the array index is period sign . or not if it is the . sign then enable the "Gram"
Any help will be Appreciated
Thank you
JS Fiddle - updated -using .prop() instead
// attach the functionality on multi events
$('#inpt').on('keypress input change', function() {
var Gram = $('#slct').children('[value="1"]');
// if the indexOf "." is > -1, then there's a dot
if ($(this).val().indexOf('.') > -1) {
// disable the Gram option
Gram.prop('disabled', true);
// ====================== this part was added by #SarathChandra
// reset the drop down if Gram option was selected
if ($('#slct').val() === "1" || $('#slct').val() === null) {
$('#slct').val("0");
}
// ====================== #SarathChandra Thank you for the improvement
} else {
// if it the dot was removed, we set the disabled prop to false
Gram.prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input id="inpt" type="text">
<select id="slct">
<option value="0">- select -</option>
<option value="1">Gram</option>
<option value="2">Kilo</option>
<option value="3">Quntal</option>
</select>
EDIT: Thanks to #SarathChandra added these couple lines:
if($('#slct').val() == "1" || $('#slct').val() == null){
$('#slct').val("0");
}
To fix it when the entered value doesn't contain a ., and Gram was selected THEN period was add, it resets the dropdown.
JsFiddle Demo
You could use this.
$(document).on('keyup paste', '#Quantity', function() {
if ($(this).val().indexOf('.') > -1) {
// disable the Gram option
$('#Unit').children('[value="1"]').prop('disabled', true);
} else{
$('#Unit').children('[value="1"]').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input id="Quantity" type="text">
<select id="Unit">
<option value="0">- select -</option>
<option value="1">Gram</option>
<option value="2">Kilo</option>
<option value="3">Quntal</option>
</select>
I would suggest storing the previous entered text and compare it to the actual text in the Input:
...
var prevText = "";
$("#Quantity").keypress(function(e) {
var actualText = $(e.target).text();
if (this.prevText.indexOf(".") !== -1 && actualText.indexOf(".") === -1) {
// deleted
}
this.prevText = actualText;
});
...
I am trying to validate a form.
What I am trying to do is validate the form by validating the Option display text not the option value, since the option values are int
Example:
<option value="selectcard">Please select</option>
If user clicks submit the form should validate if the option display says Please Select
regardless of what the option value is.
Code which is not working
function fun(){
$('#cardtype').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Please select") {
$('.showotherpDescription').show();
} else {
}
});
}
Not working: http://jsfiddle.net/f5hxpo7g/2/
Also including the regular working example for validating the form based on option value
Validates Based on option value http://jsfiddle.net/f5hxpo7g/1/
Please let me know what i am doing wrong.
Thanks in advance.
Your function should be like this:
function fun()
{
var ddl = document.getElementById("cardtype");
var valor = ddl.options[ddl.selectedIndex].text;
if (valor == "--- Please select ---")
{
alert("Please select a card type");
}
}
Working fiddle:http://jsfiddle.net/robertrozas/XFtBD/169/
I fixed it, you should use this JS:
$(function () {
$('#subbutton').click(function () {
if ($('#cardtype option:selected').text() === "Please select")
{
alert("PLEASE SELECT");
}
});
});
And remove onclick="..." from the button, you don't need it. Also add id="subbutton.
Here's the working JSFiddle.
I checked out the jsfiddle you referenced and modified it slightly to make it work, you can see it here.
The issue with the code you provided is, IMO:
An issue with the purpose of your function (validation) and the event you're subscribing the code to (the combo selection changed event)
The way you're obtaining the text from the currently selected option, you should create the selector based on the element that contains the options, otherwise, if you have more than 1 combo in your page, you will get lots of values (one for each selected option).
Check out the code in the jsfiddle i provided and let me know if you need more information.
For reference, here is the code i used:
HTML:
<label class="paylabel" for="cardtype">Card Type:</label>
<select id="cardtype" name="cards">
<option value="selectcard">--- Please select ---</option>
<option value="mastercard">Mastercard</option>
<option value="maestro">Maestro</option>
<option value="solo">Solo (UK only)</option>
<option value="visaelectron">Visa Electron</option>
<option value="visadebit">Visa Debit</option>
</select>
<input type="button" onclick="fun()" value="click here">
JS:
function fun(){
var cmb = document.getElementById('cardtype');
var sel = cmb.options[cmb.selectedIndex].text;
if (sel == "--- Please select ---") {
alert('Please select a different option');
//$('.showotherpDescription').show();
} else {
}
}
}
I have a dropdown <select> element to select states from the list of 50 states, I select the 1st value, save it, and show the value in DOM. I changed and select to the 5th value, saving it shows the value updates in DOM. Now back i am selecting the 2nd Value, and saving it. It's not saving the value in DOM and it's showing the previous selected 5th value. I Checked with different values, and found that, after selecting any higher index value, selecting back, lower values are not affecting in DOM, and hence i am not getting the correct values in POST.
This is the function i am calling on change.
function updateDOM(inputField) {
var elementId = inputField;
if (inputField.type == "select-one") {
var prev_select = inputField.selectedIndex;
$('#'+inputField.id+' option').each(
function() {
$(this).removeAttr('selected');
}
);
document.getElementById(elementId.id).selectedIndex = prev_select;
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
document.getElementById(elementId.id).value
= document.getElementById(elementId.id).options[prev_select].value;
}
The HTML
<select id="abc" name="abc" onchange="javascript:updateDOM(this);" class="required" >
<option name="" value="" title="null" selected ></option>
<option name="AK" value="Alaska" title="null" >Alaska</option>
<option name="AL" value="Alabama" title="null" >Alabama</option>
<option name="AR" value="Arkansas" title="null" >Arkansas</option>
<option name="AZ" value="Arizona" title="null" >Arizona</option>
</select>
First of all, why don't you use ":selected" selector of jQuery, which you are using anyway? Also, why are you using jQuery only once?
I would recommend doing it in jQuery-style (sorry, I'm not quite sure what you are trying to do exactly in your code):
http://jsfiddle.net/msLXt/1/
P.S. What is the difference between these conditions?
if (browserVersion == 9) {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}
else {
document.getElementById(elementId.id)
.options[prev_select].setAttribute("selected","selected");
}