I am making a calculator for our company but we are running into a problem.
We are dealing with certain widths. I have that under control.
For example, a width of 100 must be rounded to 98.4 by a certain formula, that has all been achieved!
Now that 98.4 must be used after choosing an option.
For example, that 98.4 must be divided by 12.3 when option
<option id = "222"> 20 cm, hooks overlap 2 </option>
is chosen. And so on with all options.
This is what we have got, please help.
If you need to see for real;
http://calculator.verfuurden.com/
<button class="open-button" onclick="openForm()">Strokencalculator</button>
<div class="form-popup" id="myForm">
<div class="calc-container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-sm-12 col-md-12">
<div id="login-box" class="col-md-12">
<form id="login-form" class="form" action="" method="post">
<strong class="logo">
<img src="/img/logo_enkel_lisoflex_logo.jpg" width="270" height="auto">
</strong>
<div class="form-group">
<label for="breedte" class="text-info">Width in cm</label><br>
<input type="text" name="breedte" id="firstNumber" class="form-control">
</div>
<div class="form-group">
<label for="breedte" class="text-info">the exacte width will be;</label><br>
<label class="form-control" id="result"></label>
</div>
<div class="form-group">
<label for="strookmaat" class="text-info">Required strip size and overlap:</label><br>
<select class="form-control select2">
<option id="102">10cm, hooks overlap 0</option>
<option id="212">20cm, hooks overlap 1</option>
<option id="222">20cm, hooks overlap 2</option>
<hr>
<option id="313">30cm, hooks overlap 1</option>
<option id="333">30cm, hooks overlap 3</option>
<hr>
<option id="414">40cm, hooks overlap 1</option>
<option id="424">40cm, hooks overlap 2</option>
<option id="434">40cm, hooks overlap 3</option>
<option id="444">40cm, hooks overlap 4</option>
</select>
</div>
<div class="form-group">
<input type="button" class="btn btn-primary" onClick="divideBy()" Value="Calculate" /><br><br>
<label for="aantal" class="text-info">Needed number of strips;</label> <strong><span id="result2"></span></strong>
</div>
</form>
<button type="button" class="btn cancel" onclick="closeForm()">Close calculator</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function divideBy() {
var num1 = document.getElementById("firstNumber").value;
document.getElementById("result").innerHTML = Math.round(Math.floor(num1 / 4.1) * 4.1 * 10) / 10;
}
</script>
Related
Wrote html code that changes the color of the page when selected from a drop down menu. In this assignment I must fix the "color" label so that when I click on it it brings up the selection of colors. I can't seem to find a way to accomplish this. I've tried to maybe wrap the the label tags in other tags but none seem to work.
function changeColor() {
const color = document.getElementById("colors").value;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4" >Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
function changeColor() {
var e = document.getElementById("colors");
var color = e.options[e.selectedIndex].text;
document.body.style.backgroundColor = color;
}
<div class="container-fluid">
<form>
<div class="form-group row">
<label class="col col-form-label col-4">Color</label>
<div class="col col-4">
<select name="colors" id="colors" class="form-control">
<option selected>Select...</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>
</select>
</div>
</div>
<!-- Above this is the section for you to edit -->
<div class="form-group row">
<div class="col">
<button type="button" class="btn btn-primary" onclick="changeColor()">Go</button>
</div>
</div>
</form>
</div>
For each element in my database, I am creating a separate thumbnail to display. I have a dropdown menu, and depending on the user's selection I want to show a different form using a function, but the function only works on the first element in the page. When I make a selection on the second, third element, the selection affects the first element and not its corresponding element. How can I solve this such that when I make a selection on the first element, it affects the first element, a selection on the second element affects the second element and so on? My code looks something like this at the moment (in the example below the elements are hard-coded, but in my actual code the elements come from a database and are displayed in a loop):
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="type">Make a selection:</label>
<select id="tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function choose(that) {
if (that.value == "option1") {
document.getElementById("option1").style.display = "block";
document.getElementById("option2").style.display = "none";
} else {
document.getElementById("option1").style.display = "none";
document.getElementById("option2").style.display = "block";
}
}
</script>
I already tried using a jquery each() loop but to no avail. I tried jquery by adding a class to the parent div in each element, and wrapping my current function in a $('.newClass').each(function choose(that){...});.
I also tried getting all the elements with the new class in the parent div, and then looping through them and calling the current function in each iteration but that didn't work. Something like:let elements = document.querySelectorAll('.newClass'); and then for(let i = 0; ...){function choose(that){...}}.
I have also tried not using loops, but instead, use jquery to get the next element of a certain class, and use classes instead of ids in my code. I think this is the best approach but I cannot get it to work. My new function that uses classes instead of ids looks like:
function choose(that) {
if (that.value == "option1") {
$(this).closest('.option1').style.display = "block";;
$(this).closest('.option2').style.display = "none";
} else {
$(this).closest('.option1').style.display = "none";
$(this).closest('.option2').style.display = "block";
}
}
Please help, how can I get this to work?
The mistake was duplicated id attributes. What I've done was prefixing them based on the section-name:
first-section-option1
first-section-option2
second-section-option1
second-section-option2
and used CSS attribute selector, targeting sibling with id ending with desired option index:
[id$="option1"]
I also prefixed the select's id attributes, but it's irrelevant.
Working example below:
function choose(that) {
var $select = $(that);
if (that.value == "option1") {
$select.siblings('[id$=option1]').show();
$select.siblings('[id$=option2]').hide();
} else {
$select.siblings('[id$=option2]').show();
$select.siblings('[id$=option1]').hide();
}
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>First element</h1>
<label for="first-element-tipo">Make a selection:</label>
<select id="first-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="first-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="first-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<h1>Second element</h1>
<label for="second-element-tipo">Make a selection:</label>
<select id="second-element-tipo" onchange="choose(this);">
<option value="" selected disabled>Please select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<div class="thumbnail hidden" id="second-element-option1">
<h3>This is option 1</h3>
<form action='/option1' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
<div class="thumbnail hidden" id="second-element-option2">
<h3>This is option 2</h3>
<form action='/option2' method="POST">
<input name="number" type="number" required>
<input name="text" type="text" required>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
<script type="text/javascript">
</script>
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';
<div class="addMore">
<div class="row addPlus">
<p class="emergencyTitle">Child 1</p>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">Student Name</label>
<input type="text" class="form-control" name="ch1_name">
</div>
<div class="form-group">
<label for="name">Class</label><br>
<select name="ch1_class">
<option value=""> 1 </option>
<option value=""> 2</option>
<option value=""> 3 </option>
</select>
</div>
</form>
</div>
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<label for="name">DOB</label>
<input type="text" class="form-control" name="ch1_dob" id="datepicker">
</div>
<div class="form-group">
<label for="name">Section</label><br>
<select name="ch1_secion">
<option value=""> A </option>
<option value=""> B </option>
<option value=""> C </option>
</select>
</div>
</form>
</div>
</div>
</div>
On the click of a button I am doing this ..
$child = $('.addPlus')
$('.addMore').append($child)
But I cannot seem to add the addPlus div, how over $('.addMore').append("hi") works fine. Can anyone help me out where I am going wrong.
if you want to clone the item - you can use
$('.addPlus').first().clone().appendTo('.addMore')
.addPlus is already appended to .addMore, so your jQuery would work but have no effect.
Assuming you want to copy the existing instance of .addPlus you should call clone() on it before appending it to the parent, like this:
var $newChild = $('.addPlus').first().clone()
$('.addMore').append($newChild)
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.