jQuery Forum

Function is called when i click on input fields called Hour or Minute
 

1. <!-- table 24 hours -->
2. <table width="33%" height="73" border="0" cellspacing="1" id="hour">
3. <tr>
4.    <td>01</th>
5.    <td>02</th>
6.    <td>03</th>
7.    <td>04</th>
8.    <td>05</th>
9.    <td>06</th>
10.    <td>07</th>
11.    <td>08</th>
12.    <td>09</th>
13.    <td>10</th>
14.    <td>11</th>
15.    <td>12</th>
16.   </tr>
17.   <tr>
18.     <td height="34">13</td>
19.     <td>14</td>
20.     <td>15</td>
21.     <td>16</td>
22.     <td>17</td>
23.     <td>18</td>
24.     <td>19</td>
25.     <td>20</td>
26.     <td>21</td>
27.     <td>22</td>
28.     <td>23</td>
29.     <td>24</td>
30.   </tr>
31. </table>
32. 
    
33. <table width="214" height="54" border="0" cellpadding="1" cellspacing="2" id="min">
34. <tr>
35. <td>10</td>
36.  <td>15</td>
37.  <td>20</td>
38. <td>25</td>
39. <td>30</td>
40. <td>35</td>
41. <td>40</td>
42. <td>45</td>
43. <td>50</td>
44. <td>55</td>
45. <td>00
46. </td>
47.   </tr>
48. </table>
49. <script>
50. // that's looks nice ( for me :-) )
51. $(document).ready(function(){
52. $('td',this).mouseover(function(){
53. $(this).addClass('hover'); 
54. });
55. $('td',this).mouseout(function(){
56. $(this).removeClass('hover');
57. });
58. 
    
59. // but this looks ugly
60. // BELOW LAME PART OF CODE :(
61. // table HOUR ....
62. $('#hour td').click(function() {
63. $('#input_HOUR').val($(this).text()); // get the value and paste into INPUT field
64. $('# hour').fadeOut();
65. });
66. 
    
67. // ... and table MIN ....
68. $('#min td').click(function() {
69. $('#input_MIN').val($(this).text()); // get the value and paste into INPUT field
70. $('#minuty').fadeOut();
71. });
72. // whats clicked ... Hour - maybe MIN ?
73. $('# input_HOUR ').click(function(){
74. $('#hour').toggle();
75. if($('#hour').is(':hidden')){
76.   $('#hour').fadein(1000);
77. } else {
78.   $('#hour').fadeout(1000);
79. }
80. });
81. // same code .... but different INPUT :/
82. $('# input_MIN ').click(function(){
83. $('#min').toggle();
84. if($('#min').is(':hidden')){
85.   $('#min').fadein(1000);
86. } else {
87.   $('#min').fadeout(1000);
88. }
89.  });
90. });
91. </script>

My question is - how to do not DRY ( Hour and MIN ) ?

Im rookie  in jQuery and i have a big problem ( for me )

How can i check multiple part value and price values in the table ?

Also how to code it to show Error if value = 0 and OK if value = greater than 0 ?

I need to check MPArts[][part] and MPArts[][price] values ( almost 1 thousand positions ) and a need to do this without page refreshing by viewing error message )

3. <form method="post" action="" name="AllParts">
4. <table width="200" border="1">
5.   <tr>
6.     <td>Part</td>
7.     <td>Price</td>
8.   </tr>
9.   <tr>
10.     <td><input name="MPArts[][part]" class="Part" type="text" value="A-0891289078921" /></td>
11.     <td><input name="MPArts[][price]" class="Price" type="number" value="12,00"/></td> 
12. <!-- value >0 = OK -->
13.   </tr>
14.   <tr>
15.     <td><input name="MPArts[][part]" class="Part" type="text" value="A-089128902212" /></td>
16.     <td><input name="MPArts[][price]" class="Price" type="number" value="00,00"/></td>
17. <!-- value <=0 ERROR -->
18.   </tr>
19. </table>
20. <input type="submit" name="button" id="button" value="Next">
21. </form>

Thx ALL !