How to create generic jquery function for each input

Question

I have the following html code that works as is: (I've tried the two answers given below but neither of them work any other suggestions would be appreciated)

<html>
   <head>
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /> 
      <script src="http://code.jquery.com/jquery-1.7.1.js"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script> 
      <script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script>  
   </head>

   <body>
      <script type="text/javascript">
         $(function() 
         {
            $('#timepickr-start:eq(0)').timepickr
               ({
                  convention: 12,
                  hoverIntent: false
               })
         });
      </script>
      <script type="text/javascript">
         $(function() 
         {
            $('#timepickr-end:eq(0)').timepickr
               ({
                  convention: 12,
                  hoverIntent: false
               })
         });
      </script>

      <div>
         <input id="timepickr-start" name='start' /> 
      </div>
      <br>
      <div>
         <input id="timepickr-end" name='end' />
      </div>

   </body>
</html>

Is there a way to have just one function? I'm using php and getting back $_POST['start'] and $_POST['end']. It's not much of a problem when I have only two time input fields but on some pages I have 6 or 8.

Adam Baranyai · Accepted Answer · 2015-01-10 17:14:44Z

3

If you would like to initialize multiple timepicker instances with a single javascript function, you could add a class, let's say timepickr, to each instance to initialize, and use the folowing function:

<script type="text/javascript">
     $(function() 
     {
        $(".timepickr").each(function() {
          $(this).timepickr({
              convention: 12,
              hoverIntent: false
           });
        });
     });
  </script>

answered Jan 10, 2015 at 17:14

Adam Baranyai

3,8954 gold badges38 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DCR Over a year ago

Hi, thanks for the suggestion but it didn't work. Not sure how to proceed. btw, the example above was missing a }) but even with that added in it doesn't work

Aditya · Accepted Answer · 2015-01-10 17:23:06Z

2

There are several ways in which this can be achieved.

1.Create a common class for all the required fields and add the function to that class like this:

$('.classname').timepickr({
      convention: 12,
      hoverIntent: false
});

OR

2.Use the attribute starting with selector

$("input[id^='timepickr']").timepickr({
     convention: 12,
     hoverIntent: false
});

The second method could prove more feasible in case you have several such input fields and you don't wanna bother adding a class to each field.

answered Jan 10, 2015 at 17:23

Aditya

1,2615 gold badges21 silver badges32 bronze badges

3 Comments

DCR Over a year ago

I tried the first way with the class name and that works for the first input but not any of the subsequent inputs

DCR Over a year ago

On your second method is that part of the function as in: $(function() { $("input[id^='timepickr']").timepickr ({ convention: 12, hoverIntent: false }) }); or something else - I need to pass in :eq(0) so I don't think this will work either

DCR Over a year ago

My Apologies! The first method you suggested works like a charm. Thanks for your help

Collectives™ on Stack Overflow

How to create generic jquery function for each input

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related