asked on

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

Gary

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

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

Open in new window

smfmetro10

ASKER

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.

Gary

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

Big Monty

you could also just use the ID of your button to reference the function:

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

Open in new window

smfmetro10

ASKER

Yes

Gary

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 () {
...

smfmetro10

ASKER

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

Big Monty

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

Gary

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

Open in new window

Gary

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

Ray Paseur

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.

smfmetro10

ASKER

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.

Gary

So just use

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

Open in new window

Gary

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

Big Monty

does my answer not work for you?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

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

Start Free Trial

smfmetro10

ASKER

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.

Gary

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?

smfmetro10

ASKER

Thank You!!!