how do you call a function with a button onclick

Hi,
I have a function that works with a submit button but I need it to work with a button onclick event.  How do you name the function then call it with a button?

Thanks for the help!

<script>
	$(document).ready(function () {	
		$("div a").click(function () {
			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}	
		
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

		url = window.location.search.substring(1);
		urlvars = url.split('&');
		var recipID = '';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
		}
	});
</script>

  <p><a class="button" style="float: none;width:100px;" onclick="ga('send', 'event', 'mailto', 'Contact_Form_Submit', '<!--$formSubject-->');" href="javascript:submitPage()"><span>Submit</span></a></p>

Open in new window

smfmetro10Asked:
Who is Participating?
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.

GaryCommented:
<button class="mybutton">A Button</button>

$(".mybutton").click(function(){
    // code to execute
})

Open in new window

0
smfmetro10Author Commented:
right now the first line of the function starts with $("div a ").click(function () {

If I put a ".mybutton" in ("div a") so it becomes ("div a. mybutton") and add that class to the button it doesnt work.
0
GaryCommented:
Is this the "button" you are talking about?
 <p><a class="button" style="float: none;width:100px;" onclick="ga('send', 'event', 'mailto', 'Contact_Form_Submit', '<!--$formSubject-->');" href="javascript:submitPage()"><span>Submit</span></a></p>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
you could also just use the ID of your button to reference the function:

$("#idOfButton").click(function () {

Open in new window

0
smfmetro10Author Commented:
Yes
0
GaryCommented:
Then just use the following with your class of button as it is, you are targetting a div at the moment but there is no div in your code.

$("a.button").click(function () {
...
0
smfmetro10Author Commented:
This is my full code:

<script>
	$(document).ready(function () {	
		$("div a").click(function () {
			$("#ForMembers,#Coverage,#GenInfo").removeClass("active");
			$("#ForMembers a,#Coverage a,#GenInfo a").removeClass("active");
			$(this).closest("div a").addClass("active");

			var v = $(this).attr("id");

			$("#recipientId").val(v);

		
			lhash = $(this).attr("href").substring(1);

			if(lhash==""){
				lhash="6"
			}
	
			$("a[href='#"+lhash+"']").closest("div").addClass("active");

			$('.label_copy').hide();
			$('#div'+lhash).show();

			if($("#recipientId").val()==6 || $(" #recipientId").val()==7 || $("#recipientId").val()==8) {
				$("#contactForm").show();
			}
			else {
				$("#contactForm").hide ();
			}	
		
	
			$('.hide').click(function () {
				$('.label_copy').hide();
			});

		});

		url = window.location.search.substring(1);
		urlvars = url.split('&');
		var recipID = '';

		for (i = 0; i < urlvars.length; i++){  
			param = urlvars[i].split('=');  

			if (param[0] == "recipientId"){  
				$("#recipientId").val(param[1]) 
				recipID = param[1];
			}  
		}
		if (recipID !== '') {
			$("#div" + recipID).show();
			$("#" + recipID).addClass("active");
			$("#" + recipID).parent("div").addClass("active");
		}
	});
</script>


<style>
	a.active { 
		color:black;
	}
	.link.active { 
		color:black;
	}
	
	.ForMembers a {
		font-size:12px;
		font-family:Georgia, "Times New Roman", Times, serif;
	}

	.MemCovInfo.active {
		background-color:#CCC;
		width:685px;
	}

	.MemCovInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	.MemCovInfo a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	.MemCovInfo a:hover {
		color:#000;
	}

	.MemCovInfo a.active {
		color:#000;
	}

	.MemCovInfo:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	.show.active {
		color:#000;
	}

	#ForMembers {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:180px;
		height:95px;
		margin-top:-20px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;
	} 
	
	#ForMembers a {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size: 20px;
		cursor:pointer;
	}

	#ForMembers a:hover {
		color:#000;
	}

	#ForMembers a.active {
		color:#000;
	}

	#ForMembers.active {
		background-color:#CCC;
		color:#000;
	}
	
	#ForMembers:hover {
		background-color:#CCC;
		color:#000;
		cursor:pointer;
	}
	
	#Coverage {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:200px;
		height:95px;	
		margin-left:205px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}

	#Coverage:hover {
	background-color:#CCC;
	cursor:pointer;
	}

	#Coverage a  {	
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
		color:#FFF;
	}
	
	#Coverage a.active {
		color:#000;
	}

	#Coverage.active {
		background-color:#CCC;
	}

	#Coverage a:hover  {
		color:#000;
	}	

	#GenInfo {
		background-color:#417DBE;
		margin: 0px 0px 0px 0px;
		padding: 10px 15px 0px 5px;
		width:190px;
		height:95px;
		font-size:14px;
		margin-left:430px;
		margin-top:-105px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		text-align:left;	
	}
	
	#GenInfo:hover {
		background-color:#CCC;
		cursor:pointer;
	}	
	#GenInfo a  {
		color:#FFF;
		font-family:Georgia, "Times New Roman", Times, serif;
		font-size:20px;
	}

	#GenInfo a.active {
		color:#000;
	}

	#GenInfo.active {
		background-color:#CCC;
	}

	#GenInfo a:hover {
		color:#000;
	}

	
	
	.label_copy {
		display:none;
	}
