Question : jquery move a set of form input fields

Hi there,

I am working on a project that uses the jQuery UI and the jQuery UI Layout plugin.

The jQuery UI accordion will not allow me to wrap a form around it .. resizing completely falls apart..
So.... I am hoping to just have form fields in a div and when I am ready to submit those inputs .. copy those input fields to a form .. hidden elswhere on the page and submit them from there.

So I am trying to put together some code to copy all of the fields inside of a div to a form elsewhere using jquery. Well, at least at this point, I am just trying to get some test code to copy ONE field only...

I'm in need of some help. :-D I am new to jQuery's clone() and appendTo() ...

I have some test code to clone and move a field from the div to the form ... but I am doing something wrong .. as two things are happening:

#1. I am changing the original form field ..
#2. After my function finishes, the new form field vanishes.

Please take a look at and run my sample test code and help me out with this??

The GO link does my testing. The LOOK link tries to look at the new field after it is created...

Thx Scott

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:

           
           
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
	<script>
		function copyit()
		{
			// the original field:
			var ref_Fld1 = $("#txt1");
			alert(ref_Fld1.val());
			
			//the form where I want to copy it to:
			var ref_Form = $("#my_form");
			alert(ref_Form.attr('id'));
			
			// I clone the field:
			ref_New = ref_Fld1.clone();
			
			// I look at its ID:
			alert(ref_New.attr('id'));
			
			//I change its id:
			ref_New.attr('id',"new_" + ref_New.attr('id'))
			ref_New.attr('name',ref_New.attr('id'));
			
			// I confirm the new id and the other parts of the field:
			alert(ref_New.attr('id'));			
			alert(ref_New.attr('type'));
			alert(ref_New.attr('value'));
			alert(ref_New.attr('name'));
			
			//I append it to the form .. which moves it there..and I can see it..
			ref_New.appendTo(ref_Form);
			
			//This where I get lost... here I change the value .. but I am changing the original one
			var new_ref = $("input:#txt1, ref_Form");
			new_ref.val("I changed the OLD one.  I wanted to change the NEW one?!");
			alert(new_ref.val());
			
			//And I notice that the cloned field then disappears after the function finishes???
		}
		
		function lookagain()
		{
			the_form = $("#my_form");
			alert($("input:#txt1, the_form").val());
		}
	</script>
	</head>
	<body>
		<br>
		<a href="" onClick="copyit();">Go</a><br>
		<a href="" onClick="lookagain();">Look</a><br>		
		<hr>
		<div id="my_fields">
			
			<br>
			Checkbox:<input id="chk1" name="chk1" type="checkbox"/>
			<br>
			Textbox:<input id="txt1" name="txt1" type="text" value="John Smith" /> 
			
		</div>
		
		<br><br>
		<hr>
		<form name="my_form" id="my_form">
			I want to copy the fields & values to here:
			<br>
		</form>
	</body>
</html>

           
         

Answer : jquery move a set of form input fields

Only by limiting them to a viewing application. If they have Crystal and access to the report files they are free to change them any way they wish.

There are viewers that provide encryption of the report file so the report file can only be used by a licensed viewer.
The users would not be able to open the reports in the Crystal application so long as you controlled the actual rpt files and only published the encrypted files.

mlmcc