jquery add/remove textboxes

[pradeepjain]

<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num		= $('.clonedInput').length;
var newNum	= new Number(num + 1);

var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
	
newElem.children(':first').attr('id', 'name' + newNum,'').attr('name', 'name' + newNum,'');
				$('#input' + num).after(newElem);
				$('#btnDel').attr('disabled','');

				if (newNum == 100)
					$('#btnAdd').attr('disabled','disabled');
			});

			$('#btnDel').click(function() {
				var num	= $('.clonedInput').length;

				$('#input' + num).remove();
				$('#btnAdd').attr('disabled','');

				if (num-1 == 1)
					$('#btnDel').attr('disabled','disabled');
			});

			$('#btnDel').attr('disabled','disabled');
		});
	</script>
<?php print_r($_POST); ?>
<form name ='new' method='POST' action="<?php $_SERVER['PHP_SELF']?>">
<form id="myForm">
	<div id="input1" style="margin-bottom:4px;" class="clonedInput">
		Name: <input type="file" name="img1" id="img1" />
	</div>

	<div>
		<input type="button" id="btnAdd" value="add another name" />
		<input type="button" id="btnDel" value="remove name" />
	</div>
		<input type="submit"  value="submit" />
</form>

i have this jquery code which adds dynamic file textboxes..but 1 prob is that it copies the 1st element data to every box .say if it was an textbox .if 1st one had value "pradeep" then when i click on add element the second one also has default value "pradeep" in it ,how to prevent it.

[gits]

why not simply set the value attribute while cloning the node?

kind regards

[pradeepjain]

you mean to say like

newElem.children(':first').attr('id', 'name' + newNum'').attr('name', 'name' + newNum'').attr('value',' ');

I tried this but did not work.

[gits]

don't know jQuery very well ... i guess it should be more likely like:

$('#name' + newNum).val('')

[zorgi]

This should work:

newElem.children(':first').attr('id', 'name' + newNum,'').attr('name', 'name' + newNum,'').attr('value', '');

Without space here:
............att r('value', ' ');
............att r('value', '');

[pradeepjain]

how do i add a element like

<div class="clear"></div>

using jquery.

[zorgi]

There is more than one way to skin the cat, depending on your needs

$('#element).html("<div class='clear'></div>"); 
//OR
$('#element').prepend("<div class='clear'></div>"); 
//OR
$('#element').append("<div class='clear'></div>");

Where $('#element') is only imaginary wrapper I invented cos you didn't give us one. I am sure there is even more ways to do it but you should explain in more detail what you need.

[pradeepjain]

<select name='unit1' id='unit1' class="<?php echo $unit_class ?>">

i have to add class like this where in the class is build prior to it. how do i add this using jquery in

# newElem.children(':first').attr('id', 'unit' + newNum,'').attr('name', unit' + newNum,'');

[zorgi]

var myClass = $("#unit1").attr('class');
newElem.children(':first').attr('id', 'name' + newNum,'').attr('name', 'name' + newNum,'').attr('class', myClass);

[pradeepjain]

hey it should look like this

class="<?php echo $unit_class ?>

bcos i am building the class on fly.mean to say its a PHP variable.

[zorgi]

Even when you are "building the class on fly" your php code is executed before any browser output and class name should be available to jQuery. From what you told me I understood that you are trying to grab class name that was dynamically generated using php and assigned to your <select name='unit1' id='unit1' and than use it in your jQuery. That is exactly what my code does. Is that not what you wanted?

[pradeepjain]

if($error["unit1"]==TRUE){
$unit1_class = "valid-error";
$errors.="<li>Error  in units</li>";
}
<select name='unit1' id='unit1' class="<?php echo $unit_class ?>">

when the form is not submitted $unit_class will be null and when once submitted and it finds error in unit1 field its class gets changed. so it a php variable there. but the way u assigning in jquery it will not be a php variable na.

[zorgi]

Hmmmm I am confused. From your code I do not see what value is assigned to $unit_class. I do however see that $unit1_class gets value "valid-error" but $unit_class and $unit1_class is not the same. Is this just typing error?

[pradeepjain]

yup a small typing mistake.

[zorgi]

Ok

So if I understood correctly you want to assign different class to your form elements using jQuery only if there was an error on the form. Otherwise you want to use default class.
Try adding this:

var myClass = $("#unit1").attr('class');
if(myClass){newElem.children(':first').attr('class', myClass)}

before your

newElem.children(':first').attr('id', 'name' + newNum,'').attr('name', 'name' + newNum,'');

and it should work.