</style>


<div id="ForMembers" class="MemCovInfo" style="margin-top:40px;" >
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Members</span><br/>
	
		<a id="1" href="#1" target="_self" class="link show" style="font-size:12px;">Report</a><br/>
		<a id="7" href="#7" target="_self" class="link show" style="font-size:12px;">Member </a><br/>
		<a id="8" href="#8" target="_self" class="link show" style="font-size:12px;">Patient </a>

	</div>

	<div id="Coverage" class="MemCovInfo">
	
		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">Coverage</span><br/>

		<a id="3" href="#3" target="_self" class="link show" style="font-size:12px;">Get a Quote</a><br/>
		<a id="4" href="#4" target="_self" class="link show" style="font-size:12px;">Apply for Coverage</a><br/>
		<a id="5" href="#5" target="_self" class="link show" style="font-size:12px;">Find an Agent</a>
	
	</div>
	
	<div id="GenInfo" class="MemCovInfo">

		<span style="font-size:20px; font-family:Georgia, 'Times New Roman', Times, serif; color:#FFF;">General Information</span><br/>
	
		<a id="6" href="#6" target="_self" class="link show" style="font-size:12px;">Contact us by email</a>
	
	</div>

	<div id="div1" class="label_copy">
		<h2>claim info</h2>
	</div>

	<div id="div7" class="label_copy">
		<h2>member info</h2>
	</div>

	<div id="div8" class="label_copy">
		<h2>Patient info</h2>
	</div>

	<div id="div3" class="label_copy">
		<h2>Quote info</h2>
	</div>

	<div id="div4" class="label_copy">
		<h2>Coverage info</h2>
	</div>

	<div id="div5" class="label_copy">
		<h2>Agent info</h2>
	</div>

	<div id="div6" class="label_copy">
		<h2>contact info</h2>
	</div>
