asked on

Getting uncaught type error $ not defined and also Javascript function not defined

I have a form with an anchor tag called add another staff member, if you see the link below and go all the way down you will the anchor tag. When I click on it, its supposed add a block of elements so the a user can enter another staff details.

http://novice-here.coffeecup.com/forms/Membership-Application/

here is the code I am trying to use and it won't work. Getting uncaught type error $ not defined and also addStaffMember function not defined

<div id="staffMember_staffMemberNumber" style="display:none">
	<div class="fb-item fb-100-item-column" class="staffMember_staffMemberNumber" style="opacity: 1;">
		<div class="fb-html">
			<div class="staff-member-staffMemberNumber">
				<h3>
					Staff Member 4
				</h3>
			</div>
		</div>
	</div>
	<div class="fb-item fb-50-item-column" class="staffMember_staffMemberNumber" style="opacity: 1;">
		<div class="fb-grouplabel">
			 <label class="staff-member-staffMemberNumber" style="display: inline;">Full Name</label>
		</div>
		<div class="fb-input-box">
			<input name="staff-member-name-staffMemberNumber" class="staffMember_staffMemberNumber" type="text" maxlength="254" value="staff-member-name-value" autocomplete="off"></input>
		</div>
	</div>
	<div class="fb-item fb-50-item-column" class="staffMember_staffMemberNumber" style="opacity: 1;">
		<div class="fb-grouplabel">
			 <label class="staff-member-staffMemberNumber" style="display: inline;">Title</label>
		</div>
		<div class="fb-input-box">
			<input name="staff-member-title-staffMemberNumber" class="staffMember_staffMemberNumber" type="text" maxlength="254" value="staff-member-title-value" autocomplete="off"></input>
		</div>
	</div>
	<div class="fb-item fb-50-item-column" class="staffMember_staffMemberNumber" style="opacity: 1;">
		<div class="fb-grouplabel">
			 <label class="staff-member-staffMemberNumber" style="display: inline;">Email Address</label>
		</div>
		<div class="fb-input-box">
			<input name="staff-member-email-staffMemberNumber" class="staffMember_staffMemberNumber" type="email" maxlength="254" value="staff-member-email-value" autocomplete="off"></input>
		</div>
	</div>
	<div class="fb-item fb-50-item-column" class="staffMember_staffMemberNumber" style="opacity: 1;">
		<div class="fb-grouplabel">
			 <label class="staff-member-staffMemberNumber" style="display: inline;">Professional Role Within Firm</label>
		</div>
		<div class="fb-input-box">
			<input name="staff-member-role-staffMemberNumber" class="staffMember_staffMemberNumber" required type="text" maxlength="254" value="staff-member-role-value" autocomplete="off"></input>
		</div>
	</div>
	<div class="fb-item fb-100-item-column" style="height: 20px; min-height: 5px; opacity: 1;">
		<div class="fb-spacer">
			<div class="staffMember_staffMemberNumber">
			</div>
		</div>
	</div>
</div> <input type="hidden" value="4" name="staffMemberCount" id="staffMemberCount"> <a id="add-another" onclick="addStaffMember();" href="javascript:;"><strong>+ Add Another Staff Member</strong></a>

Open in new window

and the script is

<script>$(document).ready(function(){
  function addStaffMember() {
	// Increment the number of staff member sub-forms.
	var newStaffMemberNumber = parseInt($('#staffMemberCount').val()) + 1;
	
	// Update the counter in the form.
	$('#staffMemberCount').val('' + newStaffMemberNumber);
	
	// Clone the staffMember div.
	$staffMemberTemplate = $('#staffMember_staffMemberNumber');
		
	$cloned = $staffMemberTemplate.clone(true);

	// Fix the html for the next staff member count number.
	$cloned.html($cloned.html().replace('staffMemberNumber',newStaffMemberNumber,'g'));
	$cloned.html($cloned.html().replace('staff-member-name-value',''));
	$cloned.html($cloned.html().replace('staff-member-title-value',''));
	$cloned.html($cloned.html().replace('sstaff-member-email-value',''));
	$cloned.html($cloned.html().replace('staff-member-role-value',''));

	// Append the cloned HTML to the staffMemberList div.
	$('#staffMemberList').append($cloned.html());	
}

});</script>

Open in new window

What am I doing wrong. Thanks and appreciate it

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Michel Plungjan

To use jQuery you need to include the library.

You at least need to change the code in your head from

<!DOCTYPE HTML>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Start of the headers for CoffeeCup Web Form Builder -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    />

Open in new window

<!DOCTYPE HTML>
<html>
  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Start of the headers for CoffeeCup Web Form Builder -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"
    />
   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Open in new window

Then we can take it from there.

Tammu

ASKER

Thansk guys I have updated my page link and here is the new one as you can see I have included jQuery but its not working

http://dev.acec-nh.org/Membership-Application/Membership-Application.html

Thanks again

Julian Hansen

$('#staffMemberList').append($cloned.show());

Open in new window

Where is element staffMemberList in your document?

Your code is trying to append something to an element that does not exist.

Tammu

ASKER

Thanks