Disable option in other select - javascript

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);

Related

dynamically calculation of multiple select option data value

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>

Auto change second dropdown when selecting the first option

I have two dropdowns, Selecting the first one should change the second automatically. Both dropdowns are visible always.
I have created a fiddle to get you started. Can you help me out. Thanks!
HTML Fiddle
<select name="" id="">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option value="">Cucumber</option> <!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option value="">Onion</option> <!-- veg -->
<option value="">Tomato</option> <!-- veg -->
</select>
<select name="" id="">
<option value="">-</option>
<option value="">Fruit</option>
<option value="">Vegetable</option>
</select>

Use data-* attribute to differentiate among fruit and vegetable
var category = document.getElementById('category');
document.getElementById('elements').onchange = function() {
var optionSelected = this.options[this.selectedIndex];
if (optionSelected.textContent != '-') {
if (optionSelected.dataset.val === 'veg') {
category.value = 'veg';
} else {
category.value = 'fruit';
}
} else {
category.value = '';
}
}
<select name="" id="elements">
<option value="">-</option>
<option value="">Apple</option>
<option value="">Orange</option>
<option data-val='veg' value="">Cucumber</option>
<!-- veg -->
<option value="">Banana</option>
<option value="">Grapes</option>
<option data-val='veg' value="">Onion</option>
<!-- veg -->
<option data-val='veg' value="">Tomato</option>
<!-- veg -->
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="veg">Vegetable</option>
</select>

If you are using jQuery it is simpler.
This is your jQuery code.
$('#item').on('change',function(){
$('#category').val($(this) .find("option:selected").attr('data-category'));
});
This is the modified HTML
<select name="" id="item">
<option value="">-</option>
<option data-category ="fruit" value="">Apple</option>
<option data-category ="fruit" value="">Orange</option>
<option data-category ="vegetable">Cucumber</option>
<option data-category ="fruit" value="">Banana</option>
<option data-category ="fruit" value="">Grapes</option>
<option data-category ="vegetable">Onion</option>
</select>
<select name="" id="category">
<option value="">-</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetables</option>
</select>

Using javascript within php in order to make a selectbox visible

I am using php and want my selected selectbox to become visible based on which one I select. My html code is
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
And my php code so far is
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
}
else if ($selection == 2) {
}
else {
}
}
?>
so my question is what would the javascript look like inside of the if/else statement to make the selectboxes visible?

Why not do it client side using javascript?
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections" id="ddlSelections" onChange="changeSelect()"> <!-- call function on change -->
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" id="ddlTickets"> <!-- visible by default -->
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select name="ddlSales" style="display:none" id="ddlSales">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>
javascript
<script>
function changeSelect()
{
document.getElementById('ddlTickets').style.display = "none";
document.getElementById('ddlProjects').style.display = "none";
document.getElementById('ddlSales').style.display = "none";
switch(document.getElementById('ddlSelections').value) // Get selected one
{
case "1":
document.getElementById('ddlTickets').style.display = "block";
break;
case "2":
document.getElementById('ddlProjects').style.display = "block";
break;
case "3":
document.getElementById('ddlSales').style.display = "block";
break;
}
}
</script>
If you must use PHP
<form name="frmIndex" action="index.php" method="post">
<?php
if(isset($_POST["btnSubmit"]))
{
$selection = $_POST["ddlSelections"];
if ($selection == 1) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" selected>Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlTickets" style="display:none">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
*/
}
else if ($selection == 2) {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" selected>Projects</option>
<option value="3">Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlProjects" style="display:none" id="ddlProjects">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
*/
}
else {
/* echo these
<select name="ddlSelections" id="ddlSelections" >
<option value="1" >Tickets</option>
<option value="2" >Projects</option>
<option value="3" selected>Sales</option>
</select> <input type="submit" value="Select" name="btnSubmit"/><br/>
<select name="ddlSales" style="display:none">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
*/
}
}
?>
<input type="submit" style="display:none" value="Submit" name="btnChoose" />
</form>

A slightly shorter example using jQuery's .change() which is more unobtrusive than the on* attributes like onclick, onchange, etc.
replace all the style="display:none" with a class="subDDL" and then simply style with .subDDL{display: none;}. I did leave one style="display:initial" for the default option.
then add an id to your sublists that correspond to the values in ddlSelections
now you only need one submit button
$("[name='ddlSelections']").change(function(){
$(".subDDL").hide();
$('#' + $("[name='ddlSelections'] option:selected").val()).show();
});
.subDDL{
display: none;
}
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<form name="frmIndex" action="index.php" method="post">
<select name="ddlSelections">
<option value="1">Tickets</option>
<option value="2">Projects</option>
<option value="3">Sales</option>
</select>
<select id="1" name="ddlTickets" class="subDDL" style="display:initial">
<option value="1">Open Tickets</option>
<option value="2">Waiting for Client</option>
<option value="3">Overdue</option>
<option value="4">Average Age</option>
</select>
<select id="2" name="ddlProjects" class="subDDL">
<option value="1">Ready to Bill</option>
<option value="2">Over Budget</option>
<option value="3">Overdue</option>
<option value="4">Assigned per PM</option>
</select>
<select id="3" name="ddlSales" class="subDDL">
<option value="1">Leads last 7/30/90</option>
<option value="2">Open</option>
<option value="3">Expected Value (30 days)</option>
<option value="4">Overdue</option>
</select>
<input type="submit" value="Submit" name="btnChoose" />
</form>

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

Categories