We Keep Coding

Different behavior of HTML <input> checked Attribute

Different behavior is occurring in different browser for HTML <input> attribute. I have generated input attribute from Javascript by clicking a button. Checkbox is visible in Firefox browser but not showing in Chrome browser. The generated HTML code is
<input id="0" class="col-sm-1" onclick="checkImage(this)" name="images[0].isActiveDefault" type="checkbox">
FireFox Browser
Chrome Browser
Any help or suggestion to resolve this problem will be appreciate.
EDIT added JavaScript Code
function addImagerow(tableId) {
var rowValue = parseInt(document.getElementById('image-add').value);
var tableData = "<tr><td><input id = '"
+ rowValue
+ "' class='col-sm-1' onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
document.getElementById('image-add').value = rowValue + 1;
$(tableData).appendTo(tableId);
}

After having waste a lot of time I found the issue. Though the issue is silly, I have learned a lesson from it. Ok, the issue was on the design. From the input field I remove the class='col-sm-1'. And its working fine.
I added the bootstrap css for input field but not for table data field.
var tableData = "<tr><td><input id = '"
+ rowValue
+ "' class='col-sm-1' onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
TO
var tableData = "<tr><td><input id = '"
+ rowValue
+ "onclick='checkImage(this)' name='images["
+ rowValue
+ "].isActiveDefault' type='checkbox'></td><td>Default</td>"
+ "<tr>";
And my analysis says that I when I added the col-sm-1 into the input field the <td> is not expanding that's why the input field is hide.

Fullcalendar: checkboxes on the days of the month

I'm using FullCalendar 2.0 to display availability of a user. The user can select when they're available and the information will then be stored into the database.
I've edited fullcalendar.js to display a checkbox on every day of the month, and once the save button is clicked all checked days will be stored.
return '' +
'<td class="' + classes.join(' ') + '" data-date="' + date.format() + '">' + '<input type="checkbox" name="cal[]" id="checkbox-2-' + date.format() + '" class="regular-checkbox big-checkbox" value="' + date.format() +'" /><label for="checkbox-2-' + date.format() + '">' + date.date() + '</label>'
+
'</td>';
},
However when the next or prev button is pressed everything is unchecked. IS there a way to keep the checkboxes checked when the user navigates months?

First of all it's not recomended to alter the content of fullcalendar.js
You should use dayRender method if you want to change the way that td is displayed:
dayRender: function (date, cell) {
cell.append('<input type="checkbox"............../>');
}
To repoulate checkboxes after month changed you should use an array to store each checkbox checked and then using checkbox changed event pop/push them from that array.

JavaScript Clears My Input Values

I am writing a simple form at work using HTML and have added JavaScript to the page to allow users to add extra rows to a table. This table has input type="Text" tags and select tags. When the user clicks the button to add a row, the JavaScript adds a row, but clears the input and select tags.
My script is
var x = x + 1;
function another()
{
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
bigTable.innerHTML += ("<TR><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><SELECT
NAME=\"PO" + x + "\"><OPTION>Select</OPTION><OPTION>1234567890</OPTION></SELECT>
</TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"SKU" + x
+ "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT TYPE=\"Text\"
NAME=\"modelNum" + x + "\"></TD><TD CLASS=\"bigTable2\" ALIGN=\"Center\"><INPUT
TYPE=\"Text\" NAME=\"itemNum" + x + "\"></TD><TD CLASS=\"bigTable2\"
ALIGN=\"Center\"><INPUT TYPE=\"Text\" NAME=\"qty" + x + "\" ID=\"qty"+x+"\"
onBlur=\"total();\"></TD></TR>");
}
I'm not sure what the issue is here. Is the "+=" statement basically resetting my table like an = statement would?
EDIT: I don't know how to get all of the code to appear, but what is displayed is not all of my code. I have a basic Table and using JavaScript use a += statement to add HTML to it.
EDIT: My table is this:
<TABLE ID="bigTable">
<TR>
<TH>P.O. #</TH>
<TH>SKU #</TH>
<TH>Model #</TH>
<TH>Item #</TH>
<TH>Quantity</TH>
</TR>
<TR>
<TD CLASS="bigTable" ALIGN="Center">
<SELECT NAME="PO1">
<OPTION>Select</OPTION>
<OPTION>1234567890</OPTION>
</SELECT>
</TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="SKU1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="modelNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="itemNum1"></TD>
<TD CLASS="bigTable2" ALIGN="Center"><INPUT TYPE="Text" NAME="qty1" ID="qty1" onBlur="total();"></TD>
</TR>
</TABLE>
My JavaScript Replicates everything between the tags. And I use the variable x to update the number in the names for the inputs and dropdowns. Variable Y is used to increment a calculation function.

