• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 72
  • Last Modified:

jQuery one function to process 3 clicks

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
Charles Baldo
Asked:
Charles Baldo
  • 3
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
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
 
Julian HansenCommented:
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
 
leakim971PluritechnicianCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Julian HansenCommented:
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
 
leakim971PluritechnicianCommented:
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
 
Charles BaldoSoftware DeveloperAuthor Commented:
Thanks all, learned

like solution with least code.
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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