Here is a snip of my form i am using. I am using javascript to set the value of the dollars and cents to the 2 and 00 but it does not work. Can anyone correct this? Thank you
<select class="element select medium" id="element_8" name="element_8" onChange="update_txt()">
<option value="" selected="selected"></option>
<option value="First option" >First option</option>
<option value="Second option" >Second option</option>
<option value="Third option" >Third option</option>
</select>
<input id="subtotal" name="subtotal" class="element text currency" size="10" value="" type="text" /> .
<label for="subtotal">Dollars</label>
<input id="subtotalcents" name="subtotalcents" class="element text" size="2" maxlength="2" value="" type="text" />
<label for="subtotalcents">Cents</label>
<script>function update_txt(){
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementbyId('subtotal').value ='2';
document.getElementbyId('subtotalcents').value ='00';
}
</script>
It is document.getElementById('subtotal').value ='2';it is capital "B"
function update_txt(){
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementById('subtotal').value ='2';
document.getElementById('subtotalcents').value ='00';
}
P.S: There is no element_7 in the code u provided, but hoping it is present in the actual code ur using.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>function update_txt(){
debugger
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementById('subtotal').value ='2';
document.getElementById('subtotalcents').value ='00';
}
</script>
</head>
<body>
<select class="element select medium" id="element_8" name="element_8" onChange="update_txt()">
<option value="" selected="selected"></option>
<option value="First option" >First option</option>
<option value="Second option" >Second option</option>
<option value="Third option" >Third option</option>
</select>
<input id="element_7" name="element_7" class="element text currency" size="10" value="" type="text" /> .
<input id="subtotal" name="subtotal" class="element text currency" size="10" value="" type="text" /> .
<label for="subtotal">Dollars</label>
<input id="subtotalcents" name="subtotalcents" class="element text" size="2" maxlength="2" value="" type="text" />
<label for="subtotalcents">Cents</label>
</body>
</html>
Related
I Have two Select Box with the same class.I am trying to add a class on the change of select option.
HTML:
<select class="selectProduct" name="product_id[]">
<option value="T-shirt">T-Shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />
<select class="selectProduct" name="product_id[]" style="width:400px;">
<option value="shirt">Shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id ="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id ="qty" class="qty" />
jQuery:
$(document).on('change', '.selectProduct', function(e) {
var idSize = $(this).val();
$(this).find(".code").addClass(idSize);
});
Your select and input is in same hierarchy so use next to get input and add class .
find search inside the element you give so why your code is fail.
$(document).on('change', '.selectProduct', function(e) {
var idSize = $(this).val();
$(this).next(".code").addClass(idSize);
$(this).next().next(".qty").addClass(idSize);
});
.shirt {
outline: none !important;
border: 1px solid red;
}
.T-shirt {
outline: none !important;
border: 1px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="selectProduct" name="product_id[]">
<option value="T-shirt">T-Shirt</option>
<option value="shirt">shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
<select class="selectProduct" name="product_id[]" style="width:400px;">
<option value="T-shirt">T-Shirt</option>
<option value="shirt">Shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="sku" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
The user can only change the value if the select box has more than one option, and it's easier to find the correct .code input to modify if we group the related inputs together.
Here's a revised version of your code that does as you suggest:
const container = document.querySelector('#container-div');
container.addEventListener('change', addValAsClass);
function addValAsClass(event){
const codeBox = event.target.closest(".input-group").querySelector(".code");
codeBox.classList.add(event.target.value);
console.log(`classList: ${codeBox.getAttribute('class')}`);
}
div + div { margin-top: 10px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container-div">
<div class="input-group">
<select class="selectProduct">
<option value="opt1">Opt 1</option>
<option value="opt2">Opt 2</option>
</select>
<input placeholder="Code" class="code" />
<input placeholder="Qty" class="qty" />
</div>
<div class="input-group">
<select class="selectProduct">
<option value="optA">Opt A</option>
<option value="optB">Opt B</option>
</select>
<input placeholder="Code" class="code" />
<input placeholder="Qty" class="qty" />
</div>
</div>
i suggest wrapping the select + input into another div, to make finding easier.
your code might not work, because you have elements with non-unique id (sku and qty).
<div> <!-- wrapper start -->
<select class="selectProduct" name="product_id[]">
<option value="T-shirt">T-Shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
<div> <!-- wrapper end -->
<div> <!-- wrapper start -->
<select class="selectProduct" name="product_id[]">
<option value="T-shirt">T-Shirt</option>
</select>
<input type="text" name="sku[]" placeholder="Code" id="code" class="code" />
<input type="text" name="qty[]" placeholder="Qty" id="qty" class="qty" />
<div> <!-- wrapper end -->
now you can find the next input by class in its parent container:
$(document).on('change', '.selectProduct', function(e) {
var idSize = $(this).val();
$(this).parent().find(".code").addClass(idSize); // <-- parent
})
I'm having a problem when i click the value from dropdown. It should supposedly show me in weightage(total) automatically.
Can someone help me on how to call the value by default from the marks allocation dropdown form automatically into weightage(total).
Marks Allocation code:
<div class="form-row">
<label>Marks Allocation (%):</label>
<select name="percentage" class="form-control" oninput="this.className = ''">
<?php
$sql = mysqli_query($connection,"SELECT * FROM continous_assess");
while ($row=mysqli_fetch_array($sql))
{ ?>
<option value="">
<?php echo $row['percentage']; ?>
</option>
<?php
}
?>
</select>
</div>
Weightage code:
<div class="form-group">
<label>Weightage</label>
<input type="number" name="first" class="prc" />
<input type="number" name="second" class="prc" />
<input type="number" name="third" class="prc" />
<input type="number" name="fourth" class="prc" />
<input type="number" name="fifth" class="prc" />
<label>Total</label>
<output value="<?php echo $row['percentage'];?>"></output>
</div>
This should help you on your way;
<script type="text/javascript">
function updateVal() {
// Get value
var val = document.getElementById("percentage").value;
// Set value
document.getElementById("exampleInput").value = val;
}
</script>
<select name="percentage" id="percentage" onchange="updateVal()">
<option value="">- Select something -</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
<option value="example3">Example 3</option>
</select>
<input type="text" name="exampleInput" id="exampleInput">
I was wondering how a certain field is required only if a certain dropdown is selected. In my form, the person would select "Canada" and two fields underneath will appear(province and postal code), which are required before person submits the form. And if the person selected "United States", the state and zip code will appear instead.
The trouble i am having is that if i choose either country, the fields that are not associated with that country are still required even though they are hidden. I need it so that if i choose United States, then province nor postal code would be required, and the same the other way around.
Any help is greatly appreciated:) Here is the form
<script type='text/javascript'>//<![CDATA[
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#province').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
$('#province').prop('required',false);
}
});
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#postalselect').show();
$('#postal').prop('required',true);
} else {
$('#postalselect').prop('required',false);
$('#postalselect').hide();
$('#postal').prop('required',false);
}
});
</script>
<!--HTML Form-->
<form action="PPPaymentForm/PPPaymentForm.php" method="post" name="topchoiceform" id="topchoiceform">
<input placeholder="Company Name" type="text" name="companyname">
<input placeholder="First Name" type="text" name="first_name" required>
<input placeholder="Last Name" type="text" name="last_name" required>
<input placeholder="Email" type="email" name="email" id="email" required>
<!--Country select-->
<select class="countrycss" id="country" name="country" required>
<option value="" selected="selected">Please Select Country</option>
<option value="Canada" id="Canada">Canada</option>
<option value="United States" id="United States">United States</option>
</select>
<!--Province select-->
<div id="provinceselect" style="display:none;">
<select class="provincecss" id="province" name="province" required>
<option value="" selected="selected">Please Select Province</option>
<option value="Alberta" id="Alberta">Alberta</option>
<option value="British Coloumbia" id="British Coloumbia">British Coloumbia</option>
</select>
</div>
<!--State select-->
<div id="stateselect" style="display:none;">
<select class="statecss" id="state" name="state">
<option value="" selected="selected">Please Select State</option>
<option value="Arkansas" id="Arkansas">Alaska</option>
<option value="Hawalli" id="Hawalli">Hawalli</option>
</select>
</div>
<!--Postal select-->
<div id="postalselect" style="display:none;">
<input placeholder="Postal Code" type="text" name="postal" required>
</div>
<!--Zip select-->
<div id="zipselect" style="display:none;">
<input placeholder="ZipCode" type="text" name="zip" required>
</div>
<input placeholder="City" type="text" name="city" required>
<input placeholder="Address" type="text" name="address1" required>
<input name="shipping" class="shipping" type="radio" id="shipping" checked/>
<label class="shippingcheck">$19.99 Shipping – DATABASE SENT ON CD ROM </label>
<br>
<input name="shipping" class="shipping" type="radio" id="noshipping" />
<label class="shippingcheck">FREE SHIPPING – DATABASE SENT VIA EMAIL</label>
<br>
<button name="submit" type="submit" id="submit">Pay Now</button>
You could use the .prop() method, so for each of your .change you will have something like
$('select[name=country]').change(function () {
if ($(this).val() == 'Canada') {
$('#provinceselect').show();
$('#provinceselect').prop('required',true);
} else {
$('#provinceselect').prop('required',false);
$('#provinceselect').hide();
}
});
I'm curious as to why you have four different instances of .change() I would have put them all under the same instance of change() since they are all reacting to the same thing.
Yeah, remove the required field from the optional fields and add them by using prop() method.
I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />
I need these two fields to be multiplied together based on selected form options.
Okay so it works without all the extra fields but once i added the rest of the form the calculation stopped working. :(
<form action="mailer.php" data-validate="parsley" method="post" >
<p><strong>Full Name<span class="red">*</span></strong></p>
<input name="cf_name" data-required="true" class="send" type="text" />
<p><strong>Email Address<span class="red">*</span></strong></p>
<input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
<p><strong>Cellphone No.<span class="red">*</span></strong></p>
<input name="cf_cell" data-required="true" class="send" type="text" />
<p><strong>Instrument Type<span class="red">*</span></strong></p>
<select name="cf_instrument" size="1" class="option" >
<option value="Piano">Piano</option>
<option value="Vocals">Vocals</option>
<option value="Guitar">Guitar</option>
<option value="Bass">Bass</option>
<option value="Flute">Flute</option></select>
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select name="cf_package_type" id="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option></select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
<option name="1" value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option></select>
<script src="js/datepair.js"></script>
<p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
<p class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-2" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-3" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<script src="js/datepair.js"></script>
<p id="lesson-4" class="datepair" data-language="javascript">
<input type="text" name="cf_booking_date" class="date start" data-required="true" />
<input type="text" name="cf_start_time" class="time start" data-required="true" /> to
<input type="text" name="cf_end_time" class="time end" data-required="true" /></p>
<!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
<input id="website" class="using" name="website" type="text" />
<!-- END -->
<input name="Submit" class="submit" value="Book Now" type="submit" /></form>
<input type="text" value="100" disabled="disabled" id="result">
Corrected JS used:
<script type="text/javascript">
$("select").change(function(){
var val1 = + ($("#cf_package_type").val());
var val2 = + ($("#number-of-lessons").val());
$("#result").val(val1*val2);
});
</script>
I know i'm probably very off-track but if someone could please help me with this it would be a life-saver!
Here's the JS fiddle to help you - http://jsfiddle.net/GuBPL/10/
Thank you.
Try with following code:
<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select id="cf_package_type" name="cf_package_type" size="1" class="option">
<option value="100">Beginner Lesson - R100</option>
<option value="130">Advanced Lesson - R130</option>
<option value="160">Professional Lesson - R160</option>
</select>
<p><strong>No. of Lessons<span class="red">*</span></strong></p>
<select id="number-of-lessons" name="cf_number" size="1" class="option">
<option value="1" selected="selected">1</option>
<option name="2" value="2">2</option>
<option name="3" value="3">3</option>
<option name="4" value="4">4</option>
</select>
<input type="text" disabled="disabled" id="result">
And JS:
$(document).ready(function(){
$("#number-of-lessons").change(function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($(this).val());
$("#result").val(val1*val2);
});
});
What's changed ?
First select got id="cf_package_type" attribute, which is used to get its value with:
$("#cf_package_type").val()
Removed onchange='test()' because we do it with jQuery:
$("#number-of-lessons").change()
Get value of second select with:
$(this).val()
because we work on it already.
parseInt used just to be sure, we use integers, not strings.
Edit:
To calculate result on page load, use:
$(document).ready(function(){
var calculate = function(){
var val1 = parseInt($("#cf_package_type").val());
var val2 = parseInt($('#number-of-lessons').val());
$("#result").val(val1*val2);
};
$("#number-of-lessons").change(calculate);
calculate();
});
You use $('.select') while the elements have class name option,
You should use change event instead of keyup
you use $('.cf_package_type') while it's a name, not class attribute
http://jsfiddle.net/GuBPL/4/
$(document).ready(function(){
$(".option").change(function(){
var val1 = +$("[name=cf_package_type]").val();
var val2 = +$("[name=cf_number]").val();
$("#result").val(val1*val2);
});
});