We Keep Coding

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

Displaying user Favourites from Local Storage

so i ran myself into a brick wall this morning. In short, i have created a webpage which reads Properties from a JSON file and lets the user filter through the searches using Type/Price/Bedrooms. I have tried to make a favourite list, however this is where the problem showed up. I can save the property ID into the local storage, however i cannot view that ID or use it to display the property that is linked to that ID.
This is my HTML code:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="staffscript.js"></script>
<body>
<p id="prop1">
This is prop 1 page
<button class="save">Save to Favourites</button>
</p>
<button id="viewFavourites">View Favourites</button>
<div id="placeholder"></div>
<label for="House">House</label>
<input type="radio" id="House" name="type" value="House"/>
<label for="Flat">Flat</label>
<input type="radio" id="Flat" name="type" value="Flat"/>
<label for="Any">Any</label>
<input type="radio" id="Any" name="type" value="Any"/>
<select id="minPrice" name="minPrice">
<option value="0">No Min Price</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="250000">£250,000</option>
</select>
<select id="maxPrice" name="maxPrice">
<option value="99999999999999">No Max Price</option>
<option value="100000">£100,000</option>
<option value="150000">£150,000</option>
<option value="200000">£200,000</option>
<option value="2500000">£250,000</option>
</select>
<select id="minBedrooms" name="minBedrooms">
<option value="0">No Min Bedrooms</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>
</select>
<select id="maxBedrooms" name="maxBedrooms">
<option value="10">No Max Bedrooms</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>
</select>
<select id="TimeAddedMonth" name="TimeAddedMonth">
<option value="Any">Any</option>
<option value="January">January</option>
<option value="February">February</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="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select id="TimeAddedDay" name="TimeAddedDay">
<option value="Any">Any</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>
</select>
<button id="search">Search Staff</button>
</body>
And this is my JS File
$(document).ready(function() {
$("#search").on("click", function(){
$.getJSON('data.json', function(data) {
var Type = $("input:checked").val();
var minPrice = $("#minPrice").val();
var maxPrice = $("#maxPrice").val();
var minBedrooms = $("#minBedrooms").val();
var maxBedrooms = $("#maxBedrooms").val();
var timeAdded = $("#TimeAddedMonth").val();
var timeAddedDay = $("#TimeAddedDay").val();
var output = "<ul>";
for(var i in data.Properties) {
if ((Type == data.Properties[i].type) || ( Type == "Any" )){
if ((data.Properties[i].price >= minPrice) && (data.Properties[i].price <= maxPrice)){
if ((data.Properties[i].bedrooms >= minBedrooms) && (data.Properties[i].bedrooms <= maxBedrooms)){
if ((timeAdded == data.Properties[i].added.month) || ( timeAdded == "Any" )){
if ((timeAddedDay == data.Properties[i].added.day) || ( timeAddedDay == "Any" )){
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
output+="<li>" + data.Properties[i].description + "</li>";
output+='<a href="' + data.Properties[i].url + '" > Full Description... </a>';
document.getElementById("placeholder").innerHTML = output;
}
}
}
}
}
}
output+="</ul>";
});
});
$(".save").on( "click", function() {
try {
$(this).attr('disabled',true);
//restoreArrayData();
var AddingHouses = $(this).closest("p").attr("id");
var myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
if (myFavouriteProperties == null) {
myFavouriteProperties = [];
}
myFavouriteProperties.push(AddingHouses);
localStorage.setItem("favProperties",JSON.stringify(myFavouriteProperties));
}
catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
console.log("Error: Local Storage limit Exceeded");
}
else {
console.log("Error: Saving to Local Storage");
}
}
});
});
$("#viewFavourites").on("click", function() {
console.log("Restoring array data from local storage");
myFavouriteProperties = JSON.parse(localStorage.getItem("favProperties"));
var output = "<ul>";
if(myFavouriteProperties != null) {
for (var i = 0; i < data.Properties.length; i++) {
for (j = 0; j < myFavouriteProperties.length; j++) {
if(data.Properties[i].id == myFavouriteProperties[j])
{
output+="<li>" + data.Properties[i].type + "</li>";
output+='<img src="' + data.Properties[i].picture + '" />';
output+="<li>" + "£" + data.Properties[i].price + "</li>";
}
}
}
}
output+="</ul>";
document.getElementById("placeholder").innerHTML = output;
});
Everything works apart from View Favourites function
NOTE: I can see my FireFox local storage, so it does save the ID in an array. I jus dont understand why its not displaying it

