Solved

jQuery one function to process 3 clicks

Posted on 2016-11-08
7
26 Views
Last Modified: 2016-11-09
I have 3 buttons that I want to do similar things with just use different files. But I cant seem to tell which button was pressed  .  

 <script type="text/javascript">         
 
     $(function () {

         var fileName;            

         $(".bclick").click(function () {		        //// the click happens on a class 
         
           if (elem.attr("id" == 'Button1')) {          /// Was button 1 the button that was clicked?
                 fileName = "2016-ESD-256.pdf";                
             }			 

             if (elem.attr("id" == 'Button2')) {       //// Was button 2 the button that was clicked?
                 fileName = "2016-ESD-257.pdf";                
             }		
	 
             if (elem.attr("id" == 'Button3')) {   //// Was button 3 the button that was clicked?
                 fileName = "2016-ESD-258.pdf";                
             }		
	 
             alert("Process File:  " + fileName);
			 ....
			 ....
			 .... do stuff
         });
     });
  </script>
	
<html>	
	<div class="buttonbox">
		 <input id="Button1"  type="button" class="btn2    bclick" value="Violation 1" />
		 <input id="Button2"  type="button" class="btn2    bclick" value="Violation 2" />
		 <input id="Button3"  type="button" class="btn2    bclick" value="Violation 3" />
	</div>
	
</html>

Open in new window

0
Comment
Question by:charlesbaldo
  • 3
  • 3
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41879784
Test page : https://jsfiddle.net/tuuge0un/
<!DOCTYPE html>
<html>  
<head
 <script type="text/javascript">         
 
     $(function () {

         var fileName;            

         $(".bclick").click(function () {		        //// the click happens on a class 
            switch($(this).attr("id")) {
                case "Button1": fileName = "2016-ESD-256.pdf";break;
                case "Button2": fileName = "2016-ESD-257.pdf";break;  
                case "Button3": fileName = "2016-ESD-258.pdf";break;                
                default:break;
            }
            alert("Process File:  " + fileName);
        });
     });
  </script>
</head>
<body>
	<div class="buttonbox">
		 <input id="Button1" type="button" class="btn2 bclick" value="Violation 1" />
		 <input id="Button2" type="button" class="btn2 bclick" value="Violation 2" />
		 <input id="Button3" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 250 total points
ID: 41880878
Why not make the filename a custom data attribute on the button?
HTML
    <div class="buttonbox">
       <input id="Button1"  type="button" class="btn2 bclick" value="Violation 1" data-pdf="2016-ESD-256.pdf" />
       <input id="Button2"  type="button" class="btn2 bclick" value="Violation 2" data-pdf="2016-ESD-257.pdf" />
       <input id="Button3"  type="button" class="btn2 bclick" value="Violation 3" data-pdf="2016-ESD-258.pdf" />
    </div>

Open in new window

jQuery
<script>
$(function() {
  $('.bclick').click(function(e) {
    e.preventDefault();
    alert('Process File: ' + $(this).data('pdf'));
  });
});
</script>

Open in new window

Working sample here

Edit: This puts the control in the markup leaving the jQuery generic.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 41880937
if you're able to store the filename in the html, you may also use the ID attribute to store filename
Test page : https://jsfiddle.net/tuuge0un/1/

<!DOCTYPE html>
<html>  
<head
 <script type="text/javascript">         
     $(function () {
         var fileName;            
         $(".bclick").click(function () {		        //// the click happens on a class 
            fileName = $(this).attr("id") + ".pdf"
            alert("Process File:  " + fileName);
        });
     });
  </script>
</head>
<body>
	<div class="buttonbox">
		 <input id="2016-ESD-256" type="button" class="btn2 bclick" value="Violation 1" />
		 <input id="2016-ESD-257" type="button" class="btn2 bclick" value="Violation 2" />
		 <input id="2016-ESD-258" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41880961
Not sure I would use the ID. The custom data attribute is there for a reason - storing custom data. It is possible to have filenames with spaces in them - which ID's don't support but data does. You can get around this with the %20 urlencode but that just looks messy.

What if you have two buttons on the same page that link to the same document? May not be the case here but it is a possibility - the constraint of uniqueness on ID would disqualify using ID as a place to store the document name.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41880997
If you can really play on the HTML, one more way :)
Test page : https://jsfiddle.net/tuuge0un/2/

<!DOCTYPE html>
<html>  
<head
<script>
   function process(fileName) {
        alert("Process File:  " + fileName);
   }
</script>
</head>
<body>
	<div class="buttonbox">
		 <input onclick="process('2016-ESD-256.jpg');" type="button" class="btn2 bclick" value="Violation 1" />
		 <input onclick="process('2016-ESD-257.jpg');" type="button" class="btn2 bclick" value="Violation 2" />
		 <input onclick="process('2016-ESD-258.jpg');" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
 

Author Comment

by:charlesbaldo
ID: 41881501
Thanks all, learned

like solution with least code.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41881660
You are welcome.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now