When you edit the innerHTML of a HTML element, the entire DOM gets re-parsed. Since the input's values aren't actually stored in the input elements's HTML, they are cleared.
An option would be to use DOM manipulation to add the row:
function another(){
x = x + 1;
y = y + 1;
var bigTable = document.getElementById("bigTable");
vat tr = document.createElement('tr');
tr.innerHTML = ("<td class='bigTable2' align='Center'><select name='PO" + x + "'><option>select</option><option>1234567890</option></select></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='SKU" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='modelNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='itemNum" + x + "'></td>"+
"<td class='bigTable2' align='Center'><input type='Text' name='qty" + x + "' ID='qty" + x + "' onBlur='total();'></td>");
bigTable.appendChild(tr);
}
Notice how the string no longer contains a <tr> tag.
This codes creates a tr element, then adds the rows to it, then adds that whole, (parsed), tr to the table.
(I also changed the tags / attributes to lowercase and replaced all \" with ' to make it more readable)

To be clear, x += y is the same as writing x = x + y. What's happening here is that you are overwriting the HTML with what you had plus the new row. This clears your inputs because their values are not stored in the HTML (when you type inside one of the input, it's "value" property is not updated in the actual HTML).
So you are basically overwriting your HTML with what was there initially plus some added nodes.
EDIT: Go for Cerbrus's solution. Much cleaner.

What I ended up going with was a dynamic JavaScript code that would create a dynamic array and store values in each column of my current table. Then the code created a new row and the array was then accessed to repopulate the values.

Use jQuery to select all labels of radio button group

I am trying to write a function that will be called if any of the labels for a group of radio buttons are clicked. So I'd like a way to refer to all the labels of the radio button group.
From another thread (this one) I read that I could do
$('#[radio_name] label').click(function(){
...
});
where [radio_name] is the name of the group of radio buttons. In fact, I'm just trying to implement the code in the referenced thread. Unfortunately it doesn't work for me, don't know why.
Some other threads suggested you could select a specific label with $('label[for=[radio_option_id]]'), where [radio_option_id] is the id of the radio button to which the label applies. However, that only works to select a single label. I need to select all the labels in the group, which have different ids.
EDIT: here is the more complete context as requested below.
var content = "<form id='question_form' name='question_form' action=''>" + page.text;
content += "<div id='radio_options'>";
for ( var i=0; i<page.answers.length; i++ ) {
content += "<input type='radio' name='radio_option' id='radio_option_" + i.toString() + "' value='" + i.toString() + "'><label for='radio_option_" + i.toString() + "'>" + page.answers[i] + "</label><br>";
}
content += "</div>";
content += "<p><input type='submit' id='submit_button' name='submit_button' value='Submit'></p></form>";
display_loc.html( content );

Use the ATTR contains selector
$('label[for*="radio"]').click(function(){
...
});
This would work for and label that contains radio within the for attribute
Eq.
<input type="radio" name="emotion" id="radio_sad" />
<label for="radio_sad">Sad</label>
<input type="radio" name="emotion" id="radio_happy" />
<label for="radio_happy">Happy</label>
Update
For you html code you can do the following.
$('#radio_options label').click(function(){
});

It sounds to me that you just need to apply a class to your different labels and access them that way. That way you can group the labels by class.
$('label.className').click(function(){
...
});

Converting pairs of input elements into json

I have a simple ui which has a link that says "add item". When this is clicked, a pair of input boxes appears below it. If it is clicked again, yet another pair appears. I'm trying to think of the best way to generate these elements and turn it into some sort of json array of key value pairs (the first input element in each pair being the key and the second input element being the value).
Right now I just have a counter and I generate the ids using it, such as (in the click event of the "add item" link):
$('#features').append('<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" /><a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input id="feature-description-' + self.featureCount + '" type="text" name="asdf" />');
I don't know what to use as the "name" attributes in order to make it easy to create a json array from them.

you can do something like this without using id attributes.
$('#features').append('<div><input type="text" />
<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a><input type="text" /></div>');
And your javascript,
var yourArray=[];
$('#yourButton').click(function(){
$('#features div').each(function(){
var div=$(this);
var k=$('input:first',div).val();
var v=$('input:first',div).next().val();
yourArray.push({key:k, value: v});
});
});

It doesn't matter what you use for a name attribute, so long as there name and description names are different. Let's say that these elements are all appended to a form with the id myform. Give each pair its own wrapper object. Here, I've used a div, but a fieldset is equally appropriate.
$('#features').append(
'<div class="feature-div">
'<input id="feature-name-' + self.featureCount + '" type="text" name="asdf" />' +
'<a class="delete-feature" data-id="' + self.featureCount + '">Delete</a>' +
'<input id="featurena-description-' + self.featureCount + '" type="text" name="asdf" />' +
'</div>');
Now, it's possible to extract each pair sensibly:
var myarray = [];
$('#myform .feature-div').each(function(i, v) {
myarray.push([
$('input[name=name]', v).val(), $('input[name=description]', v).val()]);
});
Or however you want the data to be presented.