You can access the localStorage object simply with the global var localStorage
Personally I use this snippet when I use it:
// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || {};
// Store your data.
function saveStuff(obj) {
saveData.obj = obj;
// saveData.foo = foo;
saveData.time = new Date().getTime();
localStorage.saveData = JSON.stringify(saveData);
}
// Do something with your data.
function loadStuff() {
return saveData.obj || "default";
}
if (saveData.time) alert("You were here: " + saveData.time);
saveStuff("Stuff");

#dsfq's comment is correct. data is not defined within the #viewFavourites click function. The for loop never runs because there are no items to go over.
Assign data to a variable in the parent scope ($(document).ready() or the like) to access it in other functions.

JS get Maximum Value and Selected Value of Drop Down List

I have a series of Drop down list in my page which has different values like some has values Starting like "NA, 1,2,3 to 100" other has "NA, 1 ,2,3 to 50" and other have different ending value but all are starting with "NA"
i am writing code to find the sum of the values selected and percentage of each value in JS.
The sum I got it the addition of selected values but percentage I am not getting. I want to fetch the maximum value of the selected drop down list.
JS Function
function sum() {
var result = 0;
var sval = 0;
for (var f = 1; f<= 5; f++) {
var sval = document.getElementById('ddlist_'+f).value;
if(!isNaN(sval)) {
var sval = parseFloat(sval);
result = result + sval;
}
}
}
}
window.onload = sum;
Total Value of the Selected List is in Var Result.
I want to find the Maximum value of all list
Example Drop Down list
<option value=NA> NA </option><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><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>
output
<span id="maxtotal " style="color:#06F; font-weight:bold;"></span>
In short, when Drop down list selected, I want to fetch the Selected Value and Last which is Maximum value of the Drop down List.
Thanks you

You can access the options collection of an HTMLSelectElement object like an array.
function sum() {
var $ = function (str) { return document.getElementById(str); },
f, ddlist, sval, mval,
result = 0, maxtotal = 0, percent;
// try 'ddlist1', 'ddlist2', .. and so on
f = 1;
while (ddlist = $('ddlist' + f++)) {
sval = ddlist.options[ddlist.selectedIndex].value;
mval = ddlist.options[ddlist.options.length - 1].value;
if ( !isNaN(sval) && !isNaN(mval) ) {
result += parseFloat(sval);
maxtotal += parseFloat(mval);
}
}
percent = (maxtotal > 0) ? result / maxtotal * 100 : 0;
$('maxtotal').innerHTML = result + ' of ' + maxtotal;
$('totalper').innerHTML = percent.toFixed(2) + ' %';
}

I think this is what you want to acomplish: http://jsfiddle.net/jK5Uq/
There is no trick here, I barely change anything to your code (the original version) but the html part:
<select id='ddlist_1' onchange='sum()'>
<option value=NA> NA </option>
<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>
</select>
<select id='ddlist_2' onchange='sum()'>
<option value=NA> NA </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>
</select>
<select id='ddlist_3' onchange='sum()'>
<option value=NA> NA </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>
</select>
<select id='ddlist_4' onchange='sum()'>
<option value=NA> NA </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>
</select>
<p id="maxtotal" />
<p id="totalper" />

Problem with a days select in javascript

