I'm a beginner with javascript, and I'm (with permission) building a website to host the stories of an amateur author I like. I'm trying to add a pair of drop down boxes at the top of the screen that can adjust text size and font family for the chapter. The drop downs are there and I've placed a div container around the chapter text, but the font isn't changing. Here's the applicable code:
Font: <select name='fontface' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontFamily = this.options[this.selectedIndex].value;">
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select name='fontsize' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontSize = this.options[this.selectedIndex].value;">
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
I've added " div id='fluidtext' " further down the page where the chapter starts, and " /div " at the end of the chapter. There's no inline code in the story chapters except occasional bold and italic tags. The page is formatted using an external CSS style sheet.
The complete page (minus the CSS formatting) can be found here:
https://dl.dropboxusercontent.com/u/59191190/tower02.html
Any help would be appreciated!
I am going to write you the cleanest answer:
CodePen solution
The reason why I have added 'onkeyup' is due to FireFox not firing 'onchange' when cycling through with keyboard navigation.
Also, I have used an auto executing lambda function to ensure that we do not pollute the window object with our fluff variables.
Edit: For anyone who does not want the CodePen solution
HTML
Font:
<select id="fontface" name='fontface'>
<option value='Helvetica'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select id="fontsize" name='fontsize'>
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
<p id="fluidtext">
This is my fluid text
</p>
JS
(function() {
//Assuming document is ready
function onFontFaceChange() {
if(fluidTextNode) fluidTextNode.style.fontFamily = this.options[this.selectedIndex].value;
}
function onFontSizeChange() {
if(fluidTextNode) fluidTextNode.style.fontSize = this.options[this.selectedIndex].value;
}
var fontFaceNode = document.getElementById('fontface'),
fontSizeNode = document.getElementById('fontsize'),
fluidTextNode = document.getElementById('fluidtext');
if(fontFaceNode) fontFaceNode.onkeyup = fontFaceNode.onchange = onFontFaceChange;
if(fontSizeNode) fontSizeNode.onkeyup = fontSizeNode.onchange = onFontSizeChange;
}());
You're trying to call getItem function which is not defined.
You need to declare it:
<script>
var getItem = function(item) {
return document.getElementById(item);
};
</script>
Also try to avoid handling events in DOM attributes. I'd suggest the complete code look like this:
<script>
var getItem = function(item) {
return document.getElementById(item);
};
getItem('fontface').addEventListener('change', function() {
var ftxt = getItem('fluidtext');
if(ftxt)
ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});
getItem('fontsize').addEventListener('change', function() {
var ftxt = getItem('fluidtext');
if(ftxt)
ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
</script>
Font:
<select id="fontface" name='fontface'>
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select id="fontsize" name='fontsize'>
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
One thing worth mentioning is that addEventListener isn't cross browser. I'd suggest using jQuery and on method instead of addEventListener. Then the whole JS could look like this:
<script>
(function( $ ) {
$(document).ready(function() {
$('#fontface').on('change', function() {
var ftxt = $('#fluidtext');
if(ftxt)
ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});
$('#fontsize').on('change', function() {
var ftxt = $('#fluidtext');
if(ftxt)
ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
});
})(jQuery);
</script>
Add this to your page in order to define the missing getItem function:
<script>
function getItem(a) { return document.getElementById(a); }
</script>
Related
I have a example code here:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to swap se1 and se2 . Here is my code i tried:
function swap() {
var sel1 = $("#se1 option:selected").text();
var sel2 = $("#se2 option:selected").text();;
console.log(sel1, sel2)
$("#se1").val(sel2);
$("#se2").val(sel1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
It's work but it require Jquery 1.2.3 but i want to use Jquery 2.1.3. If i change script url to "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" but it isn't work
Thanks for help!
You shouldn't be swapping the values or the text of the two selected items in the lists. You just need to swap which item is selected in each list. Once that is done, that option will have whatever value the list has set up for it.
The version of JQuery you use here doesn't matter since what you are doing requires JQuery operations that have been in JQuery since the beginning.
var sel1 = $("#se1");
var sel2 = $("#se2");
function swap() {
let selection1 = sel1[0].selectedIndex; // Store the first list's selection
sel1[0].selectedIndex = sel2[0].selectedIndex;
sel2[0].selectedIndex = selection1;
// Test
console.log(sel1.val(), sel2.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select id="se1">
<option value="1">DOG</option>
<option value="2">CAT</option>
<option value="3">BIRD</option>
</select>
<button onclick="swap()">SWAP</button>
<select id="se2">
<option value="4">DOG</option>
<option value="5">CAT</option>
<option value="6">BIRD</option>
</select>
I want to get the information below the first <option> tag, I want to use jQuery/Cheerio to extract the information and transform the end result into a dictionary. It would ideally look like this
const info = {
'5.5':12773,
'6':12774,
}
And it goes on till the end.
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Well, if you want to do all of this in jQuery, you can simply get all of the options of a select element with the jQuery selector ($('#attributesize-size_uswomen option')) and then perform a for loop ($.each) over it and fill your object easily.
So your final code should be something like this:
var opts = $('#attributesize-size_uswomen option:not(:first)');
var info = {};
$.each(opts, function(index, opt) {
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
NOTE: Since the opt itself in the loop will be a regular object to use the jQuery functions over it you need to make a jQuery object with $() operand otherwise you can use it as regular NODE object and get its properties with javascript built-in properties like text, textContent or value.
UPDATE
Since you receive an error in the implementation with cheerio which does not support :first pseudo-selector, so you can select all of the options then exclude the first one in the object creation.
var opts = $('#attributesize-size_uswomen option');
var info = {};
$.each(opts, function(index, opt) {
if (index != 0)
info[$(opt).text()] = parseInt($(opt).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Or if you want to keep up with the supported Cheerio approach you use this one:
var info = {};
$('#attributesize-size_uswomen').children().slice(1).each(function() {
info[$(this).text()] = parseInt($(this).val())
});
console.log(info);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
<option>Choose Your Size</option>
<option value="12773" source="16004">5.5</option>
<option value="12774" source="16006">6</option>
<option value="12775" source="16008">6.5</option>
<option value="14805" source="16010">7</option>
<option value="14809" source="16012">7.5</option>
<option value="12749" source="16014">8</option>
<option value="14816" source="16016">8.5</option>
<option value="14820" source="16018">9</option>
<option value="14824" source="16020">9.5</option>
<option value="15175" source="16022">10</option>
<option value="15178" source="16024">10.5</option>
<option value="15184" source="16028">11.5</option>
<option value="15187" source="16030">12</option>
</select>
Achieved using $("select option:not(:first)").each
CodePen
I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.
I'm a rookie when it comes to Javascript.
First thanks for all of your answers.
Please follow under codes.
I made like this.
This is crawler htmls one section.
<select data-js="career-select" data-group-id="stats">
<option value="0x02E00000FFFFFFFF" option-id="ALL HEROES">ALL HEROES</option>
<option value="0x02E0000000000002" option-id="Reaper">Reaper</option>
<option value="0x02E0000000000003" option-id="Tracer">Tracer</option>
<option value="0x02E0000000000004" option-id="Mercy">Mercy</option>
<option value="0x02E0000000000005" option-id="Hanzo">Hanzo</option>
<option value="0x02E0000000000006" option-id="Torbjörn">Torbjörn</option>
<option value="0x02E0000000000007" option-id="Reinhardt">Reinhardt</option>
<option value="0x02E0000000000008" option-id="Pharah">Pharah</option>
<option value="0x02E0000000000009" option-id="Winston">Winston</option>
<option value="0x02E000000000000A" option-id="Widowmaker">Widowmaker</option>
<option value="0x02E0000000000015" option-id="Bastion">Bastion</option>
<option value="0x02E0000000000016" option-id="Symmetra">Symmetra</option>
<option value="0x02E0000000000020" option-id="Zenyatta">Zenyatta</option>
<option value="0x02E0000000000029" option-id="Genji">Genji</option>
<option value="0x02E0000000000040" option-id="Roadhog">Roadhog</option>
<option value="0x02E0000000000042" option-id="McCree">McCree</option>
<option value="0x02E0000000000065" option-id="Junkrat">Junkrat</option>
<option value="0x02E0000000000068" option-id="Zarya">Zarya</option>
<option value="0x02E000000000006E" option-id="Soldier: 76">Soldier: 76</option>
<option value="0x02E0000000000079" option-id="Lúcio">Lúcio</option>
<option value="0x02E000000000007A" option-id="D.Va">D.Va</option>
<option value="0x02E00000000000DD" option-id="Mei">Mei</option>
<option value="0x02E000000000012E" option-id="Sombra">Sombra</option>
<option value="0x02E000000000013B" option-id="Ana">Ana</option>
</select>
This is server side jQuery part.
var quick_data = $(`#quickplay select[data-group-id="stats"]`);
quick_data.each(function() {
var test= $(this).find("option").attr('value');
console.log('test : ' + test);
})
I tried and got values(like '0x230000000fffffffffff') but if I use server side jQuery send like this
test : 0x02E00000FFFFFFFF
Just 1.. just one!!
Why this just works one?
Thank you for read my foolish code and English
Thank you and Regards
Why this just works one?
Because there's only one select, so your each callback is called only once, and it grabs the value of the first option within it (because that's how attr, val, prop, and such work when you use them as getters*).
If you want each value, you can loop through the options:
$(`#quickplay select[data-group-id="stats"] option`).each(function(){
console.log('test : ' + this.value);
});
Example:
$(`#quickplay select[data-group-id="stats"] option`).each(function() {
console.log('test : ' + this.value);
});
<div id="quickplay"><select data-js="career-select" data-group-id="stats">
<option value="0x02E00000FFFFFFFF" option-id="ALL HEROES">ALL HEROES</option>
<option value="0x02E0000000000002" option-id="Reaper">Reaper</option>
<option value="0x02E0000000000003" option-id="Tracer">Tracer</option>
<option value="0x02E0000000000004" option-id="Mercy">Mercy</option>
<option value="0x02E0000000000005" option-id="Hanzo">Hanzo</option>
<option value="0x02E0000000000006" option-id="Torbjörn">Torbjörn</option>
<option value="0x02E0000000000007" option-id="Reinhardt">Reinhardt</option>
<option value="0x02E0000000000008" option-id="Pharah">Pharah</option>
<option value="0x02E0000000000009" option-id="Winston">Winston</option>
<option value="0x02E000000000000A" option-id="Widowmaker">Widowmaker</option>
<option value="0x02E0000000000015" option-id="Bastion">Bastion</option>
<option value="0x02E0000000000016" option-id="Symmetra">Symmetra</option>
<option value="0x02E0000000000020" option-id="Zenyatta">Zenyatta</option>
<option value="0x02E0000000000029" option-id="Genji">Genji</option>
<option value="0x02E0000000000040" option-id="Roadhog">Roadhog</option>
<option value="0x02E0000000000042" option-id="McCree">McCree</option>
<option value="0x02E0000000000065" option-id="Junkrat">Junkrat</option>
<option value="0x02E0000000000068" option-id="Zarya">Zarya</option>
<option value="0x02E000000000006E" option-id="Soldier: 76">Soldier: 76</option>
<option value="0x02E0000000000079" option-id="Lúcio">Lúcio</option>
<option value="0x02E000000000007A" option-id="D.Va">D.Va</option>
<option value="0x02E00000000000DD" option-id="Mei">Mei</option>
<option value="0x02E000000000012E" option-id="Sombra">Sombra</option>
<option value="0x02E000000000013B" option-id="Ana">Ana</option>
</select></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
* jQuery is set-based. In your original code, $(this).find("option") returned a set of option elements (all of them), but when you use a getter on the set, it only gets from the first element in the set. (In contrast, jQuery's setters update all elements in the set; the API is assymmetrical.) There's one exception to this: text, when used as a getter, gets the text of all of the elements in the set. (I have no idea why it's different from all the others.)
it looks like your jQuery foreach has the wrong selector. You're doing foreach on the select, not the options with in the select. Try this
var quick_data = $(`#quickplay select[data-group-id="stats"] > option`);
$(`#quickplay select[data-group-id='stats'] option`)
This will grab all options under id quickplay where select has the attribute data-group-id stats.
vs.
$(`#quickplay select[data-group-id='stats']`)
This will grab all selects under #quickplay (with the data-group-id being stats).
Then you add:
.each(function() {
console.log($(this).find("option").attr("value"));
});
And, now, we're iterating through all of our selects and printing the first
option. When you use functions like .attr() on multiple elements,
it will take the value from only the first one. It does not return an array.
$(`#quickplay select[data-group-id='stats'] option`).each(function(){
var test= $(this).attr('value');
console.log('test : ' + test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quickplay">
<select data-js="career-select" data-group-id="stats">
<option value="0x02E00000FFFFFFFF" option-id="ALL HEROES">ALL HEROES</option>
<option value="0x02E0000000000002" option-id="Reaper">Reaper</option>
<option value="0x02E0000000000003" option-id="Tracer">Tracer</option>
<option value="0x02E0000000000004" option-id="Mercy">Mercy</option>
<option value="0x02E0000000000005" option-id="Hanzo">Hanzo</option>
<option value="0x02E0000000000006" option-id="Torbjörn">Torbjörn</option>
<option value="0x02E0000000000007" option-id="Reinhardt">Reinhardt</option>
<option value="0x02E0000000000008" option-id="Pharah">Pharah</option>
<option value="0x02E0000000000009" option-id="Winston">Winston</option>
<option value="0x02E000000000000A" option-id="Widowmaker">Widowmaker</option>
<option value="0x02E0000000000015" option-id="Bastion">Bastion</option>
<option value="0x02E0000000000016" option-id="Symmetra">Symmetra</option>
<option value="0x02E0000000000020" option-id="Zenyatta">Zenyatta</option>
<option value="0x02E0000000000029" option-id="Genji">Genji</option>
<option value="0x02E0000000000040" option-id="Roadhog">Roadhog</option>
<option value="0x02E0000000000042" option-id="McCree">McCree</option>
<option value="0x02E0000000000065" option-id="Junkrat">Junkrat</option>
<option value="0x02E0000000000068" option-id="Zarya">Zarya</option>
<option value="0x02E000000000006E" option-id="Soldier: 76">Soldier: 76</option>
<option value="0x02E0000000000079" option-id="Lúcio">Lúcio</option>
<option value="0x02E000000000007A" option-id="D.Va">D.Va</option>
<option value="0x02E00000000000DD" option-id="Mei">Mei</option>
<option value="0x02E000000000012E" option-id="Sombra">Sombra</option>
<option value="0x02E000000000013B" option-id="Ana">Ana</option>
</select>
</div>
As the title says, I'm wondering if there's a way to change the value of html items that are generated by jquery. Here's the code that I currently have:
the javascript
<script type="text/javascript">
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
$(".row:first").clone(true).insertAfter(".row:last");
$('#dateDueMonth['+i+']').val(curentMonth + 1);
})
});
</script>
My thought here was that after the row was cloned, I could then change the dropdowns content based upon it's current name, but obviously that's not working, and I've been unable to find a way to "hook" into dynamic html content.
and the base html
<select id="months" name="months">
<option selected 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>
</select>
</td><div id="showRows"><div class="row" id="row[]"><td class="td_alt"><select id="dateDueMonth[]" name="dateDueMonth[]" >
<option value="0">Select</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option selected value="8">Aug</option>
<option value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select id="dateDueYear[]" name="dateDueYear[]">
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option selected value="2011">2011</option>
</select>
Now the generation of dynamic html and form submission works great. Gives me the data that I can use for my back end code. However having it so that I can increment the values in the various dropdowns as I see fit would make data entry by the folks using this page a whole lot easier, hence the issue.
To all that reply, thanks for your help with this jquery/JS noob.
EDIT: For this what I want to have is a form that can spawm multiples copies of the first line encased within the showRows div. When this is submitted, I want it to be able to collect that information in arrays for each select/input statement for the rows that are generated. For example if I selected two months, dateDueMonth, dateDueYear, and amount would be arrays in my form that would have two entries each. The current code does this, but by default it has the default elements for the dropdown menus set the same as the row of HTML that it is cloning.
Not sure what you want to do, but it should work like this
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
var arr;
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++)
arr=[$(".row:first").clone(true).insertAfter(".row:last")];
$('#dateDueMonth['+i+']').val(curentMonth + 1); //don't know why its here
arr[0].text("your value"); //apply the index you wanna change
})
});
Are you trying to achieve this kind of markup? Demo
<div id="showRows"><div class="row" id="row[0]"><select id="dateDueMonth[0]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[0]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
</div><div class="row" id="row[1]"><select id="dateDueMonth[1]" name="dateDueMonth[0]">
<option value="0">Select</option>
...
</select>
<select id="dateDueYear[1]" name="dateDueYear[0]">
<option value="2005">2005</option>
...
</select>
...
This may be what you need. See my demo linked above.
for (var i = 1; i <= this.selectedIndex; i++) {
row = $(".row:first").clone(true)[0];
row.id = "row["+i+"]";
$(row).find("[id^='dateDueMonth']").attr("id","dateDueMonth["+i+"]").val((curentMonth + i) % 12 + 1);
$(row).find("[id^='dateDueYear']").attr("id","dateDueYear["+i+"]");
$(row).insertAfter(".row:last");
}
you cannot use ids as array in JavaScript. if you want, you have to put array index as well when you create element. or else just access the select element as bellow
$(document).ready(function() {
$('#months').change(function() {
var currentDate = new Date();
var curentMonth = currentDate.getMonth();
var curentYear = currentDate.getYear();
$(".row:not(:first)").remove();
for (var i = 0; i < this.selectedIndex; i++) {
$(".row:first").clone(true).insertAfter(".row:last");
$('.row:last select').val(curentMonth + 1);
}
})
});
Working sample