Jquery why class must be made empty?

Dear Paul,
I have done the changes according to your suggestions. My problem now is that is that each time I add the row the data from the first row get copied into the new rows. So I tried this function prot.find(“input[[name=‘col4’]”).val(); and prot.find(“.dOnly”).val(“”); to clear for one column both not working. Then I also wanted to restrict the col4 to just decimal via this method jQuery(‘.dOnly’).keyup(function () also not working. Can you see what are my mistakes here?

<html>
<head>
<script src=“http://code.jquery.com/jquery-1.5.1.min.js”></script>
<script>
$(document).ready(function() {
var id = 0;

		// Add button functionality
		$("table.dynatable button.add").click(function() {
			id++;
			var master = $(this).parents("table.dynatable");
			
			// Get a new row based on the prototype row
			var prot = master.find(".prototype").clone();
			prot.attr("class", "")
			prot.find(".id").attr("value", id);
			//prot.find("input[[name='col4[]']").val();	
			prot.find(".dOnly").val("");	
    

			master.find("tbody").append(prot);
			return false;
		});
		
		// Remove button functionality
		$("table.dynatable button.remove").live("click", function() {
			$(this).parents("tr").remove();
			
		});
		
		jQuery('.dOnly').keyup(function () 
		{     
			 this.value = this.value.replace(/[^0-9\\.]/g,''); 
		}); 
		
		
	});
	&lt;/script&gt;
	&lt;style&gt;
		.dynatable {
			border: solid 1px #000; 
			border-collapse: collapse;
		}
		.dynatable th,
		.dynatable td {
			background-color:#ccc; 
			font-size:14px;
			font-color:#ffffff;
			font-family:Calibri;
		}
		.dynatable .prototype {
			
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;form action="&lt;?=$_SERVER['PHP_SELF']?&gt;" method="post" name="form1" enctype="multipart/form-data" id=form1 &gt;
	&lt;table class="dynatable"&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th&gt;ID&lt;/th&gt;
				&lt;th&gt;Name&lt;/th&gt;
				&lt;th&gt;Col 3&lt;/th&gt;
				&lt;th&gt;Col 4&lt;/th&gt;
				&lt;th&gt;&lt;button class="add"&gt;Add&lt;/button&gt;&lt;/th&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr class="prototype"&gt;
				&lt;td&gt;&lt;input type="text" name="id[]" value="0" class="id" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="name[]" value="" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="col4[]" value="" class="dOnly" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="col3[]" value="" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;button class="remove"&gt;Remove&lt;/button&gt;
			&lt;/tr&gt;
			
	&lt;/table&gt;
	&lt;input class="buttons" type="Submit" name="Submit" value="Submit"&gt;
&lt;/form&gt;
&lt;/body&gt;

</html>

Thanks for the clarification. I tend to create the array in the language I use, not directly in the HTML.

Still his code doesn’t make any sense for me. The names he uses in each input field are different.

@newtomysql: I’m sorry I haven’t helped you to sort out your problem. I didn’t expand in my answer yesterday because I was having a quite tough day and it seems that today is just like that (still not finish) but I promise that if tomorrow (around this time) you didn’t figure out I will give it a try.

Don’t know if I’ll get the solution but I will try :slight_smile:

Dear Molona,
Thank you for the help. Anyway see if you can help me with my post #21 for the text box to be just restricted to decimal via jquery.

You can use a similar technique to the one that’s used to change the id value.

First find all the inputs in prot and clear their value, then set the id.

highlight=“javascript”]
prot.find(“input”).attr(“value”, ‘’);
prot.find(“.id”).attr(“value”, id);




[quote="newtomysql,post:21,topic:80552"]
Then I also wanted to restrict the col4 to just decimal via this method jQuery('.dOnly').keyup(function () also not working. Can you see what are my mistakes here?
[/quote]


That looks right to me. Are you sure that your jQuery library is properly loaded?

Dear Paul,
So now you just want me to add this is it thus this will clear all input is it? Then how to determine if my jquery library is loaded properly or not?

prot.find(“input”).attr(“value”, ‘’);
prot.find(“.id”).attr(“value”, id);

What code are you using to load the jquery library?

Dear Paul,
I am calling it like this <script src=“http://code.jquery.com/jquery-1.5.1.min.js”></script>. Anything wrong here?

That seems to be fine. If you can link us to a sample web page that demonstrates the problem, that will be the best way for us to experience any remaining issues that there may be.

Dear Paul,
Here is the link http://183.78.169.54/v3/dynamicrow.php. Ok I have tested now ready but the funny part the number thing works only for the first row not the next rows. Another thing I notice when I remove all rows then when I try to add I cant add anymore. Can you see the link please.

You’ll want to use a live event, as you already have for the remove button. That way jQuery will continue to monitor things, and attach the event on to the new row when it’s added.


jQuery('.dOnly').live('keyup', function () {

When removing, you need to check if there is more than 1 row, and remove only if there is.


if ($('.dynatable tbody tr').length > 1) {
    $(this).parents("tr").remove();
}

Dear Paul,
You can visit my site again. The problem I can not remove now after adding the new code I press the button no action. The number function works now the problem now how to control where the user can now put two or more decimal points.

You seem to have deleted the click event for the remove button. That still needs to be there.

The remove code that I posted in my previous post, that needs to go inside the function that’s attached to the click event for the remove button.

Dear Paul,
You are correct now it works fine but why must I check till is more than 1 so must keep it that way and cannot delete all is it ? So how about the decimal problem do you have any suggestion. Another question is that now when I press the submit button,I want to check each column to make sure it is fill if not I want to give an error message below what best method you suggest for that too.

The problem you had is that it was possible to remove all of the rows, resulting in not being able to add, due to not having any rows to clone.

There are a couple of different solutions to that, but the one that I went with is to prevent one of the causes of the problem (removing every single row) from happening at all. That’s prevented by ensuring that you cannot remove unless there is more than one row on the page.

We can now move forward from there to complete the solution to the problem. Currently the add button copies row 0, and if that one is deleted then the add button has nothing to copy.

So the next piece from here is to allow the add button to copy from just the first row, regardless of which one that happens to be.

Currently the code gets the prototype from one specific row.


var prot = master.find(".prototype").clone();
prot.attr("class", "");

Since the values are cleared from the cloned row, we don’t have to restrict ourselves to that one particular row. We can clone from any row, such as the first one that happens to be there.


var prot = master.find("tbody tr:first").clone();
prot.removeClass('prototype');

I would like to hold that one aside until the add/remove is working properly.

Dear Paul,
I have done accordingly and yes it works fine it copies from any of the last row. So anything else I must do to do strengthen it. Thank you.

Nothing that seems obvious. Now, on to the validation.

That is most easily performed by using the jQuery validation plugin. Have a look at the [url=“http://jquery.bassistance.de/validate/demo/”]demo page source code for a good idea of how it works.

Dear Paul,
Ok give me some time to learn up the jquery plugin. Then I will get back to you. Actually I am a bit confuse jquery by itself is provided by whom a spefic party is it? Will the plugin we import will conflict with the jquery script itself? How about the decimal control any solution for that ?

No conflict will occur.

Dear Paul,
Below is my latest code. I am stuck ok I have import this first <script src=“jquery.validate.js”></script> am I correct? Then I add this $(“#form1”).validate();
so next I am stuck cause in my case the input text names are dynamic so how to set the rules? Next thing in this plugin how does the error message is set and how is set to appear? Thank you.

<html>
<head>
<script src=“http://code.jquery.com/jquery-1.5.1.min.js”></script>
<script src=“jquery.validate.js”></script>
<script>
$(document).ready(function() {
var id = 0;

		// Add button functionality
		$("table.dynatable button.add").click(function() {
			id++;
			var master = $(this).parents("table.dynatable");
			
			// Get a new row based on the prototype row
			//var prot = master.find(".prototype").clone();
			var prot = master.find("tbody tr:first").clone();
			prot.attr("class", "")
			prot.find("input").attr("value", '');
    prot.find(".id").attr("value", id);
    
			master.find("tbody").append(prot);
			return false;
		});
		
		// Remove button functionality
		$("table.dynatable button.remove").live("click", function() {
			if ($('.dynatable tbody tr').length &gt; 1) {
       $(this).parents("tr").remove();
     }
			
		});
		
		jQuery('.dOnly').live('keyup', function () 
		{     
			 this.value = this.value.replace(/[^0-9\\.]/g,''); 
		}); 
		
		$("#form1").validate();
	});
	&lt;/script&gt;
	&lt;style&gt;
		.dynatable {
			border: solid 1px #000; 
			border-collapse: collapse;
		}
		.dynatable th,
		.dynatable td {
			background-color:#ccc; 
			font-size:14px;
			font-color:#ffffff;
			font-family:Calibri;
		}
		.dynatable .prototype {
			
		}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;form action="&lt;?=$_SERVER['PHP_SELF']?&gt;" method="post" name="form1" enctype="multipart/form-data" id=form1 &gt;
	&lt;table class="dynatable"&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th&gt;ID&lt;/th&gt;
				&lt;th&gt;Name&lt;/th&gt;
				&lt;th&gt;Col 3&lt;/th&gt;
				&lt;th&gt;Col 4&lt;/th&gt;
				&lt;th&gt;&lt;button class="add"&gt;Add&lt;/button&gt;&lt;/th&gt;
			&lt;/tr&gt;
		&lt;/thead&gt;
		&lt;tbody&gt;
			&lt;tr class="prototype"&gt;
				&lt;td&gt;&lt;input type="text" name="id[]" value="0" class="id" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="name[]" value="" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="col4[]" value="" class="dOnly" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;input type="text" name="col3[]" value="" /&gt;&lt;/td&gt;
				&lt;td&gt;&lt;button class="remove"&gt;Remove&lt;/button&gt;
			&lt;/tr&gt;
			
	&lt;/table&gt;
	&lt;input class="buttons" type="Submit" name="Submit" value="Submit"&gt;
&lt;/form&gt;
&lt;/body&gt;

</html>

That’s not a problem

There are two different ways to set them, as are demonstrated on the validation demo page.

If your validation requirements can be achieved with just the built-in validation rules, you can use them as metadata on the form field itself. Those will be cloned when you add your new rows.


<input id="cname" name="name" class="required" minlength="2">

You can also set the rules by scripting, as you can see in the source code of the validation demo page.

The built-in rules all have their own default error messages. Here is where they are defined in the validate plugin:


messages: {
	required: "This field is required.",
	remote: "Please fix this field.",
	email: "Please enter a valid email address.",
	url: "Please enter a valid URL.",
	date: "Please enter a valid date.",
	dateISO: "Please enter a valid date (ISO).",
	number: "Please enter a valid number.",
	digits: "Please enter only digits.",
	creditcard: "Please enter a valid credit card number.",
	equalTo: "Please enter the same value again.",
	accept: "Please enter a value with a valid extension.",
	maxlength: $.validator.format("Please enter no more than {0} characters."),
	minlength: $.validator.format("Please enter at least {0} characters."),
	rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
	range: $.validator.format("Please enter a value between {0} and {1}."),
	max: $.validator.format("Please enter a value less than or equal to {0}."),
	min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

You can also set the error messages to whatever you like, which can also be easily see in the validation demo page source code.

The error messages appear in a label with a class name of “error”, that is placed immediately after the input field. As you can see on the the validation demo page, the error message can be set to appear under the input field, or to the right of the input field. It just depends on how you choose to style your page.

All in all, I’ve found the validation demo page to be very useful in demonstrating how it all works.