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
LVL 2
niceoneishereAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
$(document).ready(function(){

Open in new window

Implies you are using jQuery - have you included the jquery library?

I would also handle the event the jQuery way rather than an onclick so
<a id="add-another" href="javascript:;"><strong>+ Add Another Staff Member</strong></a>

Open in new window

<script>
$(document).ready(function(){
	$('#add-another').on('click', function(e) {
		e.preventDefault();
		// 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);
		$cloned.attr('id', 'staffMember_staffMemberNumber_'+ newStaffMemberNumber);

		// 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.show());
		return false;
	});
});
</script>

Open in new window

Note the use of the e.preventDefault to prevent your page navigating away - not really a risk in this case because of the way you have coded the <a> but good practice.

When cloning an element with an id you need to change the id to ensure it is unique on the page.

Your template has style display:none - which means if you add it to the DOM you will need to .show() it or else it won't be visible

Finally, when you append the cloned element you don't need to invoke the .html() method - you can just append the element.

Working sample here

There is still some work to be done to modify the content of the cloned content - it is not working as you expect but I will leave that for you to work with.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Michel PlungjanIT ExpertCommented:
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


to
<!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.
niceoneishereAuthor Commented:
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 HansenCommented:
$('#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.
niceoneishereAuthor Commented:
Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.