Develop Reference

textarea clears when using innerhtml [duplicate]

I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.
If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.
if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
var _row = "<tr id='queue_row_" + items_in_queue + "'>";
_row += "<td>";
_row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
_row += "</td>";
_row += "<td>";
_row += _item;
_row += "</td>";
_row += "</tr>";
document.getElementById("upload_queue").innerHTML += _row;
document.getElementById("upload_image_" + items_in_queue).style.display = "none";
items_in_queue++;
document.getElementById("uploader_holder").innerHTML +=
'<input id="upload_image_' + items_in_queue +
'" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' +
'onchange="add_to_upload_queue()" style="display: inline;" />';
}

Yeah... you're going to want to use appendChild instead of modifying the inner HTML:
var myInput = document.createElement("INPUT");
// do stuff to my input
var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);
That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.

Get selected radio button value from "for loop"

I need a help from you all. In my website, I am generating different colour shades from a selected color. Till here it works fine but after generating different shades, when I select a radio button associated with shades, I get value of first shade no matter how many random radio buttons I select
And the color hex value is coming from array... I want to get the value of selected radio button and store it into html5 localstorage. localstorage works fine if i enter simple text instead of selected radio button value. Please have a look
I am positing my code below:
function makeTableRowColors(colors, displayType)
{
var tableRow = "<tr>";
for (i = 0; i < colors.length; i++)
{
if (displayType == "colors")
{
tableRow += "<td style=\"background-color:" + "#" + colors[i].toString(16) + ";width:85px;height:75px;border-radius:5px;\";><input type='radio' class='ShadeRadioButtons' name='rsSelections' style='position:relative;top:-24px;' value='#"+colors[i].toString(16).toUpperCase()+"'></td>";
}
else
{
tableRow += "<td class=\"rgb-value\">#" + colors[i].toString(16).toUpperCase() + "</td>";
}
}
tableRow += "</tr>";
return tableRow;
}

You didn't post your HTML or the localStorage code you are attempting, but the code should make sure to get the value property, as in:
radButton.value
This code works for me: https://jsfiddle.net/10factxr/1/

Javascript generating content from an array on user search

I'm having issues dynamically creating content from an array of images. What I want to happen is that when keywords are entered into the searchbar (try "joyride" or "nick"), all of the images that match the keywords show up. Currently, only one image shows up, and it doesn't necessarily match the keyword. I think I'm going wrong with the javascript function - I feel like I shouldn't be using innerHTML to create the photos, especially because when the keyword is deleted, it just leaves the one image.
Would it be easier to do it all in jQuery/javascript, instead of generating the initial gallery of images in jQuery and trying to do the filtering in javascript? I'm lost.
http://scf.usc.edu/~uota/itp301/final/odc-photos.html
This is a working version of the page, with the arrays and other code that I am using.
Thanks in advance!
$(document).ready(function(){
for(var i = 0; i < src.length; i++){
var content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
$("#gallery").append(content).hide().fadeIn(250);
}
});
var songSearch = function(keyword){
var foundFlag = false;
var content = "";
for (var i = 0; i < src.length; i++){
if (tags[i].toLowerCase().indexOf(keyword) != -1 || keyword == "") {
content = "<div class='pics' id='imagesection" + i + "'>";
content += "<div class='images'><img class='imagesfiles' height='133px' width='200px' src='" + src[i] + "'></div>";
content += "</div>";
findFlag = true;
}
}
if(findFlag){
document.getElementById("gallery").innerHTML = content;
}
else{
content = "Your search did not return any results.";
}
}
</script>

It looks like the problem is on this line in the songSearch function:
content = "<div class='pics' id='imagesection" + i + "'>";
You are redefining the variable content instead of concatenating it. This way it will always be just the last image. Try changing it to:
content += "<div class='pics' id='imagesection" + i + "'>";
There is also have a variable inside the songSearch function called foundFlag that is later referenced as findFlag. That shouldn't be causing the issue though.

Displaying table using Javascript breaks inside for loop

I have a code to populate a table using Javascript as:
var myResponse = document.getElementById("jsonPlaceHolder");
myResponse.innerHTML += "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td> </tr>";
for (var i = 0; i < 25; i++) {
myResponse.innerHTML += "<tr>"
myResponse.innerHTML += "<td>" + jsonObj[i]["user_id"] + "</td>";
myResponse.innerHTML += "<td>" + jsonObj[i]["text"] + "</td>";
myResponse.innerHTML += "</tr>"
}
myResponse.innerHTML += "</table>";
Problem with this code is when I run this table is not continued inside for loop. If I add
myResponse.innerHTML += "<table><tr>"
inside my for loop, table is created. Isn't this bit odd?,
since i am using += to add to current innerHTML of the DOM element.

