var vehicleLineDD = document.getElementById("vehicleLineDD");
for (i = 0; i < arr.length; i++) {
vehicleLineOp.text = arr[i].code + ': ' + arr[i].desc;
vehicleLineOp.value = arr[i].code;
vehicleLineDD.add(vehicleLineOp, null);
}
Hi Friends, here I am attach my code where I have struck now.
Problem is vehicleLineDD is the dynamic drop down. Depends on another drop down I should load the values here.
It is working fine in IE8, but in IE11 all the values are coming properly except vehicleLineDD.add(vehicleLineOp, null);
is not adding the values, only last value alone added. Every time when change the first drop down here I can see only one option.
Could anyone help me to come out from the the problem. Thanks in advance.
You need to create a new option element for the vehicleLineOp variable(using code similar to vehicleLineOp = document.createElement("option");), otherwise you're just constantly updating the same option element with different text and value attributes (which is why only the last applied text and value are showing up).
var vehicleLineOp;
var vehicleLineDD = document.getElementById("vehicleLineDD");
for (i = 0; i < arr.length; i++) {
vehicleLineOp = document.createElement("option");
vehicleLineOp.text = arr[i].code + ': ' + arr[i].desc;
vehicleLineOp.value = arr[i].code;
vehicleLineDD.add(vehicleLineOp);
}
Edit: Here's a working example that should work in both IE11 and IE8:
function populate() {
var arr = document.getElementById("input").value.split("\n");
var vehicleLineOp;
var vehicleLineDD = document.getElementById("vehicleLineDD");
vehicleLineDD.innerHTML = "";
for (var i = 0; i < arr.length; i++) {
vehicleLineOp = document.createElement("option");
vehicleLineOp.text = arr[i];
vehicleLineOp.value = arr[i];
vehicleLineDD.add(vehicleLineOp);
}
}
var btn = document.getElementById("btnPopulate");
if (btn.addEventListener) {
btn.addEventListener("click", populate);
} else {
btn.attachEvent("onclick", populate);
}
Add each choice as a new line in the text area below, thn click "Populate Dropdown":<br/>
<textarea id="input" style="vertical-align:top;height:4em;">Example 1
Example 2
Example 3</textarea>
<input type="button" value="Populate Dropdown" id="btnPopulate" />
<br/>
<select id="vehicleLineDD"></select>
Related
First time posting here. I am trying to make a movie recommender that presents the user with a set of movies to rate on a radio scale of 1-10 with a "No Rating" button if they haven't seen the movie. I have been trying to loop over all of the checked buttons to get their values, but they are all coming up as the value assigned to the first "No Rating" button in the radio input, which is appended to the table before the inner loop executes. Can anyone shed some light on what's going on? I don't have much experience in JS or jQuery and have had my brother helping me along the way. Here is my code:
for (let i = 0; i<keys.length; i++) {
...
let $movieRating = $('<tr class="rating-row">')
...
// Add initial "No Rating" button
let $ratingButton = $('<td>');
$ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-0"
name="rating${i}" value=null><label for="rating${i}-0">No Rating</label>`));
// Add 1-10 buttons
for (let j=1; j <= 10; j++) {
$ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-${j}"
name="rating${i}" value="${j}"><label for="rating${i}-${j}">${j}</label>`));
}
$movieRating.append($ratingButton);
$("table tbody").append($movieRating);
I have the value set to null for the "No Rating" button, and then the 1-10 buttons are supposed to have the value set to the ${j}. I am pulling the values with:
$('.rating-row').each(function(idx, row) {
let $radioButton = $(row).find('input:radio');
if ($radioButton.is(':checked')) {
let radioVal = $radioButton.val();
console.log(radioVal);
}
})
radioVal is always coming up null, no matter what is checked. I hope this is clear. Tips on formatting welcome as well. Thanks a lot!
The issue seems to be with $radioButton.
let $radioButton = $(row).find('input:radio');
It contains not 1 but 11 radio buttons (each rating-row has 11 radio buttons added to it).
They should be iterated using .each() call as follows
let $radioButtons = $(row).find('input:radio');
$radioButtons.each(function (ind, radioButton){
const $radioButton = $(radioButton);
if ($radioButton.is(':checked')) {
let radioVal = $radioButton.val();
console.log(radioVal);
}
})
Here's a working prototype:
let keys = [0, 1, 2];
for (let i = 0; i < keys.length; i++) {
let $movieRating = $('<tr class="rating-row">')
let $ratingButton = $('<td>');
$ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-0"
name="rating${i}" value=null><label for="rating${i}-0">No Rating</label>`));
for (let j = 1; j <= 10; j++) {
$ratingButton.append($(`<input type="radio" class="ratButton" id="rating${i}-${j}"
name="rating${i}" value="${j}"><label for="rating${i}-${j}">${j}</label>`));
}
$movieRating.append($ratingButton);
$("table tbody").append($movieRating);
}
$('#check').on('click', function () {
$('.rating-row').each(function (idx, row) {
let $radioButtons = $(row).find('input:radio');
$radioButtons.each(function (ind, radioButton) {
$radioButton = $(radioButton)
if ($radioButton.is(':checked')) {
let radioName = $radioButton.attr('name');
let radioVal = $radioButton.val();
console.log(radioName + ' = ' + radioVal);
}
})
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
</tbody>
</table>
<button id="check">Check</button>
I created a function which renders a dropdown and a table. This dropdown gives me values which I use inside the function to filter the table. For some reason, it does not update when I reselect something on the dropdown.
No frameworks please thank you!
Here are some screenshots:
It does not update the columns showed because when I console.log() the values from the dropdown it does not update. It still says 1 5 but when I click the second one it should say 2 5.
I selected the second option on the dropdown. I have no idea how to do this. Sorry, I'm a beginner.
//function which we will use to hide and unhide rows
function toggleClass(element, className, toSet) {
element.classList[toSet ? 'add' : 'remove'](className);
}
//The table is already rendered and when the buttons on the screen are clicked, this pagination function is called
function columnPagination(input) {
var table = document.getElementById("tablePrint"),
dataRows = table.getElementsByTagName('tr'),
listHTML = "";
//get date labels for dropdown
var filterDateLabels = [];
var columns = table.getElementsByTagName('th');
for(var ii = 0; ii < columns.length; ii++){
if(ii%input==0){
filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
}
if(ii%input==input-1){
filterDateLabels.push(columns[ii].innerHTML.slice(21,33));
}
}
//display dropdown with values which you will use to filter the table
listHTML += "<select id=\"pagenumber\")>";
for(var ii = 0; ii < filterDateLabels.length; ii++){
listHTML += "<option value = \"" + ii + "\">" + filterDateLabels[ii] + " - ";
if(filterDateLabels[ii+1]!= ""){
listHTML += filterDateLabels[ii+1] + "</option>";
ii++;
}
else{
listHTML+="LAST </select>";
}
}
document.getElementById('dates').innerHTML = listHTML;
var multiplier = document.getElementById('pagenumber').value;
multiplier = multiplier/2;
if(multiplier == 0){
multiplier = 1;
}
//hiding function which works but doesn't update when the dropdown is clicked
input = input*multiplier;
console.log(multiplier, input);
for (var i = 0; i < dataRows.length; i++) {
var cells = dataRows[i].children;
for (var cell = 0; cell < cells.length; cell++) {
toggleClass(cells[cell], 'hide', cell > input)
}
}
}
I ended up just using onchange="myFunction()".
http://www.w3schools.com/jsref/event_onchange.asp
Everything you need is up there if you encounter the same issue as I did. I was having trouble because I was editing the wrong file. #KevinKloet helped me realize that by pointing out another error. Thanks!
I need to change selected files in input:file element with Jquery. Firstly, user select files. There is a file size control in input:file change event. So, if control return false selected file should be removed in file_list. I searched this and try something for 3 - 4 hours. But not achieved still. I hope someone can help me.
Here is my function.
function handleFiles2() {
var names = [];
var newList = [];
var text = '';
var x = 0;
var fsize = 0;
var files = $(".fileUpBasvuru").get(0).files;
for (var i = 0; i < files.length; ++i) {
fsize = parseInt(files[i].size);
if (fsize > 102400) {
newList.push(files.item(i));
names.push(files[i].name);
}
}
$(".fileUpBasvuru").get(0).files = newList;
$(".file_list").html(text);
};
I need to replace the space between the 2 words with a BR tag. I've tried quite a few things, this one I thought would work, but the original script only does it to the first item. :( I need it to replace it on all the menu items.
It's for menu text on a CMS, so I won't know what the text is going to be. All I know is that it will always be no more than 2 words.
I can use either JS or jQuery.
Demo here: JS Bin Link
HTML:
<span class="navtext">Lorem ipsum</span>
<br>
<span class="navtext">Lorem ipsum</span>
<br>
<span class="navtext">Lorem ipsum</span>
JavaScript:
// Doesnt work
// var span = document.getElementsByTagName(".navtext");
// Only works for the first one
var span = document.querySelector(".navtext");
// Doesnt work
// var span = document.querySelectorAll("navtext");
function space() {
var elem = document.createElement("br");
// elem.className = "space";
// elem.textContent = " ";
return elem;
}
function replace(elem) {
for(var i = 0; i < elem.childNodes.length; i++) {
var node = elem.childNodes[i];
if(node.nodeType === 1) {
replace(node);
} else {
var current = node;
var pos;
while(~(pos = current.nodeValue.indexOf(" "))) {
var next = current.splitText(pos + 1);
current.nodeValue = current.nodeValue.slice(0, -1);
current.parentNode.insertBefore(space(), next);
current = next;
i += 2;
}
}
}
}
replace(span);
I think, you dont want to use jQuery. Well, Here is quick solution:
var elms = document.querySelectorAll(".navtext");
for(var i=0; i<elms.length; i++){
elms[i].innerHTML = elms[i].innerHTML.replace(/\s/gi, "<br />");
}
Here is the jsfiddle: http://jsfiddle.net/ashishanexpert/NrTtg/
using jQuery you can do this:
$("span.navtext").each(function(){
$(this).html($(this).text().replace(/ /g,"<br />"));
})
If you install jQuery you can make it all more simple. Follow the installation instructions and then the code you'll need is something like:
jQuery(function($) {
// for each navtext run the described function
$(".navtext").each(function() {
// "this" represents the navtext
// replace all " " with "<br/>" from this's html
var code = $(this).text();
code = code.replace(" ", "<br/>");
// update this's html with the replacement
$(this).html(code);
});
});
Someone on twitter provided me with a fix, which was exactly like what Ashish answered.
var spans = document.getElementsByTagName("span");
for(var i = 0; i < spans.length; i++) {
spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}
But that would quite work for me, but it did give me my answer! So thanks to Pete Williams
This is the code I went with:
var spans = document.querySelectorAll('.navtext');
for(var i = 0; i < spans.length; i++) {
spans[i].innerHTML = spans[i].innerHTML.replace(' ', '<br>');
}
I'm using a simple JS duplicate function to duplicate a div. Inside is form information with radio buttons, including one group called 'getOrRequest'. Each div represents a book and needs to have its own 'getOrRequest' value.
The name needs to be changed in order to make each duplicated group of radio buttons selectable without affecting every other radio button. What is the best way to change these values?
Here is how I'm duplicating the div, in case that is the issue.
var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
bookInfo.appendChild(copyDiv);
I then have tried a couple methods of changing the name value. Like this:
bookInfo.copyDiv.getOrRequest_0.setAttribute("name", "'getOrRequest' + idNumber + '[]'");
bookInfo.copyDiv.getOrRequest_1.setAttribute("name", "'getOrRequest' + idNumber + '[]'");
As well as this:
bookInfo.copyDiv.getOrRequest_0.name = 'getOrRequest' + idNumber + '[]';
bookInfo.copyDiv.getOrRequest_1.name = 'getOrRequest' + idNumber + '[]';
getOrRequest_0 and getOrRequest_1 are the ID's of the input values, but I've tried it a few ways now and nothing seems to work. Thanks in advance!
EDIT: MORE INFO
Here is the specific code I'm using:
function addAnotherPost(){
var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
var size = copyDiv.childNodes.length;
copyDiv.id = 'addListing' + idNumber;
for(var j = 0; j < size; j++){
if(copyDiv.childNodes[j].name === "getOrRequest[]"){
copyDiv.childNodes[j].name = "getOrRequest" + idNumber + "[]";
}
}
bookInfo.appendChild(copyDiv);
idNumber++;
}
And it just doesn't seem to work.. The divs are duplicating, but the name value is not changing.
You can try this - http://jsfiddle.net/ZKHF3/
<div id="bookInformation">
<div id="addListing">
<input type="radio" name="addListing0[]" />
<input type="radio" name="addListing0[]" />
</div>
</div>
<button id="button">Add Listing</button>
<script>
document.getElementById("button").addEventListener("click", AddListing, false);
var i = 1;
var bookInfo = document.getElementById('bookInformation');
function AddListing() {
var copyDiv = document.getElementById('addListing').cloneNode(true);
var size = copyDiv.childNodes.length;
copyDiv.id = "listing" + i;
for ( var j = 0; j < size; j++ ) {
if ( copyDiv.childNodes[j].nodeName.toLowerCase() == 'input' ) {
copyDiv.childNodes[j].name = "addListing" + i + "[]";
}
}
bookInfo.appendChild(copyDiv);
i++;
}
</script>
The trouble is you are looking for child nodes of the div, but the check boxes are not child nodes, they are descendant nodes. The nodes you are looking for are nested within a label. Update your code to look for all descendant inputs using copyDiv.getElementsByTagName("input"):
var idNumber = 0;
function addAnotherPost() {
var bookInfo = document.getElementById('bookInformation');
var copyDiv = document.getElementById('addListing').cloneNode(true);
copyDiv.id = 'addListing' + idNumber;
var inputs = copyDiv.getElementsByTagName("input");
for(var j = 0; j < inputs.length; j++){
if(inputs[j].name === "getOrRequest[]"){
inputs[j].name = "getOrRequest" + idNumber + "[]";
}
}
bookInfo.appendChild(copyDiv);
idNumber++;
}
http://jsfiddle.net/gilly3/U5nsa/