I don't know how to figure out my problem. I have three selectors (dropdown) and when the sum of these three lists is greater than 300, there should show a div with a checkbox. It's for my form when a customer want order more than 300 products he can get something for free.
I can get the sum of these lists in a input but the value of this input is not showing so i CAN'T use this to show the div:
//this is not working
Event.observe('total', 'keyup', function () {
if ($$('#total]')[0].value > 299){
$$('#show300')[0].show();
}
else{
$$('#show300')[0].hide();
}
});
<div class="input-group-inzerat"><select name="Produkt 1" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 2" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<div class="input-group-inzerat"><select name="Produkt 3" class="custom-select1" id="sum"><option selected value="0">Množstvo</option><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option><option value="60">60</option><option value="70">70</option><option value="80">80</option><option value="90">90</option><option value="100">100</option><option value="150">150</option><option value="200">200</option><option value="300">300</option></select></div>
<input type="text" name="total" id="total" style="display: block" />
<div class="form-check" id="show300" ><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku "Logo zdarma"</label></div>
Can somebody help me? Please :)
There are multiple select with same id. id need to be unique. So you can use class.
Create two functions one which will add event change to each of this select , so whenever select changes that function will trigger and in another function with every change of select get the value from each of the select element and do the summation of those values to show/hide the div
const showDiv = document.getElementById('show300');
const elem = document.querySelectorAll('.custom-select1');
calculateTotal = () => {
let total = 0;
elem.forEach((item) => {
total += parseInt(item.value, 10);
});
total > 300 ? showDiv.classList.add('show') : showDiv.classList.remove('show')
}
elem.forEach((item) => {
item.addEventListener('change', calculateTotal)
})
.hide {
display: none;
}
.show {
display: block;
}
<div class="input-group-inzerat">
<select name="Produkt 1" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<div class="input-group-inzerat">
<select name="Produkt 2" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<div class="input-group-inzerat">
<select name="Produkt 3" class="custom-select1">
<option selected value="0">Množstvo</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="300">300</option>
</select>
</div>
<input type="text" name="total" id="total" style="display: block" />
<div class="form-check hide" id="show300"><input name="Logo" class="form-check-input" type="checkbox" value="Ano" id="formCheck-1" style="font-size: 30px;" /><label class="form-check-label" for="formCheck-1">Áno chcem využiť ponuku "Logo zdarma"</label></div>
Related
I used bootstrap multiselect js plugin, after i used in my code, I need to add one click event for each options i select so i bind the click event for that What happened is when i try to click the select option the function execute 2 times. (It supposed to execute only 1 time)
I want to know whats happening in my code, Can anyone explain me ?
My code HTML:
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
My code JS:
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.ms-options ul li').each(function(index){
$(this).attr('data-item-index',index);
$(this).attr('onclick','selectToggleItem(this)');
// $(this).bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
If i click the list item it call the function (selectToggleItem) 2 times Why ???
i used bootstrap-multiselect.js and css file for this.
You meet this problem when you click on the label because the event is triggered by both input and label tags. If you click on the checkbox, the selectToggleItem is triggered only once.
To prevent that behaviour, you can bind the event to the checkbox instead of the <li> tag.
$(document).ready(function() {
$('.course-list').multiselect();
$('.select-box').each(function(){
$(this).find('.multiselect-container li').each(function(index){
$(this).attr('data-item-index',index);
$(this).find("input[type=checkbox]").bind('click', selectToggleItem);
});
});
});
function selectToggleItem(e){
console.log('test');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<div class="select-box">
<select id="demo1" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo2" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
<div class="select-box">
<select id="demo3" multiple class="form-control course-list">
<option value="Javascript">Javascript</option>
<option value="Python">Python</option>
<option value="LISP">LISP</option>
<option value="C++">C++</option>
<option value="jQuery">jQuery</option>
<option value="Ruby">Ruby</option>
</select>
</div>
Following is my HTML code for a form. This form contains some country fields that are multiple dropdown select inputs.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="\images\trademark_icon.png" type="image/gif" sizes="16x16">
</head>
<style>
<!--Blah Blah -->
</style>
<body>
<h2 ><img src="images/hero_logo.png" class="herologo" ><span class="form-title">Trademark Filing Application</span></h2><br>
<div>
<p style="padding-left:20px"><span class="error">* required field.</span></p>
<form action="insert.php" method="post" enctype="multipart/form-data">
<!-- Department -->
<b>Select Department:</b><span class="error"> *</span>
<select id="dept" name="department" required>
<option value="">Please Select...</option>
<option value="ceo">CEO Office</option>
<option value="global">Global</option>
<option value="marketing">Marketing</option>
<option value="parts">Parts</option>
</select>
<br><br><br>
<!-- Class -->
<b>Select Class:</b><span class="error"> *</span><br><br>
<input type="radio" id="wordradio" name="classs" value="Word" required>Word
<input type="radio" id="deviceradio" name="classs" value="Device" style="margin-left:20px">Device
<input type="radio" id="logoradio" name="classs" value="Logo" style="margin-left:20px">Logo
<input type="radio" id="soundradio" name="classs" value="Sound" style="margin-left:20px">Sound
<input type="radio" id="taglineradio" name="classs" value="Tagline" style="margin-left:20px">Tagline
<br><br><br>
<!-- Preferences -->
<b>Enter Preference(s):</b><br>
1. <input type="text" id="pref1" name="preference1" style="width:30%" placeholder="Preference 1" required>
<input type="file" id="prefbtn1" name="files[]" multiple="" required>
<span class="error">*</span>
<br>
2. <input type="text" id="pref2" name="preference2" style="width:30%" placeholder="Preference 2">
<input type="file" id="prefbtn2" name="files[]" multiple="" >
<br>
3. <input type="text" id="pref3" name="preference3" style="width:30%" placeholder="Preference 3">
<input type="file" id="prefbtn3" name="files[]" multiple="" >
<br>
4. <input type="text" id="pref4" name="preference4" style="width:30%" placeholder="Preference 4">
<input type="file" id="prefbtn4" name="files[]" multiple="" >
<br>
5. <input type="text" id="pref5" name="preference5" style="width:30%" placeholder="Preference 5">
<input type="file" id="prefbtn5" name="files[]" multiple="" >
<br><br><br>
<!-- Goods and Services -->
<b>Enter The Types of Goods & Services :</b><span class="error"> *</span>
<br>
<input type="text" id="goodss" name="goodsnservice" placeholder="Select the type of Goods and Services" required>
<br><br><br>
<!-- Mark in Use? -->
<b>Is Mark In Use?</b><span class="error"> *</span><br><br>
<input type="radio" id="marky" name="mark" value="yes" onclick="disableNo()" required>Yes
<!-- Mark in Use?: YES -->
<div id="markyes" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Did You Use It?</b>
<input type="date" name="yeswhen" style="margin-left:10px" id="markyesdate" required><span class="error"> *</span><br><br>
<b>Where Did You Use It?</b><span class="error"> *</span><br>
<select name="yescountry[]" style="width:20%" id="markyescountry" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<b>Proof Of First Use:</b><span class="error"> *</span><br>
<input type="file" id="markyesproof" name="files[]" value="Upload one or more files" multiple="" required>
</div><br>
<!-- Mark in Use?: NO -->
<input type="radio" name="mark" value="no" onclick="disableYes()" >No<br>
<div id="markno" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Are You Expected To Use It?</b>
<input type="date" name="nowhen" style="margin-left:10px" id="marknodate" required><span class="error"> *</span><br><br>
<b>Where will You Use It?</b><span class="error"> *</span><br>
<select name="nocountry[]" style="width:20%" id="marknocountry" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
</div><br>
<!-- Mark Applied Country -->
<b style="text-height:50%">Mark Applied Country:</b><br>
<select name="markappliedcountry" id="multi-country" class="dropdown-country" style="width:20%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<br><br><br>
<input type="text" id="selected_values" name="multiple_selected_values" disabled/><br/><br/>
<input type="submit" value="Submit">
</form>
</div>
<script>
function disableNo() {
document.getElementById("marknocountry").required = false;
document.getElementById("marknodate").required = false;
}
function disableYes() {
document.getElementById("markyescountry").required = false;
document.getElementById("markyesdate").required = false;
document.getElementById("markyesproof").required = false;
}
var selText;
$('select').on('change', function() {
selText ="";
$("#multi-country").each(function () {
var $this = $(this);
if(selText !=""){
selText = selText.concat(",");
selText = selText.concat($this.text());
}
else
selText=$this.text();
});
//alert(selText);
document.getElementById("selected_values").value=selText;
});
</script>
</body>
</html>
I was trying to use it first on Applied Country(the one at the last), so that if it worked, I would replicate it to other fields too. Also, is there any way that I can reuse the same dropdown list for three different select inputs?
I think that should do the job:
<select name="markappliedcountry" id="multi-country" class="dropdown-country" style="width:20%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<input type="text" id="selected_values" name="multiple_selected_values" disabled/>
JS:
$(document).ready(function() {
$('select').on('change', function() {
$('input').val($(this).val());
});
});
JSFiddle example
So, after 29 days after asking this question and trying many alternatives, I finally found the answer:
This is my Html file:
<!DOCTYPE html>
<html>
<head>
<title>Trademark Filing Application</title>
<link rel="icon" href="\images\trademark_icon.png" type="image/gif" sizes="16x16">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h2 ><img src="images/hero_logo.png" class="herologo" ><span class="form-title">Trademark Filing Application</span></h2><br>
<div>
<p style="padding-left:20px"><span class="error">* required field.</span></p>
<form action="insert.php" method="post" enctype="multipart/form-data">
<!-- Department -->
<b>Select Department:</b><span class="error"> *</span>
<select id="dept" name="department" required>
<option value="">Please Select...</option>
<option value="CEO Office">CEO Office</option>
<option value="Global">Global</option>
<option value="Marketing">Marketing</option>
<option value="Parts">Parts</option>
</select>
<br><br><br>
<!-- Class -->
<b>Select Class:</b><span class="error"> *</span><br><br>
<input type="radio" id="wordradio" name="classs" value="Word" required>Word
<input type="radio" id="deviceradio" name="classs" value="Device" style="margin-left:20px">Device
<input type="radio" id="logoradio" name="classs" value="Logo" style="margin-left:20px">Logo
<input type="radio" id="soundradio" name="classs" value="Sound" style="margin-left:20px">Sound
<input type="radio" id="taglineradio" name="classs" value="Tagline" style="margin-left:20px">Tagline
<br><br><br>
<!-- Preferences -->
<b>Enter Preference(s):</b><br>
1. <input type="text" id="pref1" name="preference1" style="width:30%" placeholder="Preference 1" required>
<input type="file" id="prefbtn1" name="image" multiple="" required>
<span class="error">*</span>
<br>
2. <input type="text" id="pref2" name="preference2" style="width:30%" placeholder="Preference 2">
<input type="file" id="prefbtn2" name="preferTwo[]" multiple="" >
<br>
3. <input type="text" id="pref3" name="preference3" style="width:30%" placeholder="Preference 3">
<input type="file" id="prefbtn3" name="preferThree[]" multiple="" >
<br>
4. <input type="text" id="pref4" name="preference4" style="width:30%" placeholder="Preference 4">
<input type="file" id="prefbtn4" name="preferFour[]" multiple="" >
<br>
5. <input type="text" id="pref5" name="preference5" style="width:30%" placeholder="Preference 5">
<input type="file" id="prefbtn5" name="preferFive[]" multiple="" >
<br><br><br>
<!-- Goods and Services -->
<b>Enter The Types of Goods & Services :</b><span class="error"> *</span>
<br>
<input type="text" id="goodss" name="goodsnservice" placeholder="Select the type of Goods and Services" required>
<br><br><br>
<!-- Mark in Use? -->
<b>Is Mark In Use?</b><span class="error"> *</span><br><br>
<input type="radio" id="marky" name="mark" value="yes" onclick="disableNo()" required>Yes
<!-- Mark in Use?: YES -->
<div id="markyes" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Did You Use It?</b>
<input type="date" name="yeswhen" style="margin-left:10px" id="markyesdate" required><span class="error"> *</span><br><br>
<b>Where Did You Use It?</b><span class="error"> *</span><br>
<input type="text" style="height:10px;width:50%" id="selected_yes" name="yes_country_values" disabled /> <br/>
<select name="yescountry" id="yescountry" style="width:40%" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
<b>Proof Of First Use:</b><span class="error"> *</span><br>
<input type="file" id="markyesproof" name="yesProof[]" value="Upload proof" multiple="" required>
</div><br>
<!-- Mark in Use?: NO -->
<input type="radio" name="mark" value="no" onclick="disableYes()" >No<br>
<div id="markno" class="show-hide" style="background-color:white;width:600px ;margin-left:40px; border:1px solid black; border-radius:5px"><br>
<b>When Are You Expected To Use It?</b>
<input type="date" name="nowhen" style="margin-left:10px" id="marknodate" required><span class="error"> *</span><br><br>
<b>Where will You Use It?</b><span class="error"> *</span><br>
<input type="text" style="height:10px;width:50%" id="selected_no" name="no_country_values" disabled /><br/>
<select name="marknocountry" id="nocountry" style="width:40%" multiple required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bonaire">Bonaire</option>
<option value="Bosnia & Herzegovina">Bosnia & Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Ter">British Indian Ocean Ter</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Canary Islands">Canary Islands</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chad">Chad</option>
<option value="Channel Islands">Channel Islands</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Island">Cocos Island</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cote D'Ivoire">Cote D'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Curacao">Curacao</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Ter">French Southern Ter</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Great Britain">Great Britain</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Hawaii">Hawaii</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Korea North">Korea North</option>
<option value="Korea Sout">Korea South</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Laos">Laos</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Midway Islands">Midway Islands</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Nambia">Nambia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherland Antilles">Netherland Antilles</option>
<option value="Netherlands (Holland, Europe)">Netherlands (Holland, Europe)</option>
<option value="Nevis">Nevis</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau Island">Palau Island</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn Island">Pitcairn Island</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Republic of Montenegro">Republic of Montenegro</option>
<option value="Republic of Serbia">Republic of Serbia</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="St Barthelemy">St Barthelemy</option>
<option value="St Eustatius">St Eustatius</option>
<option value="St Helena">St Helena</option>
<option value="St Kitts-Nevis">St Kitts-Nevis</option>
<option value="St Lucia">St Lucia</option>
<option value="St Maarten">St Maarten</option>
<option value="St Pierre & Miquelon">St Pierre & Miquelon</option>
<option value="St Vincent & Grenadines">St Vincent & Grenadines</option>
<option value="Saipan">Saipan</option>
<option value="Samoa">Samoa</option>
<option value="Samoa American">Samoa American</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome & Principe">Sao Tome & Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="Spain">Spain</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syria</option>
<option value="Tahiti">Tahiti</option>
<option value="Taiwan">Taiwan</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad & Tobago">Trinidad & Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks & Caicos Is">Turks & Caicos Is</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States of America">United States of America</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Vatican City State">Vatican City State</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Vietnam</option>
<option value="Virgin Islands (Brit)">Virgin Islands (Brit)</option>
<option value="Virgin Islands (USA)">Virgin Islands (USA)</option>
<option value="Wake Island">Wake Island</option>
<option value="Wallis & Futana Is">Wallis & Futana Is</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br><br>
</div><br>
<!-- Mark Applied Country -->
<b style="text-height:50%">Mark Applied Country:</b><br>
<input type="text" style="height:10px;width:50%" id="selected_applied" name="applied_selected_values" value="selected_applied" disabled /> <br/>
<select name="markappliedcountry" id="appliedcountry" style="width:40%" multiple >
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua">Antigua & Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Yemen">Yemen</option>
<option value="Zaire">Zaire</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select><br/><br/>
<input type="submit" value="Submit">
</form>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#yescountry').on('change', function() {
$('#selected_yes').val($(this).val());
});
$('#nocountry').on('change', function() {
$('#selected_no').val($(this).val());
});
$('#appliedcountry').on('change', function() {
$('#selected_applied').val($(this).val());
});
});
</script>
<script>
function disableNo() {
document.getElementById("nocountry").required = false;
document.getElementById("marknodate").required = false;
}
function disableYes() {
document.getElementById("yescountry").required = false;
document.getElementById("markyesdate").required = false;
document.getElementById("markyesproof").required = false;
}
</script>
</body>
</html>
I have shortened the select options due to the shortage of character limit. But, one out of the three select menus has all the options. So, you can copy those if you want to.
I need to add new option in the select dropdown with jquery. For example I need to add: "--" in all three dropdown's after this: <option value="">-</option>. My code is:
<dd class="birth">
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>
</dd>
$('#idofselect').find('option:nth-child(1)').after('<option>--</option>')
$('#idofselect') -> Id of the select you want to add the option. If you want to add on all three you can use class that is common on
all three (added sample for class)
.find('option:nth-child(1)') -> look for the first option within the selected select
.after() -> Description: Insert content, specified by the
parameter, after each element in the set of matched elements.
$('.select').find('option:nth-child(1)').after('<option>--</option>')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="options_6054_day" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][day]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
</select>
<select id="options_6054_month" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][month]">
<option value="">-</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="options_6054_year" class="product-custom-option datetime-picker validation-passed select" onchange="opConfig.reloadPrice()" style="width: auto;" title="" name="options[6054][year]">
<option value="">-</option>
<option value="2016">2016</option>
</select>
If you want to add option after first option then I think this will help.
$("select option").eq(0).after("<option>--</option")
Try this
$("select option").each(function(){
if(this.index == 0){
$(this).after("<option>--</option")
}
})
You can use this code:
$(function() {
$('.product-custom-option').find('option:nth-child(1)').after($('<option></option>').attr("value", '--').text('--'));
})
DEMO
'option:nth-child(1)' will select the first option child of select.
.after() will add whatever you write in it after the selected element.
.attr() will allow you to set the attributes of option.
.text() will allow you to add text to option field.
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");
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