How To Control Dropdown Select Options Menu With Jquery - javascript

I am creating a web site. In this web site there is a form and user has to input details. So , in this form , I have added 2 dropdowns like below. Now I want, when I select number 9 from Adults menu, I want to disable children menu. Otherwise if the number is 8 or less than 8, still user can select from children menu. Then I used length in jquery. But, that not what I want.
How can I do this?
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
var st = $('#adults option:selected');
if (st.length > 8) {
$("#children").prop('disabled', true);
}
});
alert(Total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>


You just need to change length to
if (st.val() > 8)
DEMO: https://codepen.io/creativedev/pen/ERpXOa
To enable back when value is different:
if (st.val() > 8)
{
$("#children").prop('disabled', true);
}else{
$("#children").prop('disabled', false);
}


You should check against the selected value, not the length:
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
$('#adults').change(function() {
if (this.value > 8) { // check against the value of the adults drop down
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false); // probably need to re-enable it
}
});
// alert(Total);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
</div>
Search Flight Data
</form>

Related

How to multiply 2 numbers form select options and sum the result

I have a form field with 2 select options for my services (logo design and letterhead design) where I want users to select the number of either logo or letter head designs they want or both.
For instance, they can select 2 logo design and 3 letter head designs. There is a fixed amount for both designs. All I want is for them to select the number they want and they can preview the total amount for all before they make payment.
I have my forms done and I can also see the amount for each select option but I'm stuck at calculating both services together.
I'm not too good at javascript but I understand a little.
//Calculate branding amount by selected option
function logo(val) {
var logo = val * 20000;
document.getElementById("ansval").value = logo;
var letterhead = vall * 20000;
document.getElementById("ansval").value = letterhead;
document.getElementById("ansval").value = logo + letterhead;
}
<form>
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

