dynamically calculation of multiple select option data value

dynamically calculation of multiple select option data value - javascript

in my form there is 5 nationality selection box with data-value in it.
<select id="visitorcount" name="visitorcount">
<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>
</select>
<div id="person1">
<select id="country1" name="visitor1">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none">
<select id="country2" name="visitor2">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>
first option is static and always present in form and other 4 select will be shown only when we select number of visitors.
Now what i want is, when i select option 1 it should show the data-fee value in div totalcost.
when we select option two then it should show option1 + Option 2 data-fee value, and so on similar with all other select option.
and when we reduce the number of visitor, it should reduce the cost.
i am just not able to understand how to deal with this.
i can get cost of first select option like this but do not how to deal with dynamically, showing and hiding the div according to number of visitor and then select the options and get the prices and reduce the prices when reduce number of visitor.
<script>
$('body').on('change', '#country1', function() {
var priceforcountry = $('option:selected', this).data('fee');
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
</script>
and when we select country in option 1 it should auto select the same option in all other 4 select boxes.

Like this?
You can use each by class selector for dynamic then check css display
$('body').on('change', '#visitorcount', function() {
for (var i = 1; i <= 5; i++) {
if (i <= $('#visitorcount').val()) {
$('#person' + i).show();
$('#country' + i).show();
} else {
$('#person' + i).hide();
$('#country' + i).hide();
}
}
});
$('body').on('change', '.ct,#visitorcount', function() {
var priceforcountry = 0;
$('.ct').each(function(index,element){
if($(element).parent().css("display") != "none"){
priceforcountry += +$('option:selected', this).data('fee');
}
});
$('#totalcost').text(priceforcountry);
//alert(priceforcountry);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="visitorcount" name="visitorcount">
<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>
</select>
<div id="person1">
<select id="country1" name="visitor1" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person2" style="display:none" >
<select id="country2" name="visitor2" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person3" style="display:none">
<select id="country3" name="visitor3" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person4" style="display:none">
<select id="country4" name="visitor4" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="person5" style="display:none">
<select id="country5" name="visitor5" style="display:none" class="ct">
<option value="india" data-fee="20">India</option>
<option value="usa" data-fee="25">USA</option>
</select>
</div>
<div id="totalcost"></div>

Related

jQuery - Autoselect option on selectbox doesn't function well

I have 2 select boxes. When I select an option on selectbox1, it automatically changes the corresponding value on selectbox2 regardless of value but order.
The thing is, the code is working fine until after a few tries. Then even if I change the option on selectbox1, it doesn't update the one on selectbox2.
To reproduce the issue; go through A to E, then repeat.
Code:
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeAttr('selected');
$(secChildIdx).attr("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
Also JSFiddle version: https://jsfiddle.net/153w074d/

No need for all that code, just work with selectedIndex:
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$(".secondSelectBox").get(0).selectedIndex = selectedIndex;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>
What happened in your original code is that, in some way, the selected attributes are being messed around. Try this: Change to each option from A to E, then start over from A, the selection stops working. Then inspect the second select to see that there are more than one option with selected="selected" attribute. Not sure what caused that tho.

#DontVoteMeDown's answer will certainly work, but the reason you're having this issue is because of the discrepancy between .prop and .attr. Both are similar, but don't refer to the same, identical underlying value.
If you change the below two lines to use the .prop value instead of .attr, your code will work. See the working code example below.
$(".secondSelectBox").find(":selected").removeAttr('selected'); // change to .removeProp
$(secChildIdx).attr("selected", "selected"); // change to .prop
$(".firstSelectBox").change(function(e) {
var selectedOption = $("option:selected", this);
var idx = $(this).children().index(selectedOption)
var secChildIdx = $(".secondSelectBox").children()[idx];
$(".secondSelectBox").find(":selected").removeProp('selected');
$(secChildIdx).prop("selected", "selected");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

You can also use prop to select option.
$(".firstSelectBox").change(function(e) {
var selectedIndex = $(this).get(0).selectedIndex;
$('.secondSelectBox option:eq('+selectedIndex+')').prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="control-group">
<div class="controls">
<label>First Selectbox</label><br/>
<select class="firstSelectBox validate[required]">
<option value="1">Select A</option>
<option value="2">Select B</option>
<option value="3">Select C</option>
<option value="4">Select D</option>
<option value="5">Select E</option>
</select>
</div>
</div>
<br />
<div class="control-group">
<div class="controls">
<label>Second Selectbox</label><br />
<select class="secondSelectBox validate[required]">
<option value="A">Select 1</option>
<option value="B">Select 2</option>
<option value="C">Select 3</option>
<option value="D">Select 4</option>
<option value="E">Select 5</option>
</select>
</div>
</div>

Disable option in other select

I have problem with option. I created search form. When I select class .tylkopolska I want disable all options from next select with id #kraje
and leave there option with class .wlacozneto enabled. How do this using jQuery?
My code is here;
<form method="get" action="<?php bloginfo('url'); ?>">
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input> <input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly" >WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska">POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA">ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
</form>
<script>
var update_szkoly = function () {
if ($("#ofertadlaszkol").is(":checked")) {
$('#sofertyszkola').prop('disabled', false);
$("#ofertadlafirm").prop('checked', false);
$('#sofertyfirma').prop('disabled', true);
$('#sofertyszkola').show();
$('#sofertyfirma').hide();
}
else {
$('#sofertyszkola').prop('disabled', 'true');
}
};
$(update_szkoly);
$("#ofertadlaszkol").change(update_szkoly);
var update_firmysa = function () {
if ($("#ofertadlafirm").is(":checked")) {
$('#sofertyfirma').prop('disabled', false);
$("#ofertadlaszkol").prop('checked', false);
$('#sofertyszkola').prop('disabled', true);
$('#sofertyszkola').hide();
$('#sofertyfirma').show();
}
else {
$('#sofertyfirma').prop('disabled', 'disabled');
}
};
$(update_firmysa);
$("#ofertadlafirm").change(update_firmysa);
</script>

I want disable all options from next select with id #kraje and leave
there option with class .wlacozneto enabled.
to disable every option except with class wlacozneto
$( "#kraje option" ).not(".wlacozneto").prop('disabled', true);
use not selector to exclude certain results.

Bind a change event:
$('#sofertyszkola').change(function() {
$('#kraje').children().not('.wlacozneto')
.prop('disabled', $(':selected', this).is('.tylkopolska'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input>
<input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>
<!-- kategorie OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
<option value="szkoly">WSZYSTKIE OFERTY</option>
<option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
<option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
<option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
<option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
<option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>
<!-- kategorie OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
<option value="firma">WSZYSTKIE OFERTY</option>
<option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
<option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>
<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
<option value="Polska" >POLSKA</option>
<option value="AUSTRIA">AUSTRIA</option>
<option value="BELGIA">BELGIA</option>
<option value="BIAŁORUŚ">BIAŁORUŚ</option>
<option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
<option value="CHORWACJA">CHORWACJA</option>
<option value="CZECHY">CZECHY</option>
<option value="ESTONIA" class='wlacozneto'>ESTONIA</option>
<option value="FRANCJA">FRANCJA</option>
<option value="GRECJA">GRECJA</option>
<option value="HISZPANIA">HISZPANIA</option>
<option value="LITWA">LITWA</option>
<option value="ŁOTWA">ŁOTWA</option>
<option value="NIEMCY">NIEMCY</option>
<option value="ROSJA">ROSJA</option>
<option value="RUMUNIA">RUMUNIA</option>
<option value="SŁOWACJA">SŁOWACJA</option>
<option value="SŁOWENIA">SŁOWENIA</option>
<option value="UKRAINA">UKRAINA</option>
<option value="WĘGRY">WĘGRY</option>
<option value="WŁOCHY">WŁOCHY</option>
</select>
<button type="submit">Szukaj ofert</button>
</fieldset>
Bind a change event on the selector element.
Now get the target element's children option elements and exclude specific one with .not(selector).
Use .prop() method to disable all other options if the selected option is .tylkopolska.

document.getElementById("kraje").disabled = true;

$( "#kraje" ).prop('disabled', true);
$( "#kraje.wlacozneto" ).prop('disabled', false);

Dropdownlist using javascript

I have these 3 dropdownlist. I want to show only 1 dropdownlist according to values selected in the first DDL. can someone help me with this :
HTML :
<div class="field">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For" >
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="field1">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type" >
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="field2">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type" >
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="field3">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type" >
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>
Means if i select shops in first DDL then the second DDL should be DIV field2

Basically, the idea is to get the value of message_for select using jquery and show or hide other selects based on its value.
$("#message_for").on("change", function(){
if($(this).val() == "shop"){
$(".field1").show();
}
//here add more cases to show relevant selects
});
I have created this jsfiddle for you - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

The easiest way is to add classes to divs with the same name as option values in order to target them.
$('div:not(".general")').hide();
$('#message_for').on('change', function() {
$('div:not(".general")').hide();
$('.' + $(this).val()).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="general">
<label for="message_for">Message For</label>
<select id="message_for" name="message_for" title="Message For">
<option value=''>Please Select</option>
<option value='shop'>Shops</option>
<option value='offers'>Offers</option>
<option value='events'>Events</option>
<option value='consultancy'>Consultancy</option>
</select>
</div>
<div class="shop">
<label for="message_type">Message Type</label>
<select id="offer_type" name="offer_type" title="Offer Type">
<option value='special'>Special</option>
<option value='recommend'>Recommended</option>
<option value='day'>Offer of the Day</option>
<option value='hot'>Hot Offer</option>
</select>
</div>
<div class="offers">
<label for="message_type">Message Type</label>
<select id="shop_type" name="shop_type" title="Shop Type">
<option value='mall'>Mall</option>
<option value='warehouse'>Warehouse</option>
<option value='food'>Food</option>
<option value='banquet'>Banquet</option>
<option value='service'>Service</option>
<option value='cosmetics'>Cosmetics</option>
<option value='fashion'>Fashion</option>
</select>
</div>
<div class="events">
<label for="message_type">Message Type</label>
<select id="event_type" name="event_type" title="Event Type">
<option value='social'>Social</option>
<option value='other'>Other</option>
</select>
</div>

How to properly pass dynamic input fields to another page for display?

So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.
I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?
Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):
JavaScript for deleting and adding fields:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
<div class="panel" style="width:98%; margin:0 auto">
<h5>Terms and Conditions</h5>
<p>I.</p>
<p>II.</p>
<p>III.</p>
<p>IV.</p>
</div>
<hr>
<div align="center">
Preview
</div>

If the information doesn't need to be secure, just use the url to pass parameters:
How to get the value from the GET parameters?
1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters)
2) use window.location = newUrl; to access the link
3) in the new page, parse the URL to get the info

You can use localStorage variable to pass values between pages
eg. page 1:
localStorage.setItem("key","value");
page 2:
var value=localStorage.getItem("key");

How to add numbers from dynamic input fields?

I'm basically working on a form right now. But my form has "add" and "delete" buttons to accommodate extra fields. Now, one of the fields is a "total budget" field.
I'm going to send all input fields to another page. But, I want to be able to add up complete total amount from all "total budget" fields. (Keep in mind, there is one total budget field, but the user can "add"/"delete" and there could be more).
When I pass it to the next page, I want to pass them individually, and keep them as so for display. On the next page there will be an extra "final total amount" which I will display that.
Also, I'm using foundation 5 (Not sure if that matters).
Now, I'm not sure how to do this. Can some one point me towards the right way?
Here's what my mark up looks like:
JAVASCRIPT:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>

Assuming the value in Total Budget is not a string and you dont need to parse it away from currency prefixes etc...:
var totalBudget = 0;
$("input[placeholder='Total Budget']").each(function() {
totalBudget += $(this).val();
});

You could have a "Grand Total" hidden input field in your HTML
<input type="hidden" id="grand-total" name="grand-total"/>
You can pass its value with the other input values when you go to the next page
Add a class="total-budget" to the "Total Budget" input fields, and a javascript function which calculates the grand total
function computeGrandTotal() {
var grandTotal = 0;
$(".total-budget").each(function () {
var total = $(this).val();
if ($.isNumeric(total)) {
grandTotal += parseFloat(total);
}
});
$('#grand-total').html(grandTotal);
}
Trigger the computeGrandTotal() function when you go to the next page
<a onclick="computeGrandTotal()" href="#">Go to next page</a>
jsfiddle

We Keep Coding

JavaScript is the programming language of the Web.

dynamically calculation of multiple select option data value - javascript

Related

jQuery - Autoselect option on selectbox doesn't function well

Disable option in other select

Dropdownlist using javascript

How to properly pass dynamic input fields to another page for display?

How to add numbers from dynamic input fields?

Categories

Resources