jQuery disable other dropdown values based on selected value of other dropdown

jQuery disable other dropdown values based on selected value of other dropdown - javascript

I have in my website 3 dropdowns and every dropdown has 8 options (1 to 8).
My goal is to disable the dropdown options based on what you've already selected in the other dropdowns, the total sum is maximum 8. So for example if you select 4 in the first dropdown you can only select 1 to 4 in the other 2 dropdowns.
If you select 8 in the first you can't select anything else from the others.
This is what I've tried:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});
The problem with this is that it only work the first time you select something, unfortunately.
EDIT: jsfiddle update https://jsfiddle.net/k7krx87L/4/
Thanks in advance!

You would use the following selector:
$("#input_1_6 option:gt(4)").prop("disabled", true);
This means disable all options in element with id #input_1_6 starting from 5th, the selector gt(4) means elements from index 4, indexes start from 0 in DOM.

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script>
$(function () {
$('#input_1_5').on('change', function (){
var input_1_5 = $(this).val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_6').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $(this).val();
var input_1_7 = $('#input_1_7').val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
$('#input_1_7').on('change', function (){
var input_1_5 = $('#input_1_5').val();
var input_1_6 = $('#input_1_6').val();
var input_1_7 = $(this).val();
var cur_val;
cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
for(i=1;i<=8;i++)
{
if((i+parseInt(cur_val))<=8)
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
}
else
{
$('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
$('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
}
}
});
});
</script>
<select name="" id="input_1_5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_6">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_7">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</body>
</html>
Hope this will help you.

Try this, it will work perfectly.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<select name="project_manager[]">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="test_engineer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

Related

Disable multiple values in dropdowns based on another dropdown

I want disable multiple values in the second and third dropdown based on first dropdown selected values.I am able to do this for single selected value.But,How to do this for multiple selected values.
I have 3 drop downs and all are multi select drop downs.
My code is,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
}
});
});
</script>
</head>
<body>
<select name="project_manager[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

