Develop Reference

Dynamic input field not working

Good day, i've a trouble with my script. I want to make a dynamic field. Please kindly check my script first
$(document).ready(function() {
var max_fields = 10;
var wrapperss = $(".wrappers");
var add_button = $(".btn");
var x = 1;
$(add_button).click(function(e){
e.preventDefault();
if(x < max_fields){
x++;
$(wrapperss).append('<div><input type="text" name="nama[]"/>Hapus</div>');
}
});
$(wrapperss).on("click",".hapus", function(e){
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
<button class="btn">Tambah baris</button>
<?php echo form_open('inputbanyak/save'); ?>
<div class="wrappers">
<div><input type="text" name="nama[]"></div>
</div>
<input type='submit' class='button'>
<?php echo form_close(); ?>
By the way, i'm using bootstrap. when i press Tambah baris nothing change.

Multiple class selector is wrong, please remove the space and add . :
var add_button = $(".btn.tmbh");//$(".btn tmbh");
In addition, you can only use 1 css class (btn or tmbh) to target your button for action, you dont need both.
also one spelling mistake:
var wrapperss = $(".wrappers");//$(".wrapperss");

Of course they won't
First thing that you must really note is your css class naming.
Here is your css class, "btn tmbh".
<button class="btn tmbh">
In css this means you are using 2 css class, first btn class, and second is tmbh class. But eventhough you are using those css class by that way, you are still make some mistakes in your jquery path for this code
var add_button = $(".btn tmbh");
I dont really got what do you want to try, but I can guess what do you want.
Here we go...
may be you want to define your button class ass ".btn_tmbh" then you call that css class in your jquery code like this
varr add_button = $(".btn_tmbh")
But if you want to treat your css class as 2 different class that would be come as composite identifier (by using 2 different css class, I don't know how u are using that, Instead of using class as identifier, I think the better way is to use id), what you need is to use css path like this.
suppose we are got 2 different class ".btn" and "tmbh" and with two different element. We need to define our css class path like this
$(".btn > .tmbh")
more precise css path is like this
$("<your-element-type>.btn > <your-element-type>.tmbh>")
If you want to use two different class in one same element you can use this class path format
.class1.class2
can be much thing, like button, input, div, ul, li, table, tr, td, and other html tags.
So I think you need to learn more about css path rather than only search sample code without you fully understand that code.

how to delete input text box from javascript

i have created a input text box from javascript with the following code in runtime
var textbox = document.createElement('input');
textbox.type = 'text';
textbox.id='tbox';
textbox.value=document.getElementById("texts"+i).value;
document.getElementById('frm').appendChild(textbox);
How can i delete the same textbox in runtime?

In javascript, you can not directly remove the element. You have to go to its parent element to remove it.
var elem = document.getElementById("tbox");
elem.parentNode.removeChild(elem);

document.getElementById('frm').removeChild(document.getElementById('tbox'));

try remove()
so assuming I've got the right one:
document.getElementById("texts"+i).remove()
If not the above... then make sure you give it an id and choose it by that before remove()ing it

Possible duplicate: Remove element by id
However you can use the following solution:
You could make a function that did the removing for you so that you wouldn't have to think about it every time.
function remove(id)
{
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

Try this:
var temp = document.getElementById('texts'+i);
temp.parentNode.removeChild(temp);

How to clear form from apllied css class?

I have a form which uses jquery validation so every valid and invalid fields it applies some css classes. at the end I have submit and cancel buttons. Problem is cancel button. when I click on cancel all applied css and text in <span> tag has to be removed . SO here what I tried but its not working correctly
first is my generated <span> tag,
<span class="status" id="status">
<font color="red">Id in use</font>
</span>
Here is jquery script for cancel button,
$('#clearform').on('click', function () {
$("#create_teacher").validate().resetForm();
var myString = $("#tIdTextbox").html();
alert(myString);
var element = $(myString);
element.find("font").each(function(index) {
var text = "";
$(this).replaceWith(text);
});
$("#create_teacher").removeClass('success');
$("#create_teacher").removeClass('error');
$("#create_teacher").removeClass('valid');
});
can anyone help me in this please

If you are using jquery validator plugin then please try to replace
$("#create_teacher").validate().resetForm();
with
var validator = $("#create_teacher").validate();
validator.resetForm()

$('#clearform').on('click', function () {
$("#create_teacher").validate().resetForm();
//To remove all the css you have apply in span
$("#create_teacher").find("span").removeAttr('class');
//To remove all the text you have apply in span
$("#create_teacher").find("span").empty();
});

Can you try this.
$('span.error,span.valid,span.success').removeClass('success').removeClass('valid').removeClass('success').text('');

DOM Scripting Javascript, set element value

I am aiming to add a button to the screen through the click of another button.
I can successfully add them but they are blank (i.e, No text).
I tried setting the value with this technique:
addButton.setAttribute("value", "Click Me");
This failed, the strange thing is I was able to successfully set the
elements ID with the setAttribute function.
I then tried the following:
var x = document.getElementById("buttonId");
x.value="Click Me";
The above caused the button not to add at all.
Maybe I'm missing something but I can't think why the first method
wouldn't work.
Note: These buttons are all created on the fly so the standard:
<input type="button" value="click me"/>
won't suffice.
Any help appreciated.

function addButton(elementId, value, name, type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.type = type;
element.value = value; // Really? You want the default value to be the type string?
element.name = name; // And the name too?
var foo = document.getElementById(elementId);
//Append the element in page (in span).
foo.appendChild(element);
}
Try this.
Example fiddle: http://jsfiddle.net/kailashyadav/4Q8Fd/

Here is the code for a button, associated jsfiddle:
$('#createButton').on('click', function () {
var button = document.createElement('button');
button.innerHTML = 'hello';
button.setAttribute('type', 'button');
$('#placeForButton').html(button);
});
Note I set the innerHTML, because an input relies on a value attribute, a button relies on an open and closing HTML attribute. Therefore, the value in between the tags is what sets the button text. This translates into innerHTML.
I only used JQuery to bind an event to the button click.

How to entirely disable/enable html elements?

I have several elements on the page. Something like:
<div id="el1"><div id="el2"><span id="el3">1</span><span id="el4">2</span></div><span id="el5">3</span></div>
I need to disable/enable any of them, using their ids.
<input type="radio" name="do" onclick="disable(document.getElementById('el4'));">
<input type="radio" name="do" onclick="enable(document.getElementById('el4'));">
What should be in disable() and enable() functions to really disable elements?
By "disable" I mean make it invisible for user, inaccessible by "id" and be restorable by "enable()" function.
Is it possible to turn elements on/off? Entirely, I mean.

function addEl4(){
var elem = document.getElementById('el2');
var newElem = document.createElement('div');
newElem.setAttribute('id', 'el4');
newElem.innerHTML = 2;
elem.appendChild(newElem);
};
function disable(elem){
var container = document.getElementById('el2');
container.removeChild(elem);
};
If you are talking in terms of removing the element from the page completely.
Then you can use the .removeChild() method..
Then need to append it to the div you are talking about..
Check Fiddle

You may use
document.getElementById('el4').style.display='none'; // hide
document.getElementById('el4').style.display=''; // show
You could define functions like this :
function hide(element){
element.style.display='none';
}
function show(element){
element.style.display='';
}
I really suggest not to use the enable and disable words, as they have other meanings (a disabled widget is one you can see but you can't change).
A better solution would be to define a css class
.hidden {
display: none;
}
and change the class in js :
document.getElementById('el4').classname='hidden'; // hide
If you want to completely remove an element, you may use removeChild :
var node = document.getElementById('el4');
node.parentNode.removeChild(node);
but it's almost never useful. Prefer to hide as is commonly done.