AJAX

Call a jquery (javascript) function from multiple forms on a single page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Nov 2008

Posts: 73

Reputation: filch is an unknown quantity at this point

Solved Threads: 1

filch

Offline

Junior Poster in Training

Call a jquery (javascript) function from multiple forms on a single page

Oct 20th, 2009

Hi, I am in a real need to get this going quickly and have run into a bit of a stumbling block. Here is what I am trying to do. I am creating a Paypal Add to Cart page for several products. I have this working for a single button form. The main script is:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
		$(function(){
			// start a counter for new row IDs
			// by setting it to the number
			// of existing rows
			var newRowNum = 2;
 
			// bind a click event to the "Add" link
			$('#addnew').click(function(){
				// increment the counter
				newRowNum += 1;
 
				// get the entire "Add" row --
				// "this" refers to the clicked element
				// and "parent" moves the selection up
				// to the parent node in the DOM
				var addRow = $(this).parent().parent();
 
				// copy the entire row from the DOM
				// with "clone"
				var newRow = addRow.clone();
 
				// set the values of the inputs
				// in the "Add" row to empty strings
				//$('input', addRow).val('');
				//$('name', addRow).val('os' + newRowNum);
 
				// replace the HTML for the "Add" link 
				// with the new row number
				$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
 
				// insert a remove link in the last cell
				$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
 
				// loop through the inputs in the new row
				// and update the ID and name attributes
				/*$('td:first-child.next-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newID).attr('name','os' + newID);
				});*/
				/*$('td:second-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newRowNum).attr('name','os' + newRowNum);
				});*/
				$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
				$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );
 
				//$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">');
 
				// insert the new row into the table
				// "before" the Add row
				addRow.before(newRow);
				document.tp01.quantity.value = newRowNum-1;
				// add the remove function to the new row
				$('a.remove', newRow).click(function(){
					$(this).parent().parent().remove();
					return false;				
				});
 
				// prevent the default click
				return false;
			});
		});
		</script>
<script type="text/javascript">
		$(function(){
			// start a counter for new row IDs
			// by setting it to the number
			// of existing rows
			var newRowNum = 2;
			
			// bind a click event to the "Add" link
			$('#addnew').click(function(){
				// increment the counter
				newRowNum += 1;
						
				// get the entire "Add" row --
				// "this" refers to the clicked element
				// and "parent" moves the selection up
				// to the parent node in the DOM
				var addRow = $(this).parent().parent();
				
				// copy the entire row from the DOM
				// with "clone"
				var newRow = addRow.clone();
				
				// set the values of the inputs
				// in the "Add" row to empty strings
				//$('input', addRow).val('');
				//$('name', addRow).val('os' + newRowNum);
				
				// replace the HTML for the "Add" link 
				// with the new row number
				$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
				
				// insert a remove link in the last cell
				$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
				
				// loop through the inputs in the new row
				// and update the ID and name attributes
				/*$('td:first-child.next-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newID).attr('name','os' + newID);
				});*/
				/*$('td:second-child.input', newRow).each(function(i){
					var newID = newRowNum;
					$(this).attr('id','os' + newRowNum).attr('name','os' + newRowNum);
				});*/
				$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
				$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );

				//$('td:first-child.next', newRow).html('<input type="text" id="os' + newRowNum + '" name="os' + newRowNum + '" value="">');
				
				// insert the new row into the table
				// "before" the Add row
				addRow.before(newRow);
				document.tp01.quantity.value = newRowNum-1;
				// add the remove function to the new row
				$('a.remove', newRow).click(function(){
					$(this).parent().parent().remove();
					return false;				
				});
			
				// prevent the default click
				return false;
			});
		});
		</script>

This is called from a text link in the page as follows:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

Each successive click on the Add link adds a new row to the table and allows another email address to be added to the form. The trick now is that I need to add multiple Paypal button forms to the page that re-uses this function and perhaps each form calls this function with something like:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew2" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew2" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

and

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew3" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />
<input type="hidden" name="on2" value="Email Address 1"><a id="addnew3" href="">Add</a></td><td><input name="os2" type="text" id="os2" value="" size="24" maxlength="60" />

etc.

Can anyone guide me as to how to amend the function to accept calls from different links like this so that the new rows are added or removed from the appropriate form on the page? I have tried the following:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<script type="text/javascript">
	$(function(){
		// start a counter for new row IDs
		// by setting it to the number
		// of existing rows
		var newRowNum = 2;
		var bindLink = function(linkSelector) {
 
		// bind a click event to the "Add" link
		$(linkSelector).click(function() {
			// increment the counter
			newRowNum += 1;
 
			// get the entire "Add" row --
			// "this" refers to the clicked element
			// and "parent" moves the selection up
			// to the parent node in the DOM
			var addRow = $(this).parent().parent();
 
			// copy the entire row from the DOM
			// with "clone"
			var newRow = addRow.clone();
 
			// set the values of the inputs
			// in the "Add" row to empty strings
			//$('input', addRow).val('');
			//$('name', addRow).val('os' + newRowNum);
 
			// replace the HTML for the "Add" link 
			// with the new row number
			$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
 
			// insert a remove link in the last cell
			$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
 
			// loop through the inputs in the new row
			// and update the ID and name attributes
 
			$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
			$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );
 
			// insert the new row into the table
			// "before" the Add row
			addRow.before(newRow);
			document.tp01.quantity.value = newRowNum-1;
			// add the remove function to the new row
			$('a.remove', newRow).click(function(){
				$(this).parent().parent().remove();
				return false;				
			});
 
			// prevent the default click
			return false;
		});
		};
	});
</script>
<script type="text/javascript">
	$(function(){
		// start a counter for new row IDs
		// by setting it to the number
		// of existing rows
		var newRowNum = 2;
		var bindLink = function(linkSelector) {

		// bind a click event to the "Add" link
		$(linkSelector).click(function() {
			// increment the counter
			newRowNum += 1;
						
			// get the entire "Add" row --
			// "this" refers to the clicked element
			// and "parent" moves the selection up
			// to the parent node in the DOM
			var addRow = $(this).parent().parent();
				
			// copy the entire row from the DOM
			// with "clone"
			var newRow = addRow.clone();
				
			// set the values of the inputs
			// in the "Add" row to empty strings
			//$('input', addRow).val('');
			//$('name', addRow).val('os' + newRowNum);
				
			// replace the HTML for the "Add" link 
			// with the new row number
			$('td:first-child', newRow).html('<input type="hidden" name="on' + newRowNum + '" value="Email Address ' + (newRowNum - 1) + '">Recipient');
				
			// insert a remove link in the last cell
			$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
				
			// loop through the inputs in the new row
			// and update the ID and name attributes
				
			$('input:hidden', newRow).attr('id','on' + newRowNum ).attr('name','on' + newRowNum );
			$('input:text', newRow).attr('id','os' + newRowNum ).attr('name','os' + newRowNum );
				
			// insert the new row into the table
			// "before" the Add row
			addRow.before(newRow);
			document.tp01.quantity.value = newRowNum-1;
			// add the remove function to the new row
			$('a.remove', newRow).click(function(){
				$(this).parent().parent().remove();
				return false;				
			});
			
			// prevent the default click
			return false;
		});
		};
	});
</script>

called with:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
 <input type="hidden" name="on2" value="Email Address 1">
          <a id="addnew2" href="" onclick="bindLink('addnew2')">Add</a>
 <input type="hidden" name="on2" value="Email Address 1">
          <a id="addnew2" href="" onclick="bindLink('addnew2')">Add</a>

as suggested by someone else but does not work.

Thanks for any help.

Dave

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes