We Keep Coding

Multiply input value with select option data attribute

I have the following code that is not working the way i want it to, apparently, am trying to multiply select option data attributes with input text area values but instead select option value are being used. I need to figure out why its so.
Here is my code;
<input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="" class ="txtMult" name="txtEmmail"/>
<span class="multTotal"></span>
<select class="selectpicker">
<option value="1" data-cubics='1'>multiply with 1</option>
<option value="5" data-cubics='5'>multiply with 5</option>
</select>
<span id="grandTotal">250</span>
$(function(){
$('.txtMult').change(function(){
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html());
})
parseInt(total).toFixed(2);
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(function() {
calcVal();
});
function calcVal(){
$(this).data('cubics')*$('.multTotal').html();
$("#grandTotal").html($(this).data('cubics')*$('.multTotal').html())
}
// call on document load
calcVal();

Don't use .html() to get the values, use .text() instead.
You need to get the selected option using this:
$("#grandTotal").html($(this).children(':checked')
$(function() {
$('.txtMult').change(function() {
var p = $(this).parent().parent()
var m = p.find('input.txtMult')
var mul = parseInt($(m[0]).val() * $(m[1]).val()).toFixed(2)
var res = p.find('.multTotal')
res.html(mul);
var total = 0;
$('.multTotal').each(function() {
total += parseInt($(this).text());
})
parseInt(total).toFixed(2);
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(calcVal);
function calcVal() {
$("#grandTotal").html($(this).children(':checked').data('cubics') * $('.multTotal').text().trim())
}
// call on document load
calcVal();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<input id="count" min="1" value="1" class="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="" class="txtMult" name="txtEmmail" />
<span class="multTotal"></span>
<select class="selectpicker">
<option value="1" data-cubics='1'>multiply with 1</option>
<option value="5" data-cubics='5'>multiply with 5</option>
</select>
<span id="grandTotal">250</span>
</div>
</div>

selecting dropdown list and change step attribute of input

i want when choosed A option , input value will be 10,20,30 ...
for B option, input value 5,10,15,20
that code didnt work what is wrong
<select onchange="changeValue(this);" id="size" name="attribute_size">
<option selected="selected" value="">choose option…</option>
<option class="active" value="A">A</option>
<option class="active" value="B">B</option>
</select>
<input min="1" step="1" id="quantity" value="1" title="quantity" class="input-text qty text" size="4" type="number">
function changeValue() {
var option2 = document.getElementById('size').options[document.getElementById('size').selectedIndex].id;
if (option2 == "A") {
document.getElementById('quantity').setAttribute('step', "10");
}
else (option2 == "B")
{
document.getElementById('quantity').setAttribute('step', "5");
}
}

You have a missed if after else which was causing console error,
else if (option2 == "B")
Change the min attribute to '0',
<input min="0" step="1" id="quantity" value="0" title="quantity" class="input-text qty text" size="4" type="number">
And Javascript,
function changeValue(that) {
var option2 =that.options[that.selectedIndex].text;
var inputElm = document.getElementById('quantity');
inputElm.value = 0;
if (option2 == 'A') {
inputElm.setAttribute('step', '10');
} else if (option2 == 'B') {
inputElm.setAttribute('step', '5');
}
}
DEMO
Also, you can use the this onject passed in the parameter when operating on the current object.

You have several errors in your code. (For example typo in else if, wrong method of getting select option value and not using your argument in changeValue method)
I corrected them and put them together to working example:
<select onchange="changeValue(this);" id="size" name="attribute_size">
<option selected="selected" value="">choose option...</option>
<option class="active" value="A">A</option>
<option class="active" value="B">B</option>
</select>
<input min="1" step="1" id="quantity" value="1" title="quantity" class="input-text qty text" size="4" type="number">
<script>
function changeValue(elem) {
var input = document.getElementById('quantity');
if (elem.value == "A") {
input.setAttribute('step', "10");
}else if (elem.value == "B") {
input.setAttribute('step', "5");
}
}
</script>

Select option value based on input value

I have a form selling lengths of cable, there is one price for lengths (5 - 95m) and a second for (100-200m). Based on the length put in the input field I would like the correct price option selected in the drop down menu. What javascript would I need for this.
<select id="leaveCode" name="leaveCode">
<option value="0" selected="selected">Price Option</option>
<option value="5.83">5 to 95m - £5.83</option>
<option value="5.00">100 to 200m - £5.83</option>
</select>
Length required:
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5">
<input type="button" value="Calculate">
Any help would be appreciated.
Thanks

I've added a function in my demo to calculate on change and on button click. Best of luck!
http://jsfiddle.net/vL1a4sdu/
<select id="leaveCode" name="leaveCode">
<option value="0" selected="selected">Price Option</option>
<option value="5.83">5 to 95m - £5.83</option>
<option value="5.00">100 to 200m - £5.83</option>
</select>
Length required:
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5">
<input id="calculate" type="button" value="Calculate">
<div id="cost"></div>
<script>
$('#leaveCode').change(function(){
var price = $(this).val();
var length = $("#length").val();
if ( length ) {
var cost = calculate(price, length);
$("#cost").text(cost);
}
});
$('#calculate').click(function(){
var price = $( "#leaveCode" ).val();
var length = $("#length").val();
if ( price !== null && length !== null ) {
var cost = calculate(price, length);
$("#cost").text(cost);
}
});
function calculate(price,length) {
var cost = price*length;
return cost;
}
</script>

Managed to sort it this way
<select id="dropdown" name="dropdown">
<option value="0" selected="selected">Price Option</option>
<option value="5.83">5 to 95m - £5.83</option>
<option value="5.00">100 to 200m - £5.83</option>
</select>
Length required:
<input type="number" id="length" size="4" maxlength="5" min="5" max="200" step="5" onblur="quickSelect()">
<input type="button" value="Calculate" onClick="quickSelect()">
Javascript
<script type="text/javascript">
function quickSelect() {
var len = Number($("#length").val());
if (len >= 5 && len <= 95) {
document.form.dropdown[1].selected = "1"
}
if (len >= 100 && len <= 200) {
document.form.dropdown[2].selected = "1"
}
}
</script>

See http://jsfiddle.net/mpv1e72j/ to solve this with jQuery
$(document).ready(function(){
$("#length").change(function(){
var len = Number($("#length").val());
if (len >= 5 && len <= 95) $("#leaveCode").val("5.83");
if (len >= 100 && len <= 200) $("#leaveCode").val("5.00");
});
});

Setting visibility of select tag based on selection in prior select tag

I want to have my States select dropdown only be visible after a country has been chosen in a prior dropdown.
Here is my code:
<form>
Name: <input type="text" name="name" autofocus>
<br />
E-mail: <input type="text" name="email">
<br />
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
<br />
<select name="country" onchange="showStates()" id="country">
<option>Select A Country</option>
<option id="US" value="US">USA</option>
<option id="AUS" value="AUS">Australia</option>
</select>
<br />
<select name="State" style="display:none;" id="us-states">
<option>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<br />
<select name="State" style="display:none;" id="aus-states">
<option value="" selected="selected">Select A State</option>
<option value="TAS">Tasmania</option>
<option value="QLD">Queensland</option>
<option value="VIC">Victoria</option>
</select>
<br />
<button type="submit">Submit</button>
<br />
<input type="reset" value="Reset">
</form>
Here is the showStates() function:
function showStates() {
var selected = $('#country :selected').text();
if (selected == "US") {
document.getElementByID('us-states').style.display = "block;";
} else {
document.getElementByID('us-states').style.display = "none;";
}
if(selected == "AUS") {
document.getElementByID('aus-states').style.display = "block;";
} else {
document.getElementByID('aus-states').style.display = "none;";}
}
}
I'm finding that the program initially hides the select boxes, but doesn't redraw them when a new option is selected in the country tag.

Since you're already using jQuery you can do away with the inline function call. Just add a change handler, and use the value of #country to determine which element to show:
$('#country').on('change', function() {
var country = this.value.toLowerCase();
$('select[name="State"]').hide()
.filter('#' + country + '-states')
.show();
});
Here's a fiddle

You can do this way using jQuery:
$('#country').on('change', function() {
var selected = $(this).val();
if(selected === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(selected === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
});
}
Fiddle Example HERE
OR:
$('#country').on('change',function()
{
var selected = $(this).val();
showStates(selected);
});
ShowStates Function:
function ShowStates(value)
{
if(value === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(value === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
}
Fiddle With Existing Function Reuse

How is this?
function showStates(id)
{
$("#"+id).css("display", "block");
}
$("#country").on("change", function(){
showStates('us-states');
});
http://jsfiddle.net/Lukx8/

How to disable fields in html using javascript

My code isn't disabling the other fields. please help
i am trying to select either a participant or exhibitor.once the participant is selected the other fields must be disable.
the Html
<label> <span>Test:</span>
<select id="reg" name="reg" onkeyup="disableField()">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
the javascript
var disableField = function () {
var state = document.getElementById("reg").value === "Participant";
document.getElementById("test1").disabled = state;
document.getElementById("test2").disabled = state;
};

Do not use inline javascript. It makes your code messy and not reusable.
[Edit] This is a working example for you:
<html>
<head> <title></title></head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
<script type="text/javascript">
//<!--
var obj = document.getElementById("reg");
obj.onchange = function(event){
if(this.value=="Male"){
document.getElementById("test1").disabled = 'disabled';
document.getElementById("test2").disabled = 'disabled';
}else{
document.getElementById("test1").disabled = '';
document.getElementById("test2").disabled = '';
}
}
//--></script>
</body>
</html>
[/edit]
Have fun and may the source be with you.

Firstly, use onchange:
<select id="reg" name="reg" onchange="disableField()">
Secondly:
Your option values are 'male' and 'female'. So use that to compare:
var state = document.getElementById("reg").value == "Male";

try this ....it is working
<script type="text/javascript">
function disableField() {
var state = document.getElementById("reg").value === "Participant";
if (state == false) {
document.getElementById("test1").style.visibility = "hidden";
document.getElementById("test2").style.visibility = "hidden";
}
};
</script>

Try this,
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
JS
function disableField() {
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
Check value for Male not Participant
Here is the working code,
<html>
<head>
<script>
function disableField() {
alert('jdhsfg')
var val = document.getElementById("reg").value;
if(val == 'Male') {
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
} else {
document.getElementById("test1").disabled = false;
document.getElementById("test2").disabled = false;
}
}
</script>
</head>
<body>
<label> <span>Test:</span>
<select id="reg" name="reg" onchange="disableField();">
<option value="" selected="selected" >Select Your Registration type </option>
<option value="Male">Participant</option>
<option value="Female">Exhibitor</option>
</select>
</label>
<label> <span>test 1 field:</span>
<input type="text" name="test1" id="test1"/>
</label>
<label> <span>test field 2:</span>
<input type="text" name="test2" id="test2"/>
</label>
</body>
</html>

Add an on change in the select list
<select id="reg" name="reg" onchange="SelectedIndexChanged(this)">
function SelectedIndexChanged(e){
var selectedValue= e.value;
//if Participant is selected
if(selectedValue == "Participant "){
document.getElementById("test1").disabled = true;
document.getElementById("test2").disabled = true;
}
}