Develop Reference

jQuery set and trigger option value based on the input

i am using https://www.geodata.solutions/ for getting country,state,city list
And everything is working fine and i am able to save the data to databse
<select name="country" class="countries" id="countryId">
<option value="">Select Country</option>
</select>
<select name="state" class="states" id="stateId">
<option value="">Select State</option>
</select>
<select name="city" class="cities" id="cityId">
<option value="">Select City</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//geodata.solutions/includes/countrystatecity.js"></script>
Now i have to show the user to selected option
if $country , $state, $city are the details i fetched from the data base
so i change the html to following
<select name="country" class="countries" id="countryId">
<?php if($country!==""){?>
<option value="<?php echo $country; ?>" selected><?php echo $country; ?></option>
<?php } else { ?>
<option value="">Select Country</option>
<?php } ?>
</select>
<select name="state" class="states" id="stateId">
<?php if($state!==""){?>
<option value="<?php echo $state; ?>" selected><?php echo $state; ?>
</option>
<?php } else { ?>
<option value="">Select State</option>
<?php } ?>
</select>
<select name="city" class="cities" id="cityId">
<?php if($city!==""){?>
<option value="<?php echo $city; ?>" selected><?php echo $city; ?>
</option>
<?php } else { ?>
<option value="">Select City</option>
<?php } ?>
</select>
But Now the this is they are not ablue to change the dropdown . How can i solve this
i tried this also
<script>
jQuery(function($){
<?php if($country!==""){?>
var mySelect=$("#countryId");
mySelect.append(
$('<option value="<?php echo $country;?>" selected><?php echo
$country;?></option>'));
$('#countryId').trigger('change');
<?php } ?>
});
</script>
2) Question
I am checking for something that can integrate the country flag with the phone number field and i found https://intl-tel-input.com/. But now i have to select the country phone code automatically as per user change the country dropdown list in the fist select box . If there is any way we can make these each related ?

On change trigger id imported with ajax

I have a small script, I did not made it, I want to modify it but Im stuck.
There are two select options, state and city. When state is selected ajax is bringing the specific cities for that state.
I have default value both for state and city but I cant trigger the city to change.
Here is the javascript
$("#state_id").change(function() {
$.ajax({
url: "<?php echo base_url() . "ajaxreq/getcity/"; ?>" + $("#state_id").val(),
success: function(result) {
$("#ajaxcity").html(result);
}
});
});
$('#state_id').trigger('change');
This is html part:
<div class="logininputfield">
<label><?php echo $this->lang->line('region') ?><span>*</span></label>
<div class="inputfieldsection">
<select name="state_id" id="state_id">
<option value=""><?= $this->lang->line("please_select"); ?> </option>
<?php foreach ($state as $key => $state_name) { ?>
<option value="<?php echo $key; ?>" <?php if ($state_id == $key ) { ?> selected <?php } ?> ><?php echo $state_name; ?></option>
<?php } ?>
</select>
<span for="state_id" class="error"></span>
</div>
</div>
<div class="logininputfield">
<label><?php echo $this->lang->line('city') ?><span>*</span></label>
<div class="inputfieldsection">
<span id="ajaxcity">
<select name="city" id="city" class="input span6">
<option value=""><?php echo $this->lang->line('please_select'); ?></option>
</select>
</span>
<span for="city" class="error"></span>
</div>
</div>
The result is this:
<div class="inputfieldsection">
<span id="ajaxcity"> <select name="city_id" id="city_id" class="valid">
<option value="102">München</option>
<option value="103">Nürnberg</option>
<option value="104">Augsburg</option>
<option value="105">Regensburg</option>
<option value="106">Ingolstadt</option>
<option value="107">Würzburg</option>
<option value="108">Fürth</option>
<option value="109">Erlangen</option>
<option value="110">Bayreuth</option>
<option value="111">Bamberg</option>
<option value="112">Aschaffenburg</option>
<option value="113">Landshut</option>
<option value="114">Kempten (Allgäu)</option>
<option value="115">Rosenheim</option>
<option value="116">Neu-Ulm</option>
<option value="117">Schweinfurt</option>
<option value="118">Passau</option>
<option value="119">Freising</option>
<option value="120">Dachau</option>
<option value="121">Straubing</option>
<option value="122">Hof</option>
<option value="123">Memmingen</option>
<option value="124">Kaufbeuren</option>
<option value="125">Weiden in der Oberpfalz</option>
<option value="126">Amberg</option>
<option value="127">Coburg</option>
<option value="128">Ansbach</option>
<option value="129">Schwabach</option>
<option value="130">Germering</option>
<option value="131">Neumarkt in der Oberpfalz</option>
<option value="132">Erding</option>
<option value="133">Fürstenfeldbruck</option>
<option value="134">Deggendorf</option>
<option value="135">Forchheim</option>
<option value="136">Friedberg</option>
<option value="137">Neuburg an der Donau</option>
<option value="138">Landsberg am Lech</option>
<option value="139">Schwandorf</option>
<option value="140">Königsbrunn</option>
<option value="141">Unterschleißheim</option>
<option value="142">Kulmbach</option>
<option value="143">Olching</option>
<option value="144">Garmisch-Partenkirchen</option>
<option value="145">Lauf an der Pegnitz</option>
<option value="146">Zirndorf</option>
<option value="147">Lindau</option>
<option value="148">Pfaffenhofen an der Ilm</option>
<option value="149">Roth</option>
<option value="150">Geretsried</option>
<option value="151">Unterhaching</option>
<option value="152">Herzogenaurach</option>
<option value="153">Starnberg</option>
<option value="154">Waldkraiburg</option>
<option value="155">Vaterstetten</option>
<option value="156">Senden</option>
<option value="157">Weilheim in Oberbayern</option>
<option value="158">Sonthofen</option>
<option value="159">Neusäß</option>
<option value="160">Gersthofen</option>
<option value="161">Bad Kissingen</option>
<option value="162">Ottobrunn</option>
<option value="163">Aichach</option>
<option value="164">Puchheim</option>
<option value="165">Kitzingen</option>
<option value="166">Traunreut</option>
<option value="167">Gauting</option>
<option value="168">Lichtenfels</option>
</select><span for="city_id" class="error"></span>
</span>
<span for="city" class="error"></span>
</div>
I'm a noob with javascript.
I added myself the trigger part and it works but I dont know how to make it work for the city.
It would be something like this but is it doesnt work.
$('#city_id').val(<? echo $city_id; ?>).trigger('change');
Thank you in advance.

This was the answer i was looking for
<?php foreach ($city as $key => $city_name) { ?>
<option value="<?php echo $key; ?>" <?php if($city_id == $key) {?> selected <?php } ?> ><?php echo $city_name; ?></option>
<?php } ?>

How to sum with javascript if data form while()?

I have this code
<script>
function select(val, item)
{
var prize = $(".prize"+item).val();
var prize = prize*val;
$(".dollar"+item).html(prize);
//----- THIS CODE ERROR --------//
$sub_total=$(".dollar1").val()+$(".dollar2").val()+$(".dollar3").val()+..... etc;
$(".total").html($sub_total);
// ---------------------------- //
}
</script>
<input type="hidden" value="140" class="prize1">
<select class="quantity" id="quant2" value="1" onchange="select(this.value, 1)"> src="1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar1" value="140">140</span>
<br>
<input type="hidden" class="prize2" value="150">
<select class="quantity" id="quant2" value="2" onchange="select(this.value, 2)"> src="2">
<option value="1">1</option>
<option value="2" selected>2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar2" value="300">300</span>
...... etc
<br><br>
<label> TOTAL </label> : <span class="total">?????</span>
How to make a total element , can compute all amounts on the price? How if I after onchange select, then on dollar1 dollar2 dollar3 ... etc will
summed , because I use while() on this script.
What should I do in this script ?
$sub_total=dollar1+dollar2+dollar3+..... etc;
$(".total").html($sub_total);
IF this php code
<?php
while($loll = $resultu->fetch_array(MYSQLI_BOTH)){
$id_item= $loll['id_item'];
$prize=$loll['prize'];
<input type="hidden" value="<?php echo $prize ?>" class="prize<?php echo $id_item ?> ">
<select class="quantity" value="<?php echo $id_item ?>" onchange="select(this.value, <?php echo $id_item ?>)"> src="<?php echo $id_item ?>">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
prize : <span class="dollar<?php echo $id_item ?>" value="<?php echo $prize ?>"><?php echo $prize ?></span>
<br>
}
...... etc
<br><br>
<label> TOTAL </label> : <span class="total">?????</span>
How i can summed $sub_total= ALL --> $(".dollar<?php echo $id_item ?>")?

Here is a simple jQuery example that will run a sum calculation when the user changes the select elements:
HTML
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="select2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="result" type="text"/>
JavaScript
$(document).ready(function () {
$('#select1, #select2').change(function () {
var num1 = Number($('#select1').val());
var num2 = Number($('#select2').val());
var sum = num1 + num2;
$('#result').val("$" + sum);
});
});

Enabling/ disabling “select” if text input is empty or not

I am trying to disable a <select> depending on if text input is empty or not.
What I need is on page load is for the select to be enabled because the text inputs are empty, but once a date is entered to disable the select.
This is what I've got so far:
<ul>
<li><label for="from_date">From Date:</label> <input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="to_date">To Date:</label> <input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="older_than">Or Older Than:</label>
<select name="older_than" id="older_than" class="input_tbl">
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>
And the JavaScript:
$(document).ready(function() {
$(".item_form_date").change(function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','disabled');
}
});
});