<!--$recipientId -->

         <form id="contactForm" name="contactForm" method="post" encType="multipart/form-data" />
        <input type="hidden" value="WCM_SEND_FORM_EMAIL" name="IdcService" />
        <input type="hidden" value="WCM_EMAIL_CONTACT_TDC" name="tdcDynInclude" />
        <input type="hidden" value="<!--$ssServerRelativeSiteRoot-->ContactUs/Form/index.htm?formSubmitted=1" name="RedirectUrl">
        <input id="hdn_formaction" type="hidden" name="hdn_formaction" />
        <input type="hidden" id="recipientId" name="recipientId" value=""  />
        <input type="hidden" value="0" name="senderId" /> 

  		<!-- Subject ------------------->
    	<div style="margin-bottom:10px;">
    	  <label for="emailSubject">Subject:</label><br />
    	  <span id="sprytextfield1">
          <input class="text" maxlength="80" size="40" type="text" name="emailSubject" id="emailSubject" />
          <span class="textfieldRequiredMsg"><img style="vertical-align: middle;" src="<!--$ssWeblayoutUrl('ID_011307')-->" alt="Subject is required." /></span></span>
        </div>
        
        <!-- Email ------------------->
		<div style="margin-bottom:10px;">
        	<label for="emailAddress">E-mail:</label><br />
        	<span id="sprytextfield2">
        	<input class="text" size="30" type="text" name="emailAddress" id="emailAddress" maxlength="50" />
        	<span class="textfieldRequiredMsg"><img style="vertical-align: middle;" src="<!--$ssWeblayoutUrl('ID_011307')-->" alt="E-mail address is required." /></span>
    		<span class="textfieldInvalidFormatMsg"><img style="vertical-align: middle;" src="<!--$ssWeblayoutUrl('ID_011307')-->" alt="E-mail address is invalid." /></span></span>
        	</span>
        </div> 
        
        <!-- Message ------------------->
		<div style="margin-bottom:10px;">
        	<label for="txt_Message">Message:</label><br />
        	<span id="sprytextarea1">
        	<textarea id="txt_Message" name="txt_Message" rows="4" wrap="virtual" cols="42" maxlength="400"></textarea>
        	<span class="textareaRequiredMsg"><img style="vertical-align: middle;" src="<!--$ssWeblayoutUrl('ID_011307')-->" alt="Message is required." /></span>
        	</span>
        </div>

        <p><a class="button contact" style="float: none;width:100px;" onclick="ga('send', 'event', 'mailto', 'Contact_Form_Submit', '<!--$formSubject-->');" href="javascript:submitPage()"><span>Submit</span></a></p>
        <script type="text/javascript">
  			var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]});
			var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur"]});
			var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur"],isRequired:true});
		</script>
        </form>

Open in new window


Taking the "div" out of the function loses the active state of the div and links
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
give your <a> tag an id:

<p><a id="aSubmit" class="button" style="float: none;width:100px;" onclick="ga('send', 'event', 'mailto', 'Contact_Form_Submit', '<!--$formSubject-->');" href="javascript:submitPage()"><span>Submit</span></a></p>

Open in new window


and change your reference to:

$("#aSubmit").click(function () {

Open in new window

0
GaryCommented:
$("div a.button").click(function () {

Open in new window

0
GaryCommented:
What was wrong with your original code, I'm not understanding why you are trying to call the same function with different code but then still wanting it to work with the other anchor links
0
Ray PaseurCommented:
The .click() can be applied to lots of DOM elements - they do not have to be buttons or anchor tags.

The notation like this: $("#xyz").click(function () { has a couple of very important requirements.  First, it will be applied to the DOM element selected with id="xyz" and second, there must be only one DOM element with that id.
0
smfmetro10Author Commented:
I don't exactly understand your question.
Adding the ".button" loses the active state for the div and the links.  I would like to change the code so I don't have those anchor links because when you click on them, the page moves.
0
GaryCommented:
So just use

$("div a.button").click(function () {

Open in new window

0
GaryCommented:
I see now, leave your code as it is and just add a new function for that one link as I said in the very first comment.

$("a.button").click(function () {
,,, code for this link
})

Open in new window

0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
does my answer not work for you?
0
GaryCommented:
And for your original code just to stop it firing as well, change it to

http://jsfiddle.net/aegth4h1/

$("div a:not(.button)").click(function () {

Open in new window

0

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
smfmetro10Author Commented:
Ah!  So this is the code that I would like the button to trigger.

<script language="JavaScript" type="text/javascript">
			$(".button").click(function () {
				var SS= Spry.Widget.Form.validate(document.contactForm);
				document.forms["contactForm"].hdn_formaction.value="Submitted";
				document.forms["contactForm"].action="<!--$HttpCgiPath-->";
				if(SS==true){
				document.contactForm.submit();
				}
				//document.forms["contactForm"].submit()
				}
			</script>

 <p><a class="button" style="float: none;width:100px;" onclick="ga('send', 'event', 'mailto', 'Contact_Form_Submit', '<!--$formSubject-->');" href="javascript:submitPage()"><span>Submit</span></a></p>

Open in new window


But for some reason the button is not finding the value of the recipientId and throwing an error.
0
GaryCommented:
Change this
href="javascript:submitPage()"

to
href="#"

To get the recipientId just use
$("#recipientId").val()

Though I don't know what you are doing with it?
0
smfmetro10Author Commented:
Thank You!!!
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.