Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 161
  • Last Modified:

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

0
smfmetro10
Asked:
smfmetro10
  • 9
  • 6
  • 3
  • +1
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 9
  • 6
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now