I have a txtSubTotal text box, a discount drop down and a txtGrossTotal text box. txtSubTotal text box is updating when the ADD button is clicked. txtGrossTotal text box is updating when the drop down value is selected. But, when updating the txtSubTotal text box, at the same time txtGrossTotal text box should be updated for the default drop down value, which is "0". Here, txtGrossTotal should be the value of txtSubTotal.
Below is my code, it doesn't display the txtGrossTotal when the drop down has it's default value. (But, after selecting another option, and again select the default value, it updates the txtGrossTotal.)
function discountedGrossTotal(dropdownVal){
var discountOption = document.getElementById("discount"),
subTotal = document.getElementById("txtSubTotal"),
grossTotal = document.getElementById("txtGrossTotal").value;
grossTotal.value = subTotal.value - (subTotal.value * dropdownVal/100);}
discount drop down
<select class="select" id="discount" name="discount" onchange="discountedGrossTotal(this.value);">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
txtGrossTotal HTML
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly/>
</div>
Basically you want to take the same action by changing the "discount" dropdown value as well as the "subtotal" textbox value. So, you will have to call the same function on both.
You can achieve this by doing below modifications in your code:
Remove the parameters from "discountedGrossTotal" function
Add a new variable inside your function like dropdownVal = document.getElementById("discount").value
Call the same function on change event of your "txtSubTotal" textbox
Now, this function will be called if any of these (textbox or dropdown) value is changed and hence the "Gross Total" value will be updated accordingly.
Please Try this, it should work for you...
function discountedGrossTotal() {
var dropdownVal= document.getElementById("discount").options[document.getElementById("discount").selectedIndex].innerHTML;
subTotal = document.getElementById("txtSubTotal");
grossTotal = document.getElementById("txtGrossTotal").value;
document.getElementById("txtGrossTotal").value = subTotal.value - (subTotal.value * dropdownVal / 100);
}
sub total: <input type="text" id="txtSubTotal" onblur="discountedGrossTotal()" />
<br />
discount: <select class="select" id="discount" name="discount" onchange="discountedGrossTotal();">
<option selected>0</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br />
<div id="gross_total_div">
<input name="txtGrossTotal" type="text" id="txtGrossTotal" size="15" readonly />
</div>
Related
How, using only HTML and CSS, to make it so that when I select an option in <select>, my input is filled in?
Here is my code
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1">Default1</option>
<option value="Default2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
So, if I select Default1 option, in input will fill a text, for example "example1". Just to make text in input different from the option value
How can I do it in JS?
window.onload = function(){
document.getElementById("descrizione_01").value = document.getElementById("cod_art_01").options[0].dataset.text;
};
document.getElementById("cod_art_01").addEventListener("change", function(e){
document.getElementById("descrizione_01").value = e.target.options[e.target.selectedIndex].dataset.text;
});
<select class="cod_art" name="cod_art" id="cod_art_01">
<option value="Default1" data-text="Example1">Default1</option>
<option value="Default2" data-text="Example2">Default2</option>
</select>
<input type="text" id="descrizione_01" name="descrizione" readonly>
I need to have the value "discount" inserted into a hidden input field based on what is chosen from a select form. If options 2, 3 or 4 are selected then the value should be inserted, if 1 is selected then the hidden input value is left empty.
I need to keep the current option values as they will also be used
<div class="form-group">
<div class="form-inline">
<select id="myselect" name="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type='hidden' id='myhidden' value=''>
</div>
</div>
One way to achieve that would be with the following script:
/* Attach a "change" event listener where the value of "myhidden"
will be updated based on the selected option in "myselect" */
document.getElementById('myselect').addEventListener('change', (event) => {
/* Get the current value of "myselect" as well as the hidden element */
const mySelectValue = event.currentTarget.value;
const hiddenElement = document.getElementById('myhidden');
if (mySelectValue === '1') {
/* If value of "myselect" is 1 then clear value of hidden element */
hiddenElement.value = '';
} else {
/* Otherwise assign the value of "discount" to the hidden element */
hiddenElement.value = 'discount';
}
console.log(`hiddenElement.value updated to ${hiddenElement.value}`);
});
<div class="form-group">
<div class="form-inline">
<select id="myselect" name="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type='hidden' id='myhidden' value=''>
</div>
</div>
I am working on a Formstack form. I need to use Javascript to change the value of a dropdown box to whatever the value being typed into a text field is once a match is made.
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
So as soon as someone types in CIPSmember into the text field, the dropdown should be selected with the same value. If there is no match, the dropdown has no selection.
I used the following jQuery on jsFiddle, but it is not working on Formstack:
$('#field35497729').keyup( function() {
$("#field35497839").val($('#field35497729').val());
}
);
Here is one Javascript method I am trying on jsFiddle that does not work:
document.getElementByID('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = document.getElementByID('field35497729').value;
};
I checked here, here and maybe 10 other places but I can't get it to work. There are plenty of tutorials on how to get a text field to change when a dropdown selection change, but not nearly as many on the opposite.
misspelled ID in getElementById
missing end bracket on the jQuery version
simplified to use this and $(this)
I am however curious. Perhaps you want an autocomplete instead?
Here are your fixed versions
Plain JS version
window.onload=function() {
document.getElementById('field35497729').onkeyup = function() {
document.getElementById('field35497839').value = this.value;
}
}
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
jQuery version
$(function() {
$('#field35497729').on("keyup",function() {
$("#field35497839").val($(this).val()); // or (this.value)
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="field35497729" name="field35497729" size="50" value="" class="fsField">
<select id="field35497839" name="field35497839" size="1" class="fsField">
<option value=""> </option>
<option value="CIPSmember">CIPSmember</option>
<option value="TECHCONNEXmember">TECHCONNEXmember</option>
<option value="TCBCpreferred">TCBCpreferred</option>
<option value="TCBCcomp2015">TCBCcomp2015</option>
</select>
I had a working script, but I need to allow users to change a hidden variable if they choose to.
<strong>Select</strong><br>
<select class="inputClass" size="1" id="f1a" name="Board">
<option value="Selected">Use</option>
<option value="Selected">--------------------------</option>
<option value="6">Floor Joist</option>
<option value="4">Wall</option>
<option value="8">Header</option>
<option value="4">Rafter</option>
</select>
So I added an input field.
<br>
<strong>Board Use</strong> <br>
<input class="inputClass" type="text" id="f1" value="" size="12" name="Board Use">
I have spent the last two weeks trying different codes to get f1a.value into f1 input field. Then the user can choose to leave my value or put his own value in.
Any suggestions.
You just need a simple onchange event on the select:
var f1a = document.getElementById("f1a");
var f1 = document.getElementById("f1");
f1a.onchange = function() {
f1.value = f1a.value;
};
This will call the onchange function anytime the user chooses a new value in the select. The input can be overwritten at anytime.
http://jsfiddle.net/G3PGY/
https://developer.mozilla.org/en-US/docs/DOM/element.onchange
How to get the value that is selected in the dropdown box to a text box.
I have a text box and a drop down box in which village names are listed.If the selection is changed that value should reflect on text box.Please help me.
This is a Javascript 101 question! I shouldn't answer but ....
<script type="text/javascript">
function selectChange(val)
{
document.getElementById("text_id").value = val;
}
</script>
<form>
<input id="text_id" value="" type="text" size="10" />
<br />
<select id="select_id" onChange="selectChange(this.value);">
<option value="">-- Select --</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>