To make this work it would be better to have your function read both the selected values from the DOM, instead of passing in a single value and then trying to figure out what the other one should be. Then you can perform the calculation quite simply and update the #ansval element with the outcome.
Note the use of parseInt() in the below example so that the values are treated as numbers to be added instead of string to be concatenated. Also note the use of unobtrusive event bindings. Using onchange and other inline event attributes is bad practice and should be avoided where possible.
With all that said, try this:
let logoEl = document.querySelector('#logonumber');
let letterheadEl = document.querySelector('#letterheads');
logoEl.addEventListener('change', calcTotal);
letterheadEl.addEventListener('change', calcTotal);
function calcTotal() {
var numLogo = (parseInt(logoEl.value, 10) || 0) * 20000;
var numLetterHead = (parseInt(letterheadEl.value, 10) || 0) * 20000;
document.querySelector("#ansval").value = numLogo + numLetterHead;
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>

Your function have to take both the submitted value for proper calculation. i just modified your code a little bit and it's done.
function logo(val)
{
var logo = document.getElementById("logonumber").value;
var letterhead = document.getElementById("letterheads").value;
document.getElementById("ansval").value = (logo * 20000) + (letterhead * 20000);
}
<div class="form-group">
<label for="logonumber">Number of logos required</label>
<select class="form-control" id="logonumber" onChange="logo(this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<label for="letterheads">Number of letterheads required</label>
<select class="form-control" id="letterheads" onChange="logo(this.value)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="form-group">
<input type="text" name="ansval" id="ansval" disabled>
</div>
<p></p>
<button type="submit" class="btn btn-primary btn-block">Pay</button>
</form>

Use #click method with select tag to change value on a computed property

What I'm trying to do is:
Input an emotion with the text box and rate the intensity of the emotion with the select box. The blue button adds emotion.
In the rerate section I would like to rerate the intensity of that emotion.
In the rerate, I'm looping through a computed property rerateEmotions that has an array of objects that contains emotion and intensity properties. What I'd like to do is change the intensity for each emotion on the computed property with the select tag:
Edit
Okay, I found out I need to change the #click to #change on the rerate <select>
Now I just want to figure out how to have a separate rating from the "rate emotion" and rerate emotion" areas.
const app = new Vue({
el: "#app",
data: function() {
return {
emotion: "",
intensity: null,
newIntensity: null,
emotionIntensity: []
};
},
computed: {
rerateEmotions() {
return this.emotionIntensity;
}
},
methods: {
rerateIntensity(id) {
return (this.rerateEmotions[id].intensity = this.newIntensity);
},
openEmotion(id) {
this.emotionId = id;
},
addEmotionIntensity() {
var emotionIntensity = {
emotion: this.emotion,
intensity: this.intensity
};
this.emotionIntensity.push(emotionIntensity);
this.emotion = "";
this.intensity = null;
},
removeEmotion(id) {
if (id > -1) {
this.emotionIntensity.splice(id, 1);
}
},
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row mb-3 pr-4">
<div class="col-6">
<h1>Rate</h1>
<input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="col-5 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
<option value="" disabled selected>Rate Emotion</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<button #click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
</div>
<ul>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<button type="button" #click="removeEmotion(index)">
X
</button>
</li>
</ul>
<hr>
<div class="form-group">
<label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>
<li v-for="(emotion, index) in rerateEmotions">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" #change="rerateIntensity(index)">
<option value="" disabled selected>Rate Emotion</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</li>
<hr>
</div>
</div>

If you need two intensity rating then you could just have two properties on each object. e.g. intensity and newIntensity. In the example below I've initialised both to the same value when an entry is first created but the second property could be left empty if that's preferred.
The computed property rerateEmotions didn't seem to be doing anything so I've removed it in favour of using emotionIntensity directly. Perhaps the intent was to create a copy but using a computed property won't have that effect, it will just be the same array.
For the re-rate dropdown I've used v-model, though there's no reason why you couldn't use an event listener if you prefer. The key thing is that I'm using the newIntensity property for that second value.
const app = new Vue({
el: "#app",
data: function() {
return {
emotion: "",
intensity: null,
newIntensity: null,
emotionIntensity: []
};
},
methods: {
openEmotion(id) {
this.emotionId = id;
},
addEmotionIntensity() {
var emotionIntensity = {
emotion: this.emotion,
intensity: this.intensity,
newIntensity: this.intensity
};
this.emotionIntensity.push(emotionIntensity);
this.emotion = "";
this.intensity = null;
},
removeEmotion(id) {
if (id > -1) {
this.emotionIntensity.splice(id, 1);
}
},
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="row mb-3 pr-4">
<div class="col-6">
<h1>Rate</h1>
<input v-model="emotion" type="text" placeholder="Enter emotion here." class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
<div class="col-5 select-outline">
<select class="mdb-select md-form md-outline colorful-select dropdown-primary" v-model="intensity">
<option value="" disabled selected>Rate Emotion</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<button #click="addEmotionIntensity()" type="button" class="col-1 btn btn-primary">+</button>
</div>
<ul>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.intensity}}</b>
<button type="button" #click="removeEmotion(index)">
X
</button>
</li>
</ul>
<hr>
<div class="form-group">
<label for="exampleFormControlTextarea1"><h5>Rerate</h5></label>
<li v-for="(emotion, index) in emotionIntensity">
<b>{{emotion.emotion}} : {{emotion.newIntensity}}</b>
<select v-model="emotion.newIntensity" class="mdb-select md-form md-outline colorful-select dropdown-primary">
<option value="" disabled selected>Rate Emotion</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</li>
<hr>
</div>
</div>

Updating Total cost with Multiple drop down lists

I would like to make the total update depending on the amount of tickets that have been selected
I cant get the price to update with the different selections.For example, if someone were to choose "2" seats and then "3" seats on the other types of tickets i would like the price to all update
var seat_prices = new Array();
seat_prices["None"] = 0;
seat_prices["seats-STA"] = 19.80;
seat_prices["seats-STP"] = 17.50;
seat_prices["seats-STC"] = 15.30;
seat_prices["seats-FCA"] = 30.00;
seat_prices["seats-FCP"] = 27.00;
seat_prices["seats-FCC"] = 24.00;
//Calculation
function calculateTotal(value, seat_prices) {
return value * seat_prices;
}
function getSeatPrice() {
var seatPrice = 0;
var form = document.forms["seatform"];
var seatSTA = form.elements["seats-STA"];
var seatSTP = form.elements["seats-STP"];
var seatSTC = form.elements["seats-STC"];
var seatFCA = form.elements["seats-FCA"];
var seatFCP = form.elements["seats-FCP"];
var seatFCC = form.elements["seats-FCC"];
seatPrice = seat_prices[seatSTA.value, seatSTP.value, seatSTC.value, seatFCA.value, seatFCP.value, seatFCC.value];
return seatPrice;
}
function getTotal() {
var total = seatSTA + seatSTP + seatSTC + seatFCA + seatFCP + seatFCC;
document.getElementById('total').innerHTML = "Total Price for Tickets $" + total;
}
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' onchange="calculateTotal(this.value)" required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Something like this?
Note I wrapped the divs in a div id="container" - you even had a trailing </div> so I assume you already had one. Change the id below to whatever you have or add id="container" to yours
PS: It is not a great idea to not allow the user to reset the seats, so I would personally remove the disabled from the first option
// we are better off with an object
var seat_prices = {
"STA": 19.80,
"STP": 17.50,
"STC": 15.30,
"FCA": 30.00,
"FCP": 27.00,
"FCC": 24.00
};
window.addEventListener("load", function() { // when page has loaded
document.getElementById("container").addEventListener("change", function(e) {
// the above listener catches ALL changes in the div
var tgt = e.target; // whatever was changed
if (tgt.tagName === "SELECT") {
var total = 0;
Object.keys(seat_prices).forEach(function(key) { // get the keys from the object
var val = document.getElementById("seats-" + key).value;
total += val === "ticketNumber" ? 0 : val * seat_prices[key]; // get the amount
})
document.getElementById("total").value = total.toFixed(2); // show it with two decimals
}
})
})
<div id="container">
<div class="Standard">
<label for="Standard Adult"><b>Standard Adult</b></label>
<select type="select" name="seats[STA]" id='seats-STA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Concession"><b>Standard Concession</b></label>
<select type="select" name="seats[STP]" id='seats-STP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="Standard Child"><b>Standard Child</b></label>
<select type="select" name="seats[STC]" id='seats-STC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- First Class Section -->
<div class="FirstClass">
<label for="First Class Adult"><b>First Class Adult</b></label>
<select type="select" name="seats[FCA]" id='seats-FCA' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Concession"><b>First Class Concession</b></label>
<select type="select" name="seats[FCP]" id='seats-FCP' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label for="First Class Child"><b>First Class Child</b></label>
<select type="select" name="seats[FCC]" id='seats-FCC' required>
<option value="ticketNumber" disabled selected>Select number of tickets...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<!-- Customer Details -->
<div class="CustomerDetails">
<label for="Name"><b>Name</b></label>
<input type="text" name="cust[name]" id='cust-name' required>
<label for="Email"><b>Email</b></label>
<input type="email" name="cust[email]" id='cust-email' required>
<label for="Mobile"><b>Mobile</b></label>
<input type="tel" name="cust[mobile]" id='cust-mobile' required>
<label for="Credit Card"><b>Credit Card</b></label>
<input type="text" name="cust[card]" id='cust-card' required>
<label for="Expiry"><b>Expiry</b></label>
<input type="month" name="cust[expiry]" id='cust-expiry' required>
</div>
<hr>
<label><b>Total Amount</b></label>
<input name="total" id="total" type="text" readonly>
<br><br>
<button type="submit" class="bookbtn" name="order" id='bookbtn' onclick="calculateTotal()">Book Now!</button>
</div>

Get value from select and clone form number of times

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class=bookForm>
<div class=col-xs-12>
<h3 class=bookForm-heading>Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
.bookForm{
display:none;
}
function bookFormToggle(){
var traveller = $("#travellersNumber");
var form = $(".bookForm");
var heading = $('.bookForm-heading');
function unhideForm(){
var travellerValue = parseInt(traveller.val());
for(i=0;i<travellerValue;i++){
heading = heading.html('Traveller '+ (i+1) +' Information');
form.clone().insertAfter(form);
}
}
traveller.on("change",unhideForm);
unhideForm();
}
bookFormToggle();

Hope this is what you want.
$(function () {
$("#travellersNumber").on('change', function () {
var traveller = $(this);
var form = $("#original");
var heading = $('.bookForm-heading');
var travellerValue = parseInt(traveller.val());
$("#original").hide();
$("[id*='original_']").not("#original").remove(); //Remove all forms except original form
for (i = 0; i < travellerValue; i++) {
if (i == 0) {
heading = heading.html('Traveller 1 Information');
$("#original").show();
}
else
{
var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bookForm {
display: none;
}
</style>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm" id="original">
<div class=col-xs-12>
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
<div id="travellersDetail"></div>

The problem is that you are not removing the old forms that you have added.
$(document).ready(function(){
var traveller = $('select[name="trav"]');
traveller.change(function(){
$('.bookForm').not('.bookForm:first').remove();
var travellerValue = traveller.val();
var form = $('.bookForm:first');
for(i=travellerValue;i>1;i--){
var newAdd = form.clone().insertAfter(form);
newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information');
}
$('.bookForm').show();
});
});
.bookForm{
background-color:green;
padding:5px;
margin:5px;
}
#travellersNumber{
width:150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber" name="trav">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm row">
<div class="col-xs-12">
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstName">
</div>
</div>
</div>

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>
function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}
}

JavaScript - Reading from dropdown box

I need to be able to read from a dropdown box on a page get the value from it and thats it (for now) I currently have this code.
JavaScript
function main(input)
{
value = getValue();
alert(value);
}
function getValue()
{
var len = document.form1.values.length
var chosen = ""
for (var i = 0; i < len; i++) {
if (document.form1.values[i].selected) {
chosen = document.form1.values[i].value
}
}
return chosen;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Shopping Cart</title>
<link href="style.css" title="Style" rel="stylesheet" type="text/css">
<script src="javascript/js.js" type="text/javascript"></script>
</head>
<!-- Start content -->
<body>
<!-- Wrapper to hold all content in -->
<div id="wrapper">
<!-- Top header, site name, moto, all that -->
<div id="header">
<h1>Kyle's Legit Toys</h1>
<h2>We are more legit then 10th.exe</h2>
<h3>#SoundsLegit</h3>
</div>
<!-- Navigation Menu -->
<div id="menu">
Home
Client Validation
</div>
<!-- Item -->
<div class="first">
<p>Wickedy Walker</p>
<img src="i/car.jpg" width="85%" height="85%" alt="Car" title="#CoolCar">
<p>Cost: £30 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Faster than light car</p>
<img src="i/toycar.jpg" width="85%" height="85%" alt="ToyCar" title="#WickCar">
<p>Cost: £10 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Build stuff crane</p>
<img src="i/crane.jpg" width="85%" height="85%" alt="Toy Crane" title="#SweetCrane">
<p>Cost: £15 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Dynamicaly altered payment -->
<div id="payment">
<p>Payment</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Satch Boogie</p>
<img src="i/guitar.jpg" width="85%" height="85%" alt="Guitar" title="#BeLikeSlash">
<p>Cost: £20 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</form>
</div>
<!-- Item -->
<div class="item">
<p>HaxTop</p>
<img src="i/laptop.jpg" width="85%" height="85%" alt="Laptop" title="#Be1337hax">
<p>Cost: £150 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Train</p>
<img src="i/train.jpg" width="85%" height="85%" alt="Train" title="#ChoChoTrain">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Item -->
<div class="first">
<p>Pedo Bear</p>
<img src="i/teddybear.gif" width="85%" height="85%" alt="Teddy Bear" title="#AwesomeTeddy">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Not a pony bear</p>
<img src="i/bear.jpg" width="85%" height="85%" alt="Teddy Bear" title="#EnvyOfHomies">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Item -->
<div class="item">
<p>Patobo Bear</p>
<img src="i/irl.jpg" width="85%" height="85%" alt="Teddy Bear" title="#NotEvenRacist">
<p>Cost: £5 per item</p>
<form name="form1" method="POST">
<select name="values" onchange="main()" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</form>
</div>
<!-- Clear all floats -->
<div class="clear">
</div>
<!-- Final footer -->
<div id="footer">
<p>Kyle Strudwick - ks339 - StudentNumber</p>
<p>Some copyright stuff</p>
</div>
</div>
</body>
</html>
Error in chrome
Firebug
Thanks a lot, when answering please try and explain what I did wrong, why it was wrong and the correct way.
Thanks

Change your HTML to this :
<select name="values" onchange="main(this)" >
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
<option value="7">Seven</option>
<option value="8">Eight</option>
<option value="9">Nine</option>
</select>
and you function to this :
function main(input)
{
var text = input.options[input.selectedIndex].text; // returns the text ie one / two etc
var value = input.value; // returns the value ie 1 / 2 / 3 etc
}
What i have changed - I have updated the onchange from main() to main(this) this change means thats its passing the current select list object to the main funciton - this makes accessing the actual select list changing from the function a lot easier - you dont have to go searching the DOM for the select list that changed.
What does the javascript do - this simplifies the process of getting the selected option, now we are passed the actual select list that has changed ie input = the correct select list. We can use input.selectedIndex to get the currently selected option and input.value to return the currently selected value
Using document.forms1 wasnt working becuase you have multiple forms with the name form1 on your page - using document.forms1[#] where # is the index of the form would work but its confusing ...
Further changes - you could remove all but one of the forms if you are using it exactly as you have in your question - as they really are doing nothing ... just surround the entire page (just the content) with a single form - using the above method to get the changed value will still work as it doesn't rely on the form !
Here is a quick example of the above working

All your forms have the name form1 so document.form1 actually returns an array of <form> elements. You can access them individually, for example document.form1[0].values for the first form. To maintain a generic function you need to pass the current select element (the one that the onchange event is fired from) into the function so that your function finds the correct form1 to operate on.

Categories

Resources