I am using a plugin called minicolors for jquery link. I am trying to appened a color picker here (in 2 places, a div and table just for testing) with a button click, it seems though that it only works on the second button click, the first simply returning an empty input box.
<script type="text/javascript">
function addPicker() {
$(document).ready( function() {
$(".colorpick").miniColors({
change: function(hex, rgb) {
}
});
});
var picker = "<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />";
$("#datatable > tbody").append("<tr><td>"+picker+"</td></tr>");
$("#testdiv").append(picker);
}
</script>
<div id="testdiv"></div>
<button onclick =" addPicker();">Button</button>
No Idea why this is not working.
Try :
$(document).ready( function() {
$('.addButton').click(function(){
$("<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />").appendTo("#datatable tbody").wrap('<tr><td></td></tr>');
$('.colorpick').miniColors();
});
});
Live demo : http://jsfiddle.net/hCVpX/12/
Related
My code is:
<input id='edit' type='checkbox' />
while($rs = mysql_fetch_array($query_fetch))
{
echo "
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
";
}
<script>
document.getElementById('edit').onchange = function() {
document.getElementById('qty').disabled = !this.checked;
};
</script>
The problem is that when check the checkbox only the first row of the loop is effected. I want when checkbox is checked all input to be enabled.
To do this in jQuery, change:
<input type='text' name='qty' id='qty' value='".$sum[0]."' disabled>
To:
<input type='text' name='qty' class='qty' value='".$sum[0]."' disabled>
And add the following code:
$('#edit').click(function() {
if ($(this).prop('checked')) {
$('.qty').prop('disabled', false);
} else {
$('.qty').prop('disabled', true);
}
});
Note: DOM object IDs should be unique. No two elements should have the same ID. You can assign the same class to multiple elements and identify them in javascript that way. Also, if these input elements are form elements you plan to process server side, you will need to name them differently or only the last value assigned will be available.
First thing You don't use id for that much elements... id is unique for each element...
here you can use class = qty .
you can get class values using jquery
$('.qty').eq(0).val();
still if you want to use id then you can concatenate any counter variable (i) to id
echo "
<input type='text' name='qty"+i+"' id='qty' value='".$sum[0]."' disabled>
";
To do this in jQuery:
add class entry to the text fields:
<input type='text' class='qty' name='qty' id='qty' value='".$sum[0]."' disabled>
and then use the jquery
$( "#edit" ).click(function() {
$( ".qty" ).each(function( index ) {
if ($("#edit").is(':checked')) {
$( this ).prop('disabled', false);
} else {
$( this ).prop('disabled', true);
}
});
});
Following is my fiddle in which when user click on all delete then on foreach for LI function. I want to remove those lis which contains name like abc,def,ghk in their input field . I just want to know how to check that the active li on foreach loop contains the certain value that matches it input field value or not so i'll stop to remove it.
Fiddle: http://jsfiddle.net/mT5vw/2/
$(document).ready(function () {
$(document).on('click', '.liDelete', function () {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});
function alldelete() {
$('#folder li').each(function (e) {});
}
If you want to remove the li that the input contains a value like ABC try:
$('#removeAll').click(function(){
$('#folder li input[type="text"]').each(function () {
if ($(this).val() === "abc") {
$(this).parent().remove();
}
});
here the jsfiddle only write abc in the input and before press remove all.
I've edited your fiddle: http://jsfiddle.net/mT5vw/3/
If this is what you what it can be achieved by, removing all elements from the tag and then reinserting one empty row.
js:
$(document).ready(function () {
$(document).on('click', '.liDelete',function() {
li = $(this).parent();
li.remove();
});
$("#butadd").click(function () {
$("ul").append("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
$("#deleteall").click(function(){
$('#folder').html("<li>Folder Name : <input type='text' class='fname' value='' required='required' /> <input type='button' class='liDelete' value='- Remove' /></li>");
});
});
<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">
</div>
</body>
</html>
Question: When I click on add more first and type something and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?
Thanks In advance
.innerHtml replaces the content which you place next..so use append like
var t = document.createElement("div"),
document.getElementById("theBlah").appendChild(t);
Problem is that typing something in the input does not change its value parameter but sets its value property (know the difference), e.g. it changes this.value instead of this.attributes.value, which results in innerHTML not actually containing the typed value.
So since innerHTML += 'string' ist just like setting innerHTML = innerHTML + 'string', it resets the input value to its attribute, which is empty.
I'd really recommend to use jQuery here, because with pure JS you'd have to first create the input and select element, then apply all needed attributes with multiple .setAttribute() calls.
I used Jquery and solved it this way:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>6){
alert("Not allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html(Added my text box and select tag here);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<input type='button' value='Add More' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
</body>
</html>
I have this code for the html button and textbox: the textbox is where I input a text so that I could do some changes on the table.
'textbox
<input name="txtupdate" type="text" id="txtupdate" value="<%=Request.Form("txtupdate")%>" />
'button
<td align="center"><button type="button" value="clear" id="clear">Clear</button></td>
What I need to do now is click the Clear button and the textbox will be clear. I tried using this code but it doesnt seems to work,
<script type="text/javascript">
$(document).ready( function() {
$('#clear').click( function () {
$('#<%=Request.Form("txtupdate")%>').val("");
});
});
</script>
Any help is appreciated. thanks
I think you messed the id and value. Your text box id is txtupdate but not <%=Request.Form("txtupdate")%>. So, the selector is incorrect. You should use txtupdate instead.
The correct JavaScript should as below.
<script type="text/javascript">
$(document).ready( function() {
$('#clear').click( function () {
$('#txtupdate').val("");
});
});
</script>
How to created textbox dynamically , when i click add button.
after i put the input field in the text box.
how to validate the dynamically created textbox using javascript or jquery.
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox = intTextBox + 1;
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox+": <input type='text' id='" + intTextBox + "' name='" + intTextBox + "'/>";
contentID.appendChild(newTBDiv);
}
</head>
<body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement();" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
after when i click submit button all textbox validation must be done....
Try to copy this and test. And let's tell me that is as you need.
<!DOCTYPE HTML>
<html>
<head>
<title>Adding and Removing Text Boxes Dynamically</title>
<script type="text/javascript">
var intTextBox = 0 ;//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement(){
intTextBox += 1
var contentID = document.getElementById('content');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "Text "+intTextBox%x+": <input type='text' id='%2+ intTextBox + "' name='" + intTextBox + "' />";
contentID.appendChild(newTBDiv);
}
function removeElement(){
var element = document.getElementById("strText"+intTextBox);
console.log(element);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
intTextBox -=1;
}
</script>
</head><body>
<p>Demo of Adding and Removing Text Box Dynamically using JavaScript</p>
<p><a href="javascript:addElement()" >Add</a>
<a href="javascript:removeElement();" >Remove</a>
</p>
<div id="content"></div>
<input type="button" value="submit"/>
</body>
</html>
See more at My jsFiddle
Note : working with FireFox & Chrome
create textbox:
var textbox = $('<input></input>');
textbox.setAttr(type, 'text');
add to container:
$('#button').onclick(function() {
$('#container').append(textbox);
});
validate:
$('#submit').onclick(function() {
if(!$('#textbox').val()) {
alert('input empty');
}
});
You could use this jQuery Validation Plugin. The demo shows that is can validate textboxes.
that's alot of questions rolled into one. You can create and insert elements in jquery with code like the following:
$('<input />', {type : 'text'}).appendTo($(body));
As far as validation is concerned, it would depend on when you want to do it. on keypress, on submit, on blur, etc. If you want a blanket validate for all inputs you'll need to delegate it to some parent element since these textboxes are created after the page is loaded:
$('body').delegate('input','keyup', function(){
/*Do stuff*/
});
But you could also attach the validation when you create the element if it needs to be specific to the field you create.
$('<input />', {type : 'text'}).bind('keyup', function(){
/*Do stuff*/
}).appendTo($(body));
I hope that steers you in the right direction. Good luck