One of the most misunderstood thing about innerHTML stems from the way the API is designed. It overloads the + and = operators to perform DOM insertion. This tricks programmers into thinking that it is merely doing string operations when in fact innerHTML behaves more like a function rather than a variable. It would be less confusing to people if innerHTML was designed like this:
element.innerHTML('some html here');
unfortunately it's too late to change the API so we must instead understand that it is really an API instead of merely an attribute/variable.
When you modify innerHTML it triggers a call to the browser's HTML compiler. It's the same compiler that compiles your html file/document. There's nothing special about the HTML compiler that innerHTML calls. Therefore, whatever you can do to a html file you can pass to innerHTML (the one exception being that embedded javascript don't get executed - probably for security reasons).
This makes sense from the point of view of a browser developer. Why include two separate HTML compilers in the browser? Especially considering the fact that HTML compilers are huge, complex beasts.
The down side to this is that incomplete HTML will be handled the same way it is handled for html documents. In the case of elements not inside a table most browsers will simply strip it away (as you've observed for yourself). That is essentially what you're trying to do - create invalid/incomplete HTML.
The solution is to provide innerHTML with complete HTML:
var htmlString = "<table border=1> <tr> <td> User Id </td> <td> Question </td> <td> Link Question </td> </tr>";
for (var i = 0; i < 25; i++) {
htmlString += "<tr>"
htmlString += "<td>" + jsonObj[i]["user_id"] + "</td>";
htmlString += "<td>" + jsonObj[i]["text"] + "</td>";
htmlString += "</tr>"
}
htmlString += "</table>"
myResponse.innerHTML += htmlString;

Use the DOM API to manipulate the DOM:
var myResponse = document.getElementById("jsonPlaceHolder");
var table = document.createElement('table'),
headings = ["User ID", "Question", "Link Question"];
table.style.border = "1";
var r = table.insertRow(-1);
for (var i = 0; i < 3; i++) {
(function(){
return r.insertCell(-1);
})().innerHTML = heading[i];
}
for (var i = 0; i < 25; i++) {
r = table.insertRow(-1);
var userid = r.insertCell(-1),
text = r.insertCell(-1);
userid.innerHTML = jsonObj[i]["user_id"];
text.innerHTML = jsonObj[i]["text"];
}
myResponse.appendChild(table);

How to get the value of content that gets hidden or autogenerated?

This question comes after solving my last question, I'd like to get some values out of the hidden forms but when I try to retrieve them only empty strings come by, I've considered just using arrays to store the information as it is introduced but I'd like to know if it's possible just to retrieve it afterwards and how.
Also, There is a table that is generated on the fly with some javascript:
function createTable(){
if ( document.getElementById("invoiceFormat").rowNumber.value != ""){
rows = document.getElementById("invoiceFormat").rowNumber.value;
}
var contents = "<table id='mt'><tr>";
if ( document.getElementById("invoiceFormat").cb1[0].checked ){
contents = contents + "<td class='htd'>Quantity</td>";
}if (document.getElementById("invoiceFormat").cb1[1].checked ){
contents = contents + "<td class='htd'>Description</td>";
}if (document.getElementById("invoiceFormat").cb1[2].checked ){
contents = contents + "<td class='htd'>Unitary Price</td>";
}if (document.getElementById("invoiceFormat").cb1[3].checked ){
contents = contents + "<td class='htd'>Subtotal</td>";
}
for (i=4; i<=k; i++){
if (document.getElementById("invoiceFormat").cb1[i].checked ){
contents = contents + "<td>" + document.getElementById("invoiceFormat").cb1[i].value + "</td>";
}
}
contents = contents + "</tr>";
for (j=1; j<=rows; j++){
contents = contents + "<tr>";
for (l=0; l<=k; l++){
if (document.getElementById("invoiceFormat").cb1[l].checked ){
hotfix = l +1;
contents = contents + "<td> <input id='cell" + j + "_" + hotfix + "' name='cell' type='text' size='15' /> </td>";
}
}
contents = contents + "</tr>";
}
contents = contents + "</table>";
var createdTable = document.getElementById("mainTable");
createdTable.innerHTML = contents;
}
After it's created I've tried to access it but without luck so far, I just can't get what the user inputs in the input fields that are created. How can I do this?
I'm using raw javascript with jQuery so answers with or without the library are welcomed :)

document.getElementById("invoiceFormat").cb1[3].checked
First of all I do not know what ".cb1[3]" means here so I will ignore it and will tell you how I would solve this problem: (I assume that "invoiceFormat" is id of your form.)
1) in your form set name property of every field you have. that way you can reach them like document.getElementById("invoiceFormat").fieldName.value
if you will use this method make sure that put your form in a local variable. it will be a lot faster
var form = document.getElementById("invoiceFormat");
form.fieldName.value;
2) give every field you have a unique id and just use getElementById directly on fields not on form.
I am not sue if this method is better, but I am useing second one all the time. I just get used to it I guess.
3) there is one more way but it might be an overkill. when you create your form fields, you can put them in an object(not values but the elements themselves) and even hide it in a closure. That way you can call something like
formElements.formFieldOne.value;