Solved

jQuery one function to process 3 clicks

Posted on 2016-11-08
7
63 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:Charles Baldo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 58

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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 58

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:Charles Baldo
ID: 41881501
Thanks all, learned

like solution with least code.
0
 
LVL 58

Expert Comment

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

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

624 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