I was trying to create a checked radiobutton by using following code in IE7. But it doesn't work.
var x = document.createElement("input");
x.type="radio";
x.checked=true; //I also tried setAttribute here which doesn't work either.
var spn=document.createElement("span");
spn.appendChild(x);
document.body.appendChild(spn);
I found that I could put x.checked=true after appendChild statement to make it work. I also noticed that when I change "radio" to "checkbox", it can be checked without changing the order of statements.
I am really confused by these facts. Am I doing something wrong in the above code?
SOLUTION: Finally, I understand it's a IE bug. When appending the new radio button to its parent, the checked property will be cleared. So, I have to call "x.checked=true;" as the last statement.
It's a weird IE thing....you need to use innerHTML or IE's extended createElement because "expando" properties don't work right on radio buttons. http://cf-bill.blogspot.com/2006/03/another-ie-gotcha-dynamiclly-created.html
var x = document.createElement("input");
x.setAttribute('defaultChecked', 'defaultChecked');
x.type="radio";
var spn=document.createElement("span");
spn.appendChild(x);
document.body.appendChild(spn);
This should do the trick.
This isn't jQuery : you gotta build the properties yourself:
var x = document.createElement("input");
x.type = 'radio';
x.checked = true;
But if it were jQuery:
$(document).ready(function() {
var x = $("<input type='radio' checked='checked' value='value'/>");
$("body").append($("<span></span>").append(x));});
var input = document.createElement("input");
input.setAttribute("type", "radio");
input.setAttribute("checked", "checked");
var span = document.createElement("span");
span.appendChild(input);
document.body.appendChild(span);
Related
var noOfPersons;
function printEmptyBoxes() {
noOfPersons = document.getElementById("NumberOfPeople").value;
var dynamicAttach = document.getElementById("dynamic_Content");
for(var i=0;i<noOfPersons;i++) {
var name = document.createElement("input");
var expenditure = document.createElement("input");
var button1 = document.createElement("input");
var button2 = document.createElement("input");
name.setAttribute("type", "text");
name.setAttribute("id", "person"+(i+1)+"");
expenditure.setAttribute("type", "text");
expenditure.setAttribute("id", "Expenditure"+(i+1)+"");
button1.setAttribute("type", "button");
button1.setAttribute("value", "+");
button1.setAttribute("onclick", 'document.getElementById("Expenditure"+(i+1)+"").value += "+"');
button2.setAttribute("type", "button");
button2.setAttribute("value", "=");
// button2.setAttribute("onclick", "x += eva);
dynamicAttach.appendChild(name);
dynamicAttach.appendChild(expenditure);
dynamicAttach.appendChild(button1);
dynamicAttach.appendChild(button2);
var brk = document.createElement("br");
dynamicAttach.appendChild(brk);
}
}
/*
It's showing uncaught reference error unable to access i on "onclick" but my i variable is getting accessed at both of id attributes I have created before that statement("person"+(i+1)+"");
*/
In your case, the code is not exactly the same way you look
'document.getElementById("Expenditure"+(i+1)+"").value += "+"'
I believe what you want is have Expenditure+(i+1) (after calculate i+1) as the ID, but since it is covered by a single quote (before document and at the end), it still treat Expenditure+(i+1) (before calculate i+1) as an actual ID.
The easy way for you to check this error is look at the color of string in your editor, you will easily see that those 2 color are not the same.
So, how to fix?
Simplest way, set the ID as a different variable and use it later on
var expID = "expenditure" + (i+1);
Furthermore, don't use setAttribute for onclick event. Use .onclick() instead
button1.onclick = function_name;
Have a loop through my simple code here:
http://jsfiddle.net/mankinchi/7x6z6hgr/
I am unable to select all the checkboxes using the following code:
cell = row.insertCell(0);
if (tblname == "tblAttributes1")
{
el = document.createElement('input');
el.setAttribute('type', 'checkbox');
el.setAttribute('name', 'nodeID');
el.setAttribute('value', chkValue);
el.setAttribute('onclick', function()
{
Toggle( "top_checkbox", this, "nodeID" )
});
}
and html tag is:
<input type="checkbox" name="top_checkbox" value="checkbox" title="Select/Deselect All" onClick="ToggleAll( this, 'nodeID' )">
If by "selected" you mean you want them to have the checkmark in them, you're looking for the checked property. And in general, you're using setAttribute where really you'd be better off using the reflected properties for things (especially the onclick, which just won't work cross-browser as you have it). So:
cell = row.insertCell(0);
if (tblname == "tblAttributes1")
{
el = document.createElement('input');
el.type = 'checkbox';
el.name = 'nodeID';
el.value = chkValue;
el.checked = true; // Makes it checked
el.onclick = function()
{
Toggle( "top_checkbox", this, "nodeID" )
};
}
You probably also want to append el to something at some stage; presumably you're doing that in code you haven't shown.
Separately, I'd suggest using modern event handling techniques rather than onclick, such as addEventListener (attachEvent on IE8 and earlier).
You are setting a function as the onclick attribute, so the function.toString() will be set as the attribute value which won't be a valid value, instead you want to set the function reference as the value of the el's onclick property
el.onclick = function () {
Toggle("top_checkbox", this, "nodeID")
};
I am Creating one input box dynamically using javascript
Below is the Code:
var addtxt = document.createElement("input");
addtxt.type = "text";
addtxt.name = "admissionno" ;
addtxt.id = "admissionno" ;
If i add value in static way it will take using addtxt.value="11";
But am adding like this dynamically
addtxt.value=result.studentlist[j].admissionno
it will not work.please give me the idea its helpful for me.
Try this:
document.getElementById("admissionno").value = (result.studentlist[j].admissionno);
I have two buttons. On first buttons click, I needs to change input text type to select box & on second buttons click, change the select box to input text type through Javascript. Thanks.
Thanks a lot #JoshMein, #Bergi, #Rocket for your time & suggestions. It helped me a lot. I also tried in diff way as follow.
function changeToText() {
var obj = document.getElementById('disease1CurrentObject');
document.getElementById('divDisease1Current').removeChild(document.getElementById(obj));
var element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('value', 'myVal');
element.setAttribute('id', 'myId');
document.getElementById('divDisease1Current').appendChild(element);
}
function changeToSelect() {
var obj = document.getElementById('disease1CurrentObject');
document.getElementById('divDisease1Current').removeChild(obj));
var element = document.createElement('select');
element.setAttribute('type', 'text');
element.setAttribute('value', 'myVal');
element.setAttribute('id', 'myId');
document.getElementById('divDisease1Current').appendChild(element);
}
& 1 more, setAttribute() is not supported by IE version less than 8 or 8.
So I have the following html:
<div id="divForComponents">
<input type="button" value="+" onclick="addFilter('divForComponents')"/>
</div>
And in my script file:
function addFilter(divId){
var div = document.getElementById(divId);
var label = document.createElement("label");
var text = document.createTextNode("Filter by:");
label.appendChild(text);
div.appendChild(label);
var filter = document.createElement("select");
filter.name = "selectName";
filter.options[0] = new Option("selection 1","value 1");
filter.options[1] = new Option("selection 2","value 2");
filter.options[2] = new Option("selection 3","value 3");
filter.options[3] = new Option("selection 4","value 4");
div.appendChild(filter);
var input = document.createElement("input");
input.type = "text";
input.name = "inputName";
div.appendChild(input);
}
Now the select component and the input field are added properly, but the label is added before the button I already had on that div. I would like and expect to obtain a positioning:
Button Label Select Input
Instead I get:
Label Button Select Input
The browser I'm testing on is Chromium, not sure if that counts for anything here.
Regards,
Bogdan
Is it actually inserting the label before the button or just visually showing up that way? It sounds like you may have a CSS style that is telling the label to float left.
For one, your function is named addComponents() and yet you use addFilter(). I've just tried your code and changed addFilter() to addComponents() and the label has been set properly.
Works fine in chrome when your function is named properly:
http://jsfiddle.net/AlienWebguy/bVzwr/