Adding Javascript capabilities a javascript created form

[SidSays]

Advice please. Have been googling this for a week or so without success.

I’ve created html forms which successfully employ javascript scripts to automatically verify content and, for certain number fields, automatically add up various taxes.

I would now like to build these characteristics into a forms page which allows users to add and/or takeaway various fields. The code I have put together to do this is a more sophisticated version of this:

	<div id="all"></div>
	
	<div id="container">
		<input type="button" id="btn1" value="1" onClick="btn1()" /> 
		<input type="button" id="btn2" value="2" onClick="btn2()" /> 
		<input type="button" id="btn3" value="Remove" onClick="btn3()" /> 
	</div></blockquote>

… but I do not know how to go about adding in the Javascript capabilities to the above code which I have already implemented in my one-off, standalone forms.

I suspect I’m going to have to get into the depths of AJAX, DOMS and Nodes, in which case, I think it’s probably beyond me.

Any advice would be appreciated.

[phdr]

Firstly, I recommend using a different method to dynamically add form fields.

Your current method has the html markup stored in strings inside the javascrpt code. A form will usually have at least one existing (set of) form field(s). This will result in duplicating the html markup in two places, causing more work to create, test, debug, and change or correct the markup.

If you place a

around the 1st set of form field(s) (and if your design doesn’t have a visible first set of form field(s), just make this

hidden), the add button can simply get the existing html from in that

and append it to a second

. This will let you produce the html markup in a single place, by just writing the html out normally, and the code will take care of copying it. The html may need to be modified from what you are doing now, to be general purpose, if it is using DOM id’s and numerical names.

As to how you would implement your validation and sum features in the dynamically added form fields, if you are using jquery class selectors in the code, it should work for the dynamically added fields too.

You would need to post your code showing how and what you are doing to get specific help if you are having any problems or errors.

[SidSays]

Hey… thanks for your reply.

Okay. Have done this, I think. The script I’m using is:

$(document).ready(function(){

				$("#btn0").click(function(){
					var i = 0;
					var original = document.getElementById('hide');
	   				var clone = original.cloneNode(true); // "deep" clone
    				clone.id = "hide" + ++i; // there can only be one element with an ID
  				$('#all').append(clone);
			});

			$("#btn4").click(function(){
    		$('.child:last').remove();
			});

		});
	</script>

	<div id="all"></div>
	
	<div id="container">
		<input type="button" id="btn0" value="0" onClick="btn0()" /> 
		<input type="button" id="btn4" value="remove" onClick="btn4()" /> 
	</div></blockquote>

It’s successfully replicating or duplicating the following

which I’ve called ‘hide’.

% VAT Rate

										<label>&#163; VAT on Purchase
			        				<input type="number" 
  					  				 name="vat_y" onFocus="startCalc();" onBlur="stopCalc();" 
		 										 value="<?php if(isset($vat_y)) { echo $vat_y; } else { echo '0'; } ?>" />
		 								</label>

	  	      				<label>&#163; Purchase Price Subtotal
			  	      			<input type="number" name="subtotal_y"
	  				  				onFocus="startCalc1();" onBlur="stopCalc1();" 
	  				  				value="<?php if(isset($subtotal_y)) { echo $subtotal_y; } else { echo '0'; } ?>" />
    							</label>
		  	      			
		  	      			<label>&#163; Total Payment Made
			  	      			<input type="number" name="total_y"
  	  							onFocus="startCalc2();" onBlur="stopCalc2();" 
	 										value="<?php if(isset($total_y)) { echo $total_y; } else { echo '0'; } ?>" />
    							</label>

		</div>
	</div></blockquote>		
	But... I cannot get the javascript to run (no matter where I put it.... code here:
	
	
	<blockquote><script type='text/javascript' >
											function startCalc(){
												interval = setInterval("calc()",1);
											}
											function calc(){
												one = document.autoSumForm.vat_y.value;
												two = document.autoSumForm.vat_rate.value;
											document.autoSumForm.subtotal_y.value = (one/(two/100)).toFixed(2);
											document.autoSumForm.total_y.value = ((one/(two/100)) + (one)).toFixed(2);
											}
											function stopCalc(){
												clearInterval(interval);
											}
										</script>

    							<script type='text/javascript' >
											function startCalc1(){
												interval = setInterval("calc1()",1);
											}
											function calc1(){
												one = document.autoSumForm.subtotal_y.value;
												two = document.autoSumForm.vat_rate.value;
											document.autoSumForm.vat_y.value = (one * (two/100)).toFixed(2);
											document.autoSumForm.total_y.value = (one*(1+(two/100))).toFixed(2);
											}
											function stopCalc1(){
												clearInterval(interval);
											}
										</script>

				   					<script type='text/javascript' >
											function startCalc2(){
												interval = setInterval("calc2()",1);
											}
											function calc2(){
												one = document.autoSumForm.total_y.value;
											two = document.autoSumForm.vat_rate.value;
											document.autoSumForm.vat_y.value = (one-(one/(1+(two/100)))).toFixed(2);
											document.autoSumForm.subtotal_y.value = (one/(1+(two/100))).toFixed(2);
											}
											function stopCalc2(){
												clearInterval(interval);
											}
										</script></blockquote>