i have a checkout form . where there are 2 fields are used o give total amount of checkout . 1 field is in select tag and second is input type check box i want when i select and option and checkbox there values should be combine to give total.
$(function() {
$('.price-input').change(function() {
var price = 0;
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
})
$("select.price").change(function() {
var selectedPrice = $(this).children("option:selected").val();
document.getElementById("totalPrice").innerHTML = selectedPrice;
});
$(".totalPrice").text(price);
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">#lang('Number of Words'):</label>
<select class="price" name="word_prices_id" required>
<option value="">#lang('Select Words')</option>
#foreach($wordPrice as $wPrice)
<option value="{{$wPrice->id}}">{{$wPrice->page_quantity}} words</option>
#endforeach
</select>
</div>
</div>
<input class="price-input" type="checkbox" name="upsell" value="12">
I added a class .ajx to both Select and input to handle changes made on both of their values in the same function !
$(document).on('change', '.ajx', function () {
if ($( "input.price-input:checked" ).is(":checked") && $("select.price").val()!==''){
var price = 0;
price += parseInt($("select.price").val(),10);
$('.price-input').each(function() {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("value"), 10);
}
});
$(".totalPrice").empty().text(price);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="exampleFormControlSelect1">Price:</label>
<select class="price ajx" name="word_prices_id" required id="exampleFormControlSelect1">
<option value="">Choose Price</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<input class="price-input ajx" type="checkbox" name="upsell" value="12">
<input class="price-input ajx" type="checkbox" name="upsell1" value="15">
<div class="totalPrice">
</div>
Related
Here is my Fiddle
<input type="number" id="test" onkeydown="javascript:return event.keyCode==69? false:true" name="form_select" class="text" onchange="showDiv()">
<select id="hidden_div1" style="display:none;" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="allcontent1"></div>
<script>
function showDiv(){
allselect="";
getSelectValue = parseInt(document.getElementById("test").value);
if(getSelectValue > 0){
for (let i=0;i<getSelectValue;i++){
allselect+=document.getElementById("hidden_div1").style.display="block";}
}else{
document.getElementById("hidden_div1").style.display="none";
}
document.getElementById("allcontent1").innerHtml = allselect;
}
</script>
I wanted to iterate my select elements, using javascript only
I am a newbie and I have this project where the user should have the option of custom input if the listed options are not in dropdown.
HTML
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
</div>
PHP
if(isset($_POST["pageSelector"]))
{
$result = $_POST['pageSelector'];
if($result == "")
{
echo "<script>alert('Please select the Page')</script>";
}
$result_explode = explode('|', $result);
$width_page = $result_explode[0];
$height_page = $result_explode[1];
// Converting the string variables to integer
$width_plate=(double)$width_plate;
$height_plate=(double)$height_plate;
$width_page=(double)$width_page;
$height_page=(double)$height_page;
// To calculate the number of pages that can be print with one selected plate
$calculated_width = $width_plate/$width_page;
$calculated_height = $height_plate/$height_page;
$print_include = (int)$calculated_height*(int)$calculated_width;
echo "<div class='h1'>Number of Prints in one plate ".$print_include." prints</div> ";
}
I would like if the user selects the custom option then a input text should appear on the screen.
If user selected a custom option then you can give him an input.
let selectEl = document.getElementById('select-list');
selectEl.addEventListener('change', (e) => {
if (e.target.value == 'custom') {
document.getElementById('txt-custom').style.display = 'block';
} else {
document.getElementById('txt-custom').style.display = 'none';
}
});
#txt-custom {
display: none;
}
<select id="select-list">
<option value="">Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="txt-custom" name="custom-value" />
var pageSelector = document.getElementById('pageSelector');
var customInput = document.getElementById('customInput');
pageSelector.addEventListener('change', function(){
if(this.value == "custom") {
customInput.classList.remove('hide');
} else {
customInput.classList.add('hide');
}
})
.hide {
width: 0;
height: 0;
opacity: 0;
}
<div class="form-group">
<label class="col-sm-2 col-form-label">Select Page Size</label>
<select name = 'pageSelector' class="col-sm-3 page" id="pageSelector">
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<input type="text" class="hide" placeholder="Custom Selector" name="custom" id="customInput">
</div>
Demo Code :
First you should have input with style="display:none" and with jQuery
jQuery(document).ready(function() {
jQuery("#selectId").change(function() {
if (jQuery(this).val() === 'custom'){
jQuery('input[name=other_input]').show();
} else {
jQuery('input[name=other_input]').hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select name = 'pageSelector' class="col-sm-3" id="selectId" >
<option value ="">Select Page Size</option>
<option value ="84.1|118.9">A0</option>
<option value = "59.4|84.1">A1</option>
<option value = "7.4|10.5">A7</option>
<option value = "custom">Select Custom</option>
</select>
<br><br><br>
<input type="text" name="other_input" style="display:none" />
Angular Version
Angular CLI: 13.0.3
Node: 16.15.0
Package Manager: npm 8.5.5
In .html File
**<div class="col-md-6">
<label class="form-label">Attendence Type</label>
<select (change)="type($event)" class="form-select" aria-label="Default select example" >
<option selected value="P">Present</option>
<option value="A">Absent</option>
<option value="PL">Paid Leave</option>
<option value="UL">Unpaid Leave</option>
</select>
</div>**
I want to Show this input after select paid leave
**<div *ngIf="plFlag" class="col-md-6">
<label class="form-label">Leave Type</label>
<select class="form-select" aria-label="Default select example">
<option selected disabled>Leave Type</option>
<option value="CL">Causel Leave</option>
<option value="SL">Seek Leave</option>
</select>
</div>**
and in .ts File
**type(event: any) {
console.log(event.target.value);
if (event.target.value == "PL") {
this.plFlag = true;
}
else {
this.plFlag = false;
}
}**
I want to make input element name="sellprice" enable if i select value sell option else input element will be disabled.
<select id="selling" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
Here is my Javascript Code, I have try this below code but it's not working.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "free"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
Please have a look I hope it's useful for you.
$(document).ready(function(){
$("select[name='selling']").on('change',function(){
if($(this).val()== "sell"){
$("input[name='sellprice']").prop("disabled",false);
}else{
$("input[name='sellprice']").prop("disabled",true);
}
});
});
I want to make input element name="sellprice" enable
- that is not an input, it's a dropdown
If i select value sell option else input element will be disabled. - from your current explanation i understand that you want to disable the drop-down if the third option is selected
If the third option is selected, the drop-down will be disabled.
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#mounth').prop( "disabled", true );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't Want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
If you want to disable the input if the third option is selected, the following code will do it
$(document).ready(function() {
$('#mounth').change(function() {
if( $(this).val() == "sell") {
$('#textInput').prop( "disabled", true );
} else {
$('#textInput').prop( "disabled", false );
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<select id="mounth" name="selling">
<option value="" selected="selected">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Don't want To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label>Price :</label>
<input id="textInput" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 ">
</div>
<select id="mounth" onchange="myOnChangeFunction()" name="selling">
<option value="">-- Choose --</option>
<option value="free">Open Source</option>
<option value="sell">I Wan't To Sell</option>
</select>
<div class="kd-title-show md-radio-inline">
<label for="4">Price :</label>
<input id="4" type="textbox" class="form-title" name="sellprice" placeholder="Min-$5 to Max-$100 " disabled>
</div>
in js
<script>
function myOnChangeFunction() {
var val = document.getElementById("mounth").value;
if(val === "sell"){
document.getElementById('4').disabled = false;
}else{
document.getElementById('4').disabled = true;
}
}
</script>
I'm creating a form that allows a user to select an amount of services, and then a total is displayed. I have it working to where I can keep the running total of one drop down menu service, but then I can't figure out how to add additional services from other drop down menus. For example, I need it so that if someone selects '3' from one drop down menu, it will times that value by 10 (I have that part done), but then also be able to select a '4' from the next dropdown menu and times that by a value, and then display a total.
Fiddle: https://jsfiddle.net/7jrch7w6/
I'm very new to JavaScript and JQuery, so feel free to give suggestions if you see a better way or if my code is garbage. Thanks!
Here's my code:
<form>
<div id="carpet-services">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option value="0-bedroom">0</option>
<option value="1-bedroom">1</option>
<option value="2-bedroom">2</option>
</select>
<label class="hide" for="0-bedroom">0</label>
<label class="hide" for="1-bedroom">1</label>
<label class="hide" for="2-bedroom">2</label>
<!--how many dining rooms-->
<label class="control-label" for="dining_rooms">Dining Rooms</label>
<select class="form-control" id="dining_rooms">
<option value="0-diningRoom">0</option>
<option value="1-diningRoom">1</option>
<option value="2-diningRoom">2</option>
</select>
<label class="hide" for="0-diningRoom">0</label>
<label class="hide" for="1-diningRoom">1</label>
<label class="hide" for="2-diningRoom">2</label>
</div>
</div>
<h4>Total Price</h4>
<p id="output1"></p>
JS
$("#carpet_cleaning").change(function () {
var bedrooms = $("#carpet_cleaning").val();
var diningRooms = $("#dining_rooms").val();
var bedroomPrice = '';
var diningRoomPrice = '';
if (carpet_cleaning){
var bedroomsLabel = $("label[for="+bedrooms+"]").text();
bedroomPrice = 'Your price quote is: ' + bedroomsLabel * 10;
}
$("#output1").text(bedroomPrice).fadeIn();
});
One line of CSS:
label.hide {display: none;}
First of all, there's no need to use labels for every drop down option, that's what value attribute is for:
<form>
<div id="carpet-services">
<div class="form-group">
<!--how many bedrooms-->
<label class="control-label" for="carpet_cleaning">Bedrooms</label>
<select class="form-control" id="carpet_cleaning">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!--how many dining rooms-->
<label class="control-label" for="dining_rooms">Dining Rooms</label>
<select class="form-control" id="dining_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<h4>Total Price</h4>
<p id="output1"></p>
</form>
Calculation can now be simplified and properly hooked up to change event of both drop downs:
$("#carpet_cleaning,#dining_rooms").change(function () {
var bedrooms = $("#carpet_cleaning").val();
var diningRooms = $("#dining_rooms").val();
var total = bedrooms * 10 + diningRooms * 20;
var totalPrice = 'Your price quote is: ' + total;
$("#output1").text(totalPrice).fadeIn();
});
I don't know if I got your question, but you can use $("#carpet_cleaning option:selected").val() to get the current selected value in a select component.
Fiddle: https://jsfiddle.net/7jrch7w6/4/
$("#carpet_cleaning").change(function () {
UpdateResult();
});
$("#dining_rooms").change(function () {
UpdateResult();
});
function UpdateResult()
{
var result = 'Your price quote is: ' + (($("#carpet_cleaning option:selected").val() * 10) + ($("#dining_rooms option:selected").val() * 20))
$("#output1").text(result).fadeIn();
}
I have a web page for employees where they can choose an item from a dropdown and it will automatically input the price of that item for them. Here is my code:
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_value').val($selection.val());
$('#opt_price').val($selection.data('price'));
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
The code works properly, but how would I be able to add a quantity input that defaults to 1 and when it is changed to two, the price doubles, and when it is changed to three the price triples in the "Option Price" input for example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#price_input').on('change', function() {
$selection = $(this).find(':selected');
$('#opt_value').val($selection.val());
$('#opt_price').val($selection.data('price'));
$('#quantity_input').on('change', function() {
$('#opt_price').val($selection.data('price') * $(this).val());
});
});
});
</script>
<select id="price_input">
<option value="Coffee" data-price="3.00">Coffee</option>
<option value="Chips" data-price="0.75">Chips</option>
<option value="Soda" data-price="2.50">Soda</option>
</select>
<select id="quantity_input">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
</select>
<div>Option Value <input type="text" id="opt_value"/></div>
<div>Option Price <input type="text" id="opt_price"/></div>
Calculation works on change, as for default values and monitoring both you can figure that part out. on change for the quantity dropdown functions so that should get you started.
var select = $("#opt");
var price = $("input#opt_price");
var quantity = $("input#opt_quantity");
var onChangeSelect = function() {
price.val(select.children(":selected").data('price'));
quantity.val(1);
}
select.on('change', onChangeSelect);
quantity.on('change', function() {
price.val(select.children(':selected').data('price') * $(this).val());
});
onChangeSelect();
updated