if (selectedItem) {
$(selectedItem).each(function(v,i) {
$dropdown2.find('option[value="' + i + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + i + '"]').prop('disabled', true);
});

how to generate dynamic web page through ajax

<font style="color:#03C">Select PF Office State</font>
<select name="state" id="state" onchange="generate_table();">
<option value="select" >-- Select a State --</option>
<!--<option value="AN">ANDAMAN AND NICOBAR ISLANDS</option>-->
<option value="WB">ANDAMAN AND NICOBAR ISLANDS</option>
<option value="AP">ANDHRA PRADESH</option>
<!--<option value="AR">ARUNACHAL PRADESH</option>-->
<option value="AS">ARUNACHAL PRADESH</option>
<option value="AS">ASSAM</option>
<option value="BH">BIHAR</option>
<!--<option value="CH">CHANDIGARH</option>-->
<option value="PB">CHANDIGARH</option>
<option value="CG">CHATTISGARH</option>
<option value="DN">DADRA AND NAGAR HAVELI</option>
<option value="DD">DAMAN AND DIU</option>
<option value="DL">DELHI</option>
<option value="GA">GOA</option>
<option value="GJ">GUJARAT</option>
<option value="HR">HARYANA</option>
<option value="HP">HIMACHAL PRADESH</option>
<option value="JK">JAMMU AND KASHMIR</option>
<option value="JR">JHARKHAND</option>
<option value="KN">KARNATAKA</option>
<option value="KL">KERALA</option>
<!--<option value="LD">LAKSHADWEEP</option>-->
<!--<option value="WB">LAKSHADWEEP</option>-->
<option value="TN">LAKSHADWEEP</option>
<option value="MP">MADHYA PRADESH</option>
<option value="MH">MAHARASHTRA</option>
<!--<option value="MN">MANIPUR</option>
<option value="MG">MEGHALAYA</option>
<option value="MZ">MIZORAM</option>
<option value="NL">NAGALAND</option>-->
<option value="AS">MANIPUR</option>
<option value="AS">MEGHALAYA</option>
<option value="AS">MIZORAM</option>
<option value="AS">NAGALAND</option>
<option value="OR">ORISSA</option>
<!--<option value="PN">PONDICHERRY</option>-->
<option value="TN">PONDICHERRY</option>
<option value="PB">PUNJAB</option>
<option value="RJ">RAJASTHAN</option>
<!--<option value="SK">SIKKIM</option>-->
<option value="AS">SIKKIM</option>
<option value="TN">TAMIL NADU</option>
<option value="TS">TELANGANA</option>
<option value="AS">TRIPURA</option>
<option value="UP">UTTAR PRADESH</option>
<option value="UC">UTTARAKHAND</option>
<option value="WB">WEST BENGAL</option>
</select>
</p>
</div>
<br/>
<br/>
<div id="myDiv">
</div>
<script type="text/javascript">
function generate_table()
{
if(document.getElementById('state').value == "Select")
{
alert('Please select a state');
return;
}
var state = document.getElementById('state').value;
document.getElementById("myDiv").innerHTML = '<img src = "http://epfoservices.in/epfo/member_balance/images/preloader_bill.gif" style = "padding-bottom:600px; padding-left:300px;">';
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new
ActiveXObject("Microsoft.XMLHTTP");
}
if(XMLHttpRequestObject)
{
var url="http://epfoservices.in/epfo/member_balance/table.php?state="+state ;
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
document.getElementById("myDiv").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
function MM_win5() { //v2.0
//return eval(jsStr)
var w = 650; // set the width of pop-up
var h = 500; // set the height of pop-up
var l = Math.floor((screen.width-w)/7);
var t = Math.floor((screen.height-h)/2);
//window.open(jsStr+"?identifier="+str,"pop","width=" + w + ",height=" + h + ",top=" + t + ",left=" + l);
window.open("office_list.php", "pop", 'width=650,height=500,scrollbars=yes, top=' + t + ',left=' + l);
}
</script>
table not loading from http://epfoservices.in/epfo/member_balance/table.php?state= but image loading please help anyone table.php? state code In two digits letter
and the list of offices i want loan by adding state code to tablephp file
manually i can get results by placing state code to that php url
example: http://epfoservices.in/epfo/member_balance/table.php?state=up

3 dropdowns limit total to 8 via jQuery

I have 3 dropdowns every dropdown has 8 options. Now my goal is to limit the combined value of these 3 dropdowns to 8. So for example if you pick 7 in the first you can only select 1 in the next two if you select 1 in the second you can't select anything in the third.
I am trying to achieve my goal by disabling certain options, but there is a flaw in my logic. I can't change my selected option once I've selected one because I've disabled the options. Anyone knows how I can fix this problem?
Thanks in advance.
Here is a jsfiddle as example of my code:
https://jsfiddle.net/k7krx87L/4/
My jQuery code:
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function() {
$(this).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function() {
$(this).attr("disabled", true);
});
});

