I have JS code like this:
var option = document.createElement("input");
option.id = "id";
option.type = "radio";
var txt = document.createTextNode("sample");
option.appendChild(txt);
but this "sample" is invisible on the site. HTML structure is like this (in Firebug):
<form id="answers"><input type="radio" id="id">sample</input></form>
but in default firefox inspector is:
<form id="answers"><input type="radio" id="id"></input></form>
I've tried with innerHTML but there is the same problem. I just don't see anything between <input> tags.
What are your suggestions?
You create the elements but do not append them to the form. You should use something like this:
document.getElementById('answers').appendChild(option);
In this way you will append the newly created option element to the form with id "answers".
Have in mind that is is conceptually wrong to have text inside of a input type radio!
Related
I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.
Maybe this is weird, but this is what I need.
For example, we can do this:
var elem = document.getElementById("some_id");
if ("asd" in elem)
alert(elem.asd); // and this in second pass
else
elem.asd = "dsa"; //this will be executed first
I want something like this:
<input type = "button" value = "test btn" asd = "something" />
But this does not work. maybe there is some other way?
I really can't use body.onload to assign needed things.
Don't create non-standard expando attributes. HTML 5 introduces the data-* attribute set which is designed for adding custom data to HTML elements.
<input type="button" value="test btn" data-asd="something">
You can then access them through the dataset property.
var button = document.querySelector('input');
alert(button.dataset.asd);
If you want to support old browsers, you can use getAttribute:
var button = document.querySelector('input');
alert(button.getAttribute('data-asd'));
Or a library with a compatibility routine, such as jQuery:
var button = $('input');
alert(button.data('asd'));
Your HTML is good enough. But for accessing attribute you should say like bellow.
var attr = elem.getAttribute("asd");
alert(attr);
I am a beginner in javascript. I'm trying to add a function to generate new form elements using javascript, on a page that's generated in php.
The code works in creating new <tr>, <td>, <input type="text"> html elements. However when I try to create buttons using css styles, I find that the styles are lost from the tags.
if(document.createElement)
var tr = document.createElement("tr");
var input = document.createElement("input");
// If NS is passed, should become NS[2] etc
input.id = field+"["+count+"]";
input.name = field+"["+count+"]";
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
var td=document.createElement("td");
var newContent = document.createTextNode("NS");
td.appendChild(newContent);
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(input);
tr.appendChild(td);
var btnDel=document.createElement("a");
btnDel.class="btn btn-primary";
btnDel.onclick = "addField(\'nameservers\',\'NS\',10);" ;
var btnText=document.createElement("span");
btnText.class="btn-label";
btnText.innerHTML="Add";
btnDel.appendChild(btnText);
td.appendChild(btnDel);
tr.appendChild(td);
field_area.appendChild(tr);
}
The produced code shows:
<a><span>Add</span>
</a>
</td>
instead of what I expect:
<a onclick="addField('nameservers','NS',10);" class="btn btn-primary">
<span class="btn-label">Add
</span>
</a>
What am I doing wrong? What's the proper way of passing all html attributes using the script?
For the on click
Instead of trying to output this into the HTML, why not do this in pure Javascript, using the addEventListener method?
element.addEventListener('click', function() {
addField('nameservers','NS',10);
}, false);
This approach is known as non-obtrusive Javascript, and it's actually quite a desirable attribute when developing a website.
For the class
As mentioned, use className and not class.
class usually precedes the declaration of as new class, and can't be used like an attribute, in the same way that you can't call a variable var.
Use className= instead of class=. So it will be like:
btnDel.className="btn btn-primary";
It is because the class word is reserved word in JavaScript.
I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.
Im trying do this basically:
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode('<input class="param" type="text" name="dummy" value="fred"/>'));
tr.appendChild(td);
but it just displays the input... as normal text, how do I insert it so that it works as i require..?
im guessing its the createTextNode that needs to be changed?
Cheers
You could either
td.innerHTML = '<input class="param" type="text" name="dummy" value="fred"/>';
or
var ip = document.createElement( 'input' );
ip.className = 'param';
ip.type = 'text';
ip.name = 'dummy';
ip.value = 'fred';
td.appendChild( ip );
EDIT
ie won't allow the type of a form element to be changed dynamically. I'm pretty sure this only applies when the element already has a type and has already been inserted into the DOM. Best to check though. If it doesn't work use method 1
Try using innerHtml property of element.
That is try using td.innerHtml = "<input ...../>"
Meouw has the right idea. You're creating a text node in your example, and what needs to be done is create a dom element.
This is also another case where jQuery could simplify your code. What you were attempting to do by adding the element as an html string can be done with the jQuery html( val ) function:
http://docs.jquery.com/Attributes/html#val
Basically, to apply this technique with your given example, you would include the jQuery library on your page and write the following line:
$("#someTable").html('<tr><td><input class="param" type="text" name="dummy" value="fred"/></td></tr>');
You can also create any html element on the fly and string together attributes and event handlers in one line as in the following example:
http://www.peterbe.com/plog/creating-dom-element-with-jquery
var textbox = $("<input type='text'></input>").attr('name','dummy').addClass('param').val('fred');
$("#someTableCell").append(textbox);