Posted By

mavrikicecool on 09/13/11


Tagged


Versions (?)

DHTML


 / Published in: JavaScript
 

Dynamic HTML with click based event

  1. <table width="100%" height="60%" border=0>
  2. <tr>
  3. <td>
  4. <head>
  5. {literal}
  6. <script language="javascript" src="css/rankcalc.js"></script>
  7. <script language="javascript">
  8.  
  9. function check1()
  10. {
  11. var taskslen= document.getElementById('itemcount').value;
  12. //var taskslen = taskstbl.rows.length;
  13.  
  14. // alert(taskslen);
  15.  
  16. for (var b = 0; b < taskslen ; b++)
  17. {
  18. var js_prat_desc = ("prat_desc".concat(b));
  19. var js_outcome_id = ("outcome_id".concat(b));
  20. var js_critical_id = ("critical_id".concat(b));
  21.  
  22.  
  23. if (document.getElementById(js_prat_desc).value == "")
  24. {
  25. alert("Enter task");
  26. document.getElementById(js_prat_desc).focus();
  27. return false;
  28. }
  29. if (document.getElementById(js_outcome_id).value == "--")
  30. {
  31. alert("Select outcome");
  32. document.getElementById(js_outcome_id).focus();
  33. return false;
  34. }
  35. if (document.getElementById(js_critical_id).value == "--")
  36. {
  37. alert("Select Criticality");
  38. document.getElementById(js_critical_id).focus();
  39. return false;
  40. }
  41.  
  42.  
  43. }
  44.  
  45. document.fr1.submit();
  46. // return true;
  47. }
  48.  
  49. function check2() // save as draft
  50. {
  51. // change the flag2 value and ask to enter the minimum qualifying details....
  52. document.fr1.flag.value='d';
  53. document.fr1.submit();
  54. }
  55.  
  56. function AddFileInput()
  57. {
  58. var tbl=document.getElementById('tasksTable');
  59. var lastRow=tbl.rows.length;
  60. var iteration=lastRow-1;
  61. var row=tbl.insertRow(lastRow);
  62.  
  63. document.fr1.itemcount.value=iteration+1;
  64.  
  65.  
  66. //Sl.No
  67.  
  68. var cell0=row.insertCell(0);
  69. var textNode = document.createTextNode(iteration+1);
  70. cell0.appendChild(textNode);
  71.  
  72. //cell0.innerHTML = iteration+1;
  73.  
  74.  
  75. var cell1 = row.insertCell(1);
  76. var e3 = document.createElement('textarea');
  77. e3.rows=2;
  78. e3.cols=85;
  79. e3.name = 'prat_desc[]';
  80. e3.id = 'prat_desc' + iteration;
  81. cell1.appendChild(e3);
  82.  
  83. var cell2=row.insertCell(2);
  84. var e5=document.createElement('select');
  85. e5.name = 'outcome_id[]';
  86. e5.id = 'outcome_id'+iteration;
  87. e5.onchange = function(){rankCalc('outcome_id'+iteration,'critical_id'+iteration,'rank'+iteration);};
  88. e5.style.width=135;
  89. e5.options[0] = new Option('--Select--', '--');
  90. e5.options[1] = new Option('A', '1');
  91. e5.options[2] = new Option('B', '2');
  92. e5.options[3] = new Option('C', '3');
  93. cell2.appendChild(e5);
  94.  
  95. var cell3=row.insertCell(3);
  96. var e5=document.createElement('select');
  97. e5.name = 'critical_id[]';
  98. e5.id = 'critical_id'+iteration;
  99.  
  100. e5.onchange = function(){rankCalc('outcome_id'+iteration,'critical_id'+iteration,'rank'+iteration);};
  101. e5.style.width=135;
  102. e5.options[0] = new Option('--Select--', '--');
  103. e5.options[1] = new Option('A', '1');
  104. e5.options[2] = new Option('B', '2');
  105. e5.options[3] = new Option('C', '3');
  106. cell3.appendChild(e5);
  107.  
  108. var cell4=row.insertCell(4);
  109. var a_span = document.createElement('span');
  110. a_span.id = 'rank'+iteration;
  111. a_span.width=170;
  112. cell4.className='under_center';
  113. a_span.className='under_center';
  114. a_span.innerHTML = "--";
  115. cell4.appendChild(a_span);
  116.  
  117.  
  118. }
  119. function DelFileInput(id)
  120. {
  121. //alert(id);
  122. var tblid=id;
  123. var tbl = document.getElementById(tblid);
  124. var lastRow = tbl.rows.length;
  125. if (lastRow > 2 )
  126. {
  127. tbl.deleteRow(lastRow - 1);
  128. document.fr1.itemcount.value=document.fr1.itemcount.value-1;
  129. }
  130.  
  131. }
  132. </script>
  133. {/literal}
  134. <center>
  135. <table width="100%" border=0 cellspacing=0 cellpadding=0>
  136. <tr>
  137. <td width=60% valign=top>
  138. <form name=fr1 action="" method=post > <!--onSubmit="return check1()"-->
  139. <input type=hidden name=flag value=d>
  140. <input type=hidden name=flag2 value=i>
  141. <input type=hidden name=itemcount value=1>
  142. <input type=hidden name=circ_id value=>
  143. <input type=hidden name=seldt value="">
  144. <input type=hidden name=month_disp value=''>
  145.  
  146. <center>
  147. <table width="90%" cellpadding=6 cellspacing=0 class=bord border=0>
  148. <tr>
  149. <th colspan=4><center>
  150. Enter To-Do Activities
  151. </th>
  152.  
  153. <tr>
  154. <td colspan=4>
  155.  
  156. <table width="100%" border="0" id="tasksTable">
  157. <tr>
  158. <td width="10%" align="center">S. No.</td>
  159. <td align="center" width="50%">Textbox</td>
  160. <td align="center" width="10%">Select A</td>
  161. <td align="center" width="10%">Select B</td>
  162. <td align="center" width="10%">Rank</td>
  163.  
  164. {counter start=0 print=no}
  165.  
  166.  
  167. <tr id="taskInput0">
  168. <td valign=top align="center">1
  169. <td><textarea name=prat_desc[] id="prat_desc0" rows=2 cols=85></textarea>
  170.  
  171. <td valign=top>
  172. <select name=outcome_id[] id="outcome_id0" style="width:90px" onChange="rankCalc(outcome_id0.id,critical_id0.id,rank0.id);">
  173. <option value="--">--select--</option>
  174.  
  175. </select>
  176. <td valign=top>
  177. <select name=critical_id[] id="critical_id0" style="width:90px" onChange="rankCalc(outcome_id0.id,critical_id0.id,rank0.id);">
  178. <option value="--">--select--</option>
  179. </select>
  180. <td valign=top align="center">
  181. <span name="rank0" id="rank0" style="width:170px">--</span>
  182.  
  183.  
  184.  
  185. </table>
  186. <br>
  187. <table>
  188. <tr>
  189.  
  190. <td align=centert><img src="images/Add Next.jpg" onClick="AddFileInput();" style="cursor:pointer">
  191. <td align=center><img src="images/Delete Previous Item.jpg" onClick="DelFileInput('tasksTable');" style="cursor:pointer">
  192. <!--td align=center align=right> <input type=button value="Save As Draft" onClick="check2();" -->
  193. <td align=center><img src="images/Save To-Do-Activities.jpg"onClick="check1();" style="cursor:pointer" width="158">
  194.  
  195. </table>
  196. </table>
  197.  
  198. </form>
  199. </table>
  200. </td>
  201. </table>
  202. </table>

Report this snippet  

You need to login to post a comment.