You need to have a variable check to see which items to be enabled like
var $selects = $(".options select").change(function() {
var sum = 0;
$selects.each(function() {
sum += +this.value;
});
var rem = 9 - sum;
$selects.each(function() {
var max = +this.value + rem;
$(this).find('option').prop('disabled', function() {
return +this.value > max;
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
<select name="" id="input_1_5">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_6">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<select name="" id="input_1_7">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>

In your code you have to take ele from loop and it will work
$(".options select").change(function() {
var value1 = $("#input_1_5").val();
var value2 = $("#input_1_6").val();
var value3 = $("#input_1_7").val();
var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
var rest = 9-sum;
$("#input_1_6 > option").slice(rest,9).each(function(index, ele) {
$(ele).attr("disabled", true);
});
var rest2 = rest - 9
$("#input_1_7 > option").slice(rest2,9).each(function(index, ele) {
$(ele).attr("disabled", true);
});
});

how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?

i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?

I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

you can use normal js to achieve this.Use this following code on day_list_‌1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_‌1").selectedIndex].disabled = true;

Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..

Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>

First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.

It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>

Javascript add textfield button doesn't work properly

I have made the following code
HTML:
<form method="post" id="myemailform" name="myemailform" action="form-to-email.php">
<div id="form_container">
<label class="description" for="pax">Number:</label>
<div>
<select class="select small" id="pax" name="pax">
<option value="" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">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>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
</select>
</div>
<label class="description">ID:</label>
<input type='text' id="idpl" class="id-text-len" name='ids1' placeholder="ID #1">
<input class="btn btn-primary" type='button' id='btnMore' value='Add Ids'>
</form>
js:
jQuery(function ($) {
$('#btnMore').click(function () {
var form, fields, newField;
var e = document.getElementById("pax");
var strUser = e.options[e.selectedIndex].text;
form = $("#myemailform");
for (var i = 1; i < strUser; i++) {
fields = form.find("input[name^='ids']");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.insertAfter(fields.last());
}
});
});
You can see the jsfiddle .
What i want is when i click on the button to add fields, not add more on the existing but new.
I mean e.g. first time i click 10 and then add, as a results i'll get 10 textfields. Then if i click 14 i don't want to get 10+14=24 textfields but 4 more, i want 14textfields.
I haven't made it up to do that. Please someone help me by code, in general i know why that's happening but i don't know how to solve that.

Try
jQuery(function($) {
var form = $("#myemailform");;
$('#btnMore').click(function() {
var fields, newField;
var opt = parseInt($('#pax').val());
var len = opt - $('.id-text-len').length;
if(len> 0){
for (var i = 0; i < len; i++) {
fields = form.find(".id-text-len");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.val('');
newField.insertAfter(fields.last());
}
} else {
form.find(".id-text-len:gt("+ (opt - 1) +")").remove()
}
});
});
Demo: Fiddle

how about this
http://jsfiddle.net/7QUea/3/
i think this is the one you need
just one more line
$("input[name^='ids']").not("input[name='ids1']").remove();
jQuery(function($) {
$('#btnMore').click(function() {
$("input[name^='ids']").not("input[name='ids1']").remove();
var form, fields, newField;
var e = document.getElementById("pax");
var strUser = e.options[e.selectedIndex].text;
form = $("#myemailform");
for (var i = 1; i < strUser; i++) {
fields = form.find("input[name^='ids']");
newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1));
newField.attr('placeholder', 'ID #' + (fields.length + 1));
newField.insertAfter(fields.last());}
});
});

Changed a few things (now it is more jQuery styled):
jQuery(function ($) {
$('#btnMore').click(function () {
var strUser = $("#pax").val();
var form = $("#myemailform");
var fields = form.find("input[name^='ids']");
for (var i = 0; i < (strUser - fields.length); i++) {
var newField = $(fields[0]).clone();
newField.attr('name', 'ids' + (fields.length + 1 + i));
newField.attr('placeholder', 'ID #' + (fields.length + 1 + i));
form.find("input[name^='ids']").last().after(newField);
}
});
});
Check here: http://jsfiddle.net/7QUea/4/

We Keep Coding

JavaScript is the programming language of the Web.

jQuery disable other dropdown values based on selected value of other dropdown - javascript

You would use the following selector: $("#input_1_6 option:gt(4)").prop("disabled", true); This means disable all options in element with id #input_1_6 starting from 5th, the selector gt(4) means elements from index 4, indexes start from 0 in DOM.

Related

Disable multiple values in dropdowns based on another dropdown

how to generate dynamic web page through ajax

3 dropdowns limit total to 8 via jQuery

how to disable dropdown options based on the previously selected dropdown values in multi select dropdown?

Javascript add textfield button doesn't work properly

Categories

Resources