It will work better the way you want it with keyup:
$(document).ready(function() {
$(".item_form_date").on("keyup change", function() {
var checker = $.trim($(this).val()).length === 0;
$("#older_than").attr('disabled', !checker);
});
});
Oh, and if you want the select element disabled or not when you load the page, depending on whether the input's are populated or not, you can check that with your PHP:
<ul>
<li>
<label for="from_date">From Date:</label>
<input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="to_date">To Date:</label>
<input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="older_than">Or Older Than:</label>
<!-- this code -->
<?php $disable = (trim($_POST['from_date']) == "" && trim($_POST['to_date']) == "") ? "" : " disabled"; ?>
<select name="older_than" id="older_than" class="input_tbl"<?php echo $disable; ?>><!-- end of new feauture -->
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>

If you want it to update as the user types, you need to use the input event.
http://jsfiddle.net/rfujjge6/1/
$(document).ready(function() {
$(".item_form_date").on('input',function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','');
}
});
});

display hidden div after form submit

I have a user drop down menu in my form code where user can select their option to process their request. The div ids ranges from fa1 to fa8.By default I am showing fa1 and fa2 in my form and fa3 to fa8 are set to display: none. I have added a button to add remove additional drop down menu depends upon user requirement( which will display\hide fa3 to fa8)
I am able to keep the user selected options after form submit using
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
The issue I am facing here is if user added a addiotnal div (say fa3), selected drop down option and submit the form, the hidden div not displaying after submit (eventhough it keeping its drop down as user selected)
I would like to show the hidden div(if user added) as well along with the selected option after form submit
My html code:
<div class="block-no-height">
<div class="sub_headings"> Select Your FA director and Port</div>
<div class="wrap-quest-resp" id="fa1">
<div class="input-quest-no-height">FA and port - 1</div>
<div class="input-resp-no-height">
<select id="fa-select-1" name="fa-select-1">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-1']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-1']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-1']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-1']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-1']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-1']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-1']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-1']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-1']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-1']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-1']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-1']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-1']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-1']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-1']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-1" name="proc-select-1">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-1']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-1']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-1']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-1']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-1" name="port-select-1">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-1']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-1']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa2">
<div class="input-quest-no-height">FA and port - 2</div>
<div class="input-resp-no-height">
<select id="fa-select-2" name="fa-select-2">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-2']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-2']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-2']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-2']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-2']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-2']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-2']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-2']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-2']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-2']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-2']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-2']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-2']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-2']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-2']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-2" name="proc-select-2">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-2']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-2']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-2']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-2']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-2" name="port-select-2">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-2']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-2']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa3" style="display:none;" disabled="true">
<div class="input-quest-no-height">FA and port - 3</div>
<div class="input-resp-no-height">
<select id="fa-select-3" name="fa-select-3">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-3']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-3']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-3']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-3']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-3']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-3']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-3']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-3']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-3']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-3']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-3']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-3']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-3']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-3']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-3']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-3" name="proc-select-3">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-3']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-3']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-3']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-3']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-3" name="port-select-3">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-3']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-3']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa4" style="display:none;" >
<div class="input-quest-no-height">FA and port - 4</div>
<div class="input-resp-no-height">
<select id="fa-select-4" name="fa-select-4">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-4']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-4']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-4']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-4']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-4']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-4']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-4']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-4']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-4']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-4']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-4']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-4']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-4']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-4']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-4']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-4" name="proc-select-4">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-4']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-4']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-4']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-4']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-4" name="port-select-4">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-4']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-4']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa5" style="display:none;" >
<div class="input-quest-no-height">FA and port - 5</div>
<div class="input-resp-no-height">
<select id="fa-select-5" name="fa-select-5">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-5']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-5']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-5']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-5']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-5']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-5']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-5']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-5']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-5']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-5']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-5']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-5']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-5']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-5']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-5']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-5" name="proc-select-5">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-5']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-5']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-5']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-5']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-5" name="port-select-5">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-5']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-5']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa6" style="display:none;" >
<div class="input-quest-no-height">FA and port - 6</div>
<div class="input-resp-no-height">
<select id="fa-select-6" name="fa-select-6">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-6']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-6']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-6']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-6']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-6']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-6']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-6']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-6']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-6']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-6']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-6']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-6']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-6']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-6']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-6']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-6" name="proc-select-6">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-6']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-6']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-6']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-6']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-6" name="port-select-6">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-6']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-6']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa7" style="display:none;" >
<div class="input-quest-no-height">FA and port - 7</div>
<div class="input-resp-no-height">
<select id="fa-select-7" name="fa-select-7">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-7']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-7']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-7']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-7']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-7']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-7']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-7']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-7']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-7']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-7']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-7']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-7']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-7']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-7']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-7']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-7" name="proc-select-7">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-7']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-7']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-7']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-7']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-7" name="port-select-7">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-7']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-7']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="wrap-quest-resp" id="fa8" style="display:none;" >
<div class="input-quest-no-height">FA and port - 8</div>
<div class="input-resp-no-height">
<select id="fa-select-8" name="fa-select-8">
<option disabled="disabled" SELECTED >Dir</option>
<option <?php if ($_POST['fa-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
<option <?php if ($_POST['fa-select-8']==2) {echo "selected='selected'"; } ?> >2</option>
<option <?php if ($_POST['fa-select-8']==3) {echo "selected='selected'"; } ?> >3</option>
<option <?php if ($_POST['fa-select-8']==4) {echo "selected='selected'"; } ?> >4</option>
<option <?php if ($_POST['fa-select-8']==5) {echo "selected='selected'"; } ?> >5</option>
<option <?php if ($_POST['fa-select-8']==6) {echo "selected='selected'"; } ?> >6</option>
<option <?php if ($_POST['fa-select-8']==7) {echo "selected='selected'"; } ?> >7</option>
<option <?php if ($_POST['fa-select-8']==8) {echo "selected='selected'"; } ?> >8</option>
<option <?php if ($_POST['fa-select-8']==9) {echo "selected='selected'"; } ?> >9</option>
<option <?php if ($_POST['fa-select-8']==10) {echo "selected='selected'"; } ?> >10</option>
<option <?php if ($_POST['fa-select-8']==11) {echo "selected='selected'"; } ?> >11</option>
<option <?php if ($_POST['fa-select-8']==12) {echo "selected='selected'"; } ?> >12</option>
<option <?php if ($_POST['fa-select-8']==13) {echo "selected='selected'"; } ?> >13</option>
<option <?php if ($_POST['fa-select-8']==14) {echo "selected='selected'"; } ?> >14</option>
<option <?php if ($_POST['fa-select-8']==15) {echo "selected='selected'"; } ?> >15</option>
<option <?php if ($_POST['fa-select-8']==16) {echo "selected='selected'"; } ?> >16</option>
</select>
<select id="proc-select-8" name="proc-select-8">
<option disabled="disabled" SELECTED >Proc</option>
<option <?php if ($_POST['proc-select-8']==a) {echo "selected='selected'"; } ?> >a</option>
<option <?php if ($_POST['proc-select-8']==b) {echo "selected='selected'"; } ?> >b</option>
<option <?php if ($_POST['proc-select-8']==c) {echo "selected='selected'"; } ?> >c</option>
<option <?php if ($_POST['proc-select-8']==d) {echo "selected='selected'"; } ?> >d</option>
</select>
<select id="port-select-8" name="port-select-8">
<option disabled="disabled" SELECTED >Port</option>
<option <?php if ($_POST['port-select-8']==0) {echo "selected='selected'"; } ?> >0</option>
<option <?php if ($_POST['port-select-8']==1) {echo "selected='selected'"; } ?> >1</option>
</select>
</div>
</div>
<div class="add_remove_column">
<input type="hidden" id="countfa" name="countfa" value="3" readonly>
<button type="button" onClick="AddNewFa();" id="addfa" > + Add New FA </button>
<button type="button" onClick="RemoveNewFa();" id="removefa" disabled="disabled"> - Remove FA</button>
</div>
</div>
My javascript to add\remove hidden divs(minimum it will show two divs and max 8, I have added to disable add or remove buttons depends upn on its max \min count)
function AddNewFa()
{
var facount = parseInt($('#countfa').val(),9) ;
if( facount < 9)
{
facount = facount+1;
for(i=3;i<9;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==9 )
{ $('#addfa').attr('disabled','disabled');}
if( facount ==4 )
{ $('#removefa').removeAttr("disabled");}
}
//removing fa clicking remove button
function RemoveNewFa()
{
var facount = parseInt($('#countfa').val(),10) ;
if( facount >3)
{
facount = facount-1;
for(i=3;i<10;i++)
{
if( i<facount )
$('#fa'+i).slideDown("fast");
else
$('#fa'+i).slideUp("fast");
}
$('#countfa').val(facount);
}
if( facount ==3 )
{ $('#removefa').attr('disabled','disabled');}
if( facount =8 )
{ $('#addfa').removeAttr("disabled"); }
}