Displaying user Favourites from Local Storage - javascript

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.

Related

how to add selected values from two <select> tag and show sum in third <select>

$(document).ready(function () {
var presentyear = new Date().getFullYear();
for(y = 1995; y <= presentyear; y++)
{
var optn = document.createElement("option");
optn.text = y;
optn.value = y;
document.getElementById('year10').options.add(optn);
}
});
<select id="year10">
<option>select year</option>
//all the values will be dynamically added as called by function in js
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<select id="year12">
<option id="calvalue"> </option>
</select>
I want to save selected values from two select tags and show the sum in a separate third select dropdown.
As in the snippet above, I have three select tags, the javascript code fills the options for 'year10' select from 1995 to 2017.
The 'gap' select have 5 values.
Now, i want to add the selected values of 'year10' and 'gap' and show in the single option (with id='calvalue') in 'year12' select tag.
Also, when i change the values in either first two selects, the summed value in year12 must change with it.
How to do this?
Any help is appreciated
To achieve this you just need to add a change event handler to both of the selects which reads the values and adds them together.
Note that putting the result in another option of a select is a little odd. I'd suggest using a readonly text box instead, something like this:
$(function() {
var presentyear = new Date().getFullYear(), options = '';
for (y = 1995; y <= presentyear; y++) {
options += '<option value="' + y + '">' + y + '</option>';
}
$('#year10').append(options);
$('#year10, #gap').change(function() {
var year = parseInt($('#year10').val(), 10) || 0;
var gap = parseInt($('#gap').val(), 10) || 0;
$('#year12').val(!year ? '' : year + gap);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="year10">
<option>select year</option>
</select>
<select id="gap">
<option value="0">Select Number of Years</option>
<option value="1">1 year</option>
<option value="2">2 years</option>
<option value="3">3 years</option>
<option value="4">4 years</option>
<option value="5">5 years</option>
</select>
<input type="text" readonly="readonly" id="year12">
if you're ok with jquery... then
<select id="num1" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="num2" onchange="addThem()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="res">
<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>
</select>
<script>
function addThem(){
var num1 = $("#num1").val();
var num2 = $("#num2").val();
$("#res").val(Number(num1) +Number(num2));
}
</script>
this Plunker sample i did should help you out
function jsFunction(){
var myselect = document.getElementById("selectOpt");
$("#secondselectbox").val(myselect);
}
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="secondselectbox">
</select>
In this code After value selection you can do any new function(another select tag).
You will have to work on the specifics your self, but this should get you started.
let nextOption = {first: 1, seccond: 1}
function selected(selector, option) {
if (selector === 'first') {
nextOption.first = parseInt(option.value);
}
else if (selector === 'seccond') {
nextOption.seccond = parseInt(option.value);
}
let newOption = document.createElement("option");
newOption.text = nextOption.first + nextOption.seccond;
document.getElementById('final').add(newOption);
}
selected();
<select onClick="selected('first', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select onClick="selected('seccond', this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="final">
</select>

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

How to use option from a drop down list many times

i wonder if there's a way to use option from select tag for many drop down list. My html looks like :
<div id="backGround0"></div>
<div id="dropspot0"></div>
<p class="ziua0">LUNI<br/>
<select id="zile0">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</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 id="luniAn0">
<option value="Ianuarie">Ianuarie</option>
<option value="Februarie">Februarie</option>
<option value="Martie">Martie</option>
<option value="Aprilie">Aprilie</option>
<option value="Mai">Mai</option>
<option value="Iunie">Iunie</option>
<option value="Iulie">Iulie</option>
<option value="August">August</option>
<option value="Septembrie">Septembrie</option>
<option value="Octombrie">Octombrie</option>
<option value="Noiembrie">Noiembrie</option>
<option value="Decembrie">Decembrie</option>
</select>
</p>
And i want to add exactly the same values from above into these select tags:
<div id="backGround1"></div>
<div id="dropspot1"></div>
<p class="ziua1">MARTI<br/>
<select id="zile1">
</select>
<select id="luniAn1">
</select>
</p>
I have tried like this:
function dropDownLists(){
var zileOptions = $.map($('#zile0 option'), function(e) { return e.value; });
var luniAnOptions = $.map($('#luniAn option'), function(e) { return e.value; });
for(var i = 1; i < 7; i++){
zileToAdd = document.getElementById("zile" + i);
luniToAdd = document.getElementById("luniAn" + i);
zileToAdd.append("<option>" + zileOptions + "</option>");
luniToAdd .append("<option>" + luniAnOptions + "</option>");
}
}
Where i tried to take value of first select tag and add in another. But,i couldnt get option value,name or something else for Months...and neither
zileToAdd.append("<option>" + zileOptions + "</option>");
doesnt work :( That for shall add these two drop down lists 6 more times for select tags like id="zile" + i (for days) and id="luniAn" + i for second drop down list (months).
You can try html() function
$('#zile1').html($('#zile0').html());
$('#luniAn1').html($('#luniAn0').html());
Please check this demo
demo: http://jsfiddle.net/8LcVv/
var zile0 = $('#zile0').html();
$('#zile1').html(zile0);
var luniAn0 = $('#luniAn0').html();
$('#luniAn1').html(luniAn0);
you can also use html-defining javascript-variables:
var options = '<option value="01">01</option>' +
'<option value="02">02</option>' +
'<option value="03">03</option>';
$('#zile1').append(options);
$('#luniAn1').append(options);
something like this should work also.
you can add the select block in one file; And include them where ever needed. This link may help you.
Include same header and footer in multiple html files
The benefit of using this technique is it allows you add same code in different pages.

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" />

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/

Categories