I've a problem with three selects for birth of date (Day,Month,Year) in IE. This is the HTML.
<li><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
<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>
</select>
<select name="dobMonth" id="dobMonth" onchange="getDays();">
<option value="01">Jan</option>
<option value="02">Fev</option>
<option value="03">Mar</option>
<option value="04">Apr</option>
<option value="05">May</option>
<option value="06">Jun</option>
<option value="07">Jul</option>
<option value="08">Aug</option>
<option value="09">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select name="dobYear" id="dobYear" onchange="getDays();">
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
</select>
</li>
and I have a javascript code to count number of days in every month/year
function getDays()
{
var month = document.getElementById("dobMonth").options[document.getElementById("dobMonth").selectedIndex].value;
var year=document.getElementById("dobYear").options[document.getElementById("dobYear").selectedIndex].value;
var daysoutput;
if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12){
var j = 31;
}
else if (month == 4 || month == 6 || month == 9 || month == 11){
var j = 30;
}
else{
if (year%4==0){
j=29;
}
else{
j=28;
}
}
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
}
with FF, this is okay, but in IE instead after selecting a month/year , the days select becomes empty!
and I don't know why? ,but I doubt the problem is with innerHTML.
thank you

The proper way to add options is using the .add() method of the options collection of the drop down element.
Working example:
window.onload = function WindowLoad() {
var dtNow = new Date();
var year = dtNow.getFullYear();
FillDropDownRange("ddlMonth", 1, 12, dtNow.getMonth() + 1);
FillDropDownRange("ddlYear", year - 5, year, year);
FillDays();
};
function FillDropDownRange(oDDL, rangeStart, rangeEnd, nSelectedValue) {
if (typeof oDDL == "string")
oDDL = document.getElementById(oDDL);
while (oDDL.options.length > 0)
oDDL.removeChild(oDDL.options[0]);
for (var i = rangeStart; i <= rangeEnd; i++) {
var option = new Option();
option.text = i + "";
option.value = i + "";
if (typeof nSelectedValue != "undefined" && i == nSelectedValue)
option.selected = "selected";
oDDL.options.add(option);
}
}
function FillDays() {
var month = parseInt(document.getElementById("ddlMonth").value);
var year = parseInt(document.getElementById("ddlYear").value);
var date = new Date();
date.setDate(1);
date.setMonth(month - 1);
date.setFullYear(year);
var daysCount = 0;
while (date.getMonth() == (month - 1)) {
date.setDate(date.getDate() + 1);
daysCount++;
}
FillDropDownRange("ddlDay", 1, daysCount);
}
<select id="ddlDay"></select> /
<select id="ddlMonth" onchange="FillDays();"></select> /
<select id="ddlYear" onchange="FillDays();"></select>
I also gave "safe" way to get the number of days given specific month and year.

Thank you friends , I've solved the problem and it's now okey with IE:
this is the solution:
I changed this line :
<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay"> in the html code to this
to this ;
<span id="days"><label for="dobYear">Date of birth*:</label>
<select name="dobDay" id="dobDay">
as you can see , I've added a container (parent) span to select
then I changed the js code as follows:
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById('dobDay').innerHTML=daysoutput;
becomes :
for (var i=1;i<=j;i++){
daysoutput+='<option value="'+i+'">'+i+'</option>';
}
document.getElementById("days").innerHTML='<label for="dobYear">Date of birth*:</label><select name="dobDay" id="dobDay">'+daysoutput+'</select></label>';
it may appear that IE doesn't apply the innerHTML to a select tag, then I've added a span tag that contains this select , and changed its innerHTML with javascript
thank you

You can not set the innerHTML of a select element with Internet Explorer.
You should be using new Option().
var sel = document.getElementById("mySelect");
sel.options.length = 0; //removes all options
for(var i=0;i<3;i++){
var newOpt = new Option("text" + i, "value" + i);
sel.options[i] = newOpt;
}
You could also use createElement instead of new Option.

I think you should try to case your option value to string or parseInt to compare. It might fixed your problem. For instance:
if(month == 3)
to
if(month == "3")
or
if(parseInt(month) == 3)