jQuery Form Builder


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. /**
  2. * @author Jonnie Spratley
  3. * @copyright 2009
  4. * @version 1.0
  5. * @classDescription Many form building functions
  6. *
  7. * Format for adding the id to options inputs
  8. *
  9. * input for type option number misc
  10. * txt_calendar_text_option_' + optionNumber + '_last
  11. *
  12. * Misc ID values are as follows:
  13. *
  14. * Name:
  15. * first
  16. * last
  17. *
  18. * Date:
  19. * dateY
  20. * dateM
  21. * dateD
  22. *
  23. * Time:
  24. * timeH
  25. * timeM
  26. * timeS
  27. *
  28. * Address:
  29. * addrStreet
  30. * addrStree2
  31. * addrState
  32. * addrCity
  33. * addrZip
  34. * addrCountry
  35. *
  36. * Price:
  37. * priceD
  38. * priceC
  39. *
  40. * Email:
  41. * email
  42. *
  43. * Url:
  44. * url
  45. *
  46. * Phone:
  47. * phone1
  48. * phone2
  49. * phone3
  50. *
  51. */
  52.  
  53.  
  54. /**
  55. * Array of objects which hold
  56. * the following information about a
  57. * option when added to the form.
  58. *
  59. * name_id - The id of the form item added.
  60. * value_id - The id of the form item added.
  61. * type - The type of form item added.
  62. *
  63. */
  64. var optionsCount = 0;
  65. var eventOptionsArray = new Array();
  66.  
  67. /**
  68. * I create and add a object to th options array.
  69. * @param {Object} optNum - the number option
  70. * @param {Object} optType - the type of option
  71. */
  72. function jpsPushOption( optNum, optType )
  73. {
  74. var obj = new Object();
  75. obj.number = optNum;
  76. obj.type = optType;
  77.  
  78. eventOptionsArray.push( obj );
  79. }
  80.  
  81. /**
  82. * I return the array of option objects
  83. */
  84. function jpsGetOptions()
  85. {
  86. return eventOptionsArray;
  87. }
  88.  
  89. /* ===================================================================
  90. *
  91. * All Event Option Creator Functions
  92. *
  93. =================================================================== */
  94.  
  95. /**
  96. * @param {Object} optionNumber
  97. */
  98. function jps_createTextOption(optionNumber){
  99.  
  100. var _textOption = '';
  101.  
  102. _textOption += '<label for="txt_event_option_value_' + optionNumber + '" class="description" >Value</label>';
  103. _textOption += '<div>';
  104. _textOption += '<textarea id="txt_event_option_value_' + optionNumber + '" name="txt_event_option_value_' + optionNumber + '" class="element textarea medium"></textarea>';
  105. _textOption += '</div>';;
  106.  
  107. return _textOption;
  108. }
  109.  
  110. function jps_createPhoneOption(optionNumber)
  111. {
  112. var _phoneOption = '';
  113. _phoneOption += '<label for="txt_event_option_value_' + optionNumber + '" class="description">Phone </label>';
  114. _phoneOption += '<span>';
  115. _phoneOption += '<input id="txt_event_option_value_' + optionNumber + '_555a" name="txt_event_option_value_' + optionNumber + '_555a" type="text" value="" maxlength="3" size="3" class="element text"/> -';
  116. _phoneOption += '<label for="txt_event_option_value_' + optionNumber + '_555a">(###)</label>';
  117. _phoneOption += '</span>';
  118. _phoneOption += '<span>';
  119. _phoneOption += '<input id="txt_event_option_value_' + optionNumber + '_555" name="txt_event_option_value_' + optionNumber + '_555" type="text" value="" maxlength="3" size="3" class="element text"/> -';
  120. _phoneOption += '<label for="txt_event_option_value_' + optionNumber + '_555">###</label>';
  121. _phoneOption += '</span>';
  122. _phoneOption += '<span>';
  123. _phoneOption += '<input id="txt_event_option_value_' + optionNumber + '_5555" name="txt_event_option_value_' + optionNumber + '_5555" type="text" value="" maxlength="4" size="4" class="element text" />';
  124. _phoneOption += '<label for="txt_event_option_value_' + optionNumber + '_5555">####</label>';
  125. _phoneOption += '</span>';
  126.  
  127. return _phoneOption;
  128. }
  129.  
  130.  
  131.  
  132. /**
  133. * <li id="">
  134. <label class="description" for="element_2">Time </label>
  135. <span>
  136. <input id="element_2_1" name="element_2_1" class="element text" size="2" maxlength="2" value="" type="text">:
  137. <label>HH</label>
  138. </span>
  139. <span>
  140. <input id="element_2_2" name="element_2_2" class="element text" size="2" maxlength="2" value="" type="text">:
  141. <label>MM</label>
  142. </span>
  143. <span>
  144. <input id="element_2_3" name="element_2_3" class="element text" size="2" maxlength="2" value="" type="text">
  145. <label>SS</label>
  146. </span>
  147. <span>
  148. <select class="element select" style="width: 4em;" id="element_2_4" name="element_2_4">
  149. <option value="AM">AM</option>
  150. <option value="PM">PM</option>
  151. </select>
  152. <label>AM/PM</label>
  153. </span>
  154. </li>
  155. * @param {Object} optionNumber
  156. */
  157. function jps_createTimeOption(optionNumber){
  158.  
  159. var _timeOption = '';
  160. _timeOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '">Time </label>';
  161. _timeOption += '<span>';
  162. _timeOption += '<input id="txt_event_option_value_' + optionNumber + '_hh" name="txt_event_option_value_' + optionNumber + '_hh" class="element text" size="2" maxlength="2" value="" type="text">: ';
  163. _timeOption += '<label>HH</label>';
  164. _timeOption += '</span>';
  165. _timeOption += '<span>';
  166. _timeOption += '<input id="txt_event_option_value_' + optionNumber + '_mm" name="txt_event_option_value_' + optionNumber + '_mm" class="element text" size="2" maxlength="2" value="" type="text">: ';
  167. _timeOption += '<label>MM</label>';
  168. _timeOption += '</span>';
  169. _timeOption += '<span>';
  170. _timeOption += '<input id="txt_event_option_value_' + optionNumber + '_ss" name="txt_event_option_value_' + optionNumber + '_ss" class="element text" size="2" maxlength="2" value="" type="text">';
  171. _timeOption += '<label>SS</label>';
  172. _timeOption += '</span>';
  173. _timeOption += '<span>';
  174. _timeOption += '<select class="element select" style="width: 4em;" id="element_2_4" name="element_2_4">';
  175. _timeOption += '<option value="AM">AM</option>';
  176. _timeOption += '<option value="PM">PM</option>';
  177. _timeOption += '</select>';
  178. _timeOption += '<label>AM/PM</label>';
  179. _timeOption += '</span>';
  180.  
  181. return _timeOption;
  182. }
  183.  
  184. /**
  185. <li>
  186.  
  187. <div class="left">
  188. <input id="txt_event_start" name="txt_event_start"/>
  189. <label for="txt_event_start">Start </label>
  190. </div>
  191. <div class="right">
  192. <input id="txt_event_end" name="txt_event_end"/>
  193. <label for="txt_event_end">End </label>
  194. </div>
  195. </li>
  196. * @param {Object} optionNumber
  197. */
  198. function jps_createDateOption(optionNumber){
  199.  
  200. var _dateOption = '';
  201.  
  202. _dateOption += '<label for="txt_event_option_value_' + optionNumber + 'date" class="description">Date</label>';
  203. _dateOption += '<div>';
  204. _dateOption += '<input id="txt_event_option_value_' + optionNumber + 'date" name="txt_event_option_value_' + optionNumber + 'date" class="datepicker"/>';
  205. _dateOption += '</div>';
  206. _dateOption += '<script type="text/javascript">$(".datepicker").datepicker({dateFormat: "yy-mm-dd",showOn: "button", buttonImage: "assets/css/icons/icon_calendar_day.png", buttonImageOnly: true});</script>';
  207.  
  208. return _dateOption;
  209. }
  210.  
  211. /**
  212. * <li id="li_5">
  213. <label class="description" for="element_5">Upload a File </label>
  214. <div>
  215. <input id="element_5" name="element_5" class="element file" type="file"> </div>
  216. </li>
  217. * @param {Object} optionNumber
  218. */
  219. function jps_createAttachmentOption(optionNumber){
  220.  
  221. var _attachmentOption = '';
  222.  
  223. _attachmentOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '_file">Upload a File </label>';
  224. _attachmentOption += '<div>';
  225. _attachmentOption += '<input id="txt_event_option_value_' + optionNumber + '_file" name="txt_event_option_value_' + optionNumber + '_file" class="element file" type="file"> </div>';
  226.  
  227.  
  228. return _attachmentOption;
  229. }
  230.  
  231. /**
  232. * <li id="li_3">
  233. <label class="description" for="element_3">Address </label>
  234. <div>
  235. <input id="element_3_1" name="element_3_1" class="element text large" value="" type="text">
  236. <label for="element_3_1">Street Address</label>
  237. </div>
  238. <div>
  239. <input id="element_3_2" name="element_3_2" class="element text large" value="" type="text">
  240. <label for="element_3_2">Address Line 2</label>
  241. </div>
  242. <div class="left">
  243. <input id="element_3_3" name="element_3_3" class="element text medium" value="" type="text">
  244. <label for="element_3_3">City</label>
  245. </div>
  246. <div class="right">
  247. <input id="element_3_4" name="element_3_4" class="element text medium" value="" type="text">
  248. <label for="element_3_4">State / Province / Region</label>
  249. </div>
  250. <div class="left">
  251. <input id="element_3_5" name="element_3_5" class="element text medium" maxlength="15" value="" type="text">
  252. <label for="element_3_5">Postal / Zip Code</label>
  253. </div>
  254. <div class="right">
  255. <input id="element_3_4" name="element_3_4" class="element text medium" value="United States" type="text">
  256. <label for="element_3_6">Country</label>
  257. </div>
  258. </li>
  259. * @param {Object} optionNumber
  260. */
  261. function jps_createAddressOption(optionNumber){
  262.  
  263. var _addressOption = '';
  264.  
  265. _addressOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '_address1">Address </label>';
  266. _addressOption += '<div>';
  267. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_address1" name="txt_event_option_value_' + optionNumber + '_address1" class="element text large" value="" type="text">';
  268. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_address1">Street Address</label>';
  269. _addressOption += '</div>';
  270. _addressOption += '<div>';
  271. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_address2" name="txt_event_option_value_' + optionNumber + '_address2" class="element text large" value="" type="text">';
  272. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_address2">Address Line 2</label>';
  273. _addressOption += '</div>';
  274. _addressOption += '<div class="left">';
  275. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_city" name="txt_event_option_value_' + optionNumber + '_city" class="element text medium" value="" type="text">';
  276. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_city">City</label>';
  277. _addressOption += '</div>';
  278. _addressOption += '<div class="right">';
  279. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_state" name="txt_event_option_value_' + optionNumber + '_state" class="element text medium" value="" type="text">';
  280. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_state">State</label>';
  281. _addressOption += '</div>';
  282. _addressOption += '<div class="left">';
  283. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_zip" name="txt_event_option_value_' + optionNumber + '_zip" class="element text medium" maxlength="15" value="" type="text">';
  284. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_zip">Zip Code</label>';
  285. _addressOption += '</div>';
  286. _addressOption += '<div class="right">';
  287. _addressOption += '<input id="txt_event_option_value_' + optionNumber + '_country" name="txt_event_option_value_' + optionNumber + '_country" class="element text medium" value="United States" type="text">';
  288. _addressOption += '<label for="txt_event_option_value_' + optionNumber + '_country">Country</label>';
  289. _addressOption += '</div>';
  290.  
  291. return _addressOption;
  292. }
  293.  
  294. /**
  295. * <li id="li_7">
  296. <label class="description" for="element_7">Web Site </label>
  297. <div>
  298. <input id="element_7" name="element_7" class="element text medium" maxlength="255" value="http://" type="text"> </div>
  299. </li>
  300. * @param {Object} optionNumber
  301. */
  302. function jps_createUrlOption(optionNumber){
  303.  
  304. var _urlOption = '';
  305.  
  306. _urlOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '">Web Site </label>';
  307. _urlOption += '<div>';
  308. _urlOption += '<input id="txt_event_option_value_' + optionNumber + '_url" name="txt_event_option_value_' + optionNumber + '_url" class="element text medium" maxlength="255" value="http://" type="text"> </div>';
  309.  
  310. return _urlOption;
  311. }
  312.  
  313. /**
  314. *
  315. * @param {Object} optionNumber
  316. */
  317. function jps_createNameOption(optionNumber){
  318.  
  319. var _nameOption = '';
  320.  
  321. _nameOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '">Name </label>';
  322. _nameOption += '<span>';
  323. _nameOption += '<input id="txt_event_option_value_' + optionNumber + '_first" name="txt_event_option_value_' + optionNumber + '_first" class="element text" maxlength="255" value="">';
  324. _nameOption += '<label>First</label>';
  325. _nameOption += '</span>';
  326. _nameOption += '<span>';
  327. _nameOption += '<input id="txt_event_option_value_' + optionNumber + '_last" name="txt_event_option_value_' + optionNumber + '_last" class="element text" maxlength="255" value="">';
  328. _nameOption += '<label>Last</label>';
  329. _nameOption += '</span>';
  330.  
  331. return _nameOption;
  332. }
  333.  
  334. /**
  335. * <li id="li_4">
  336. <label class="description" for="element_4">Price </label>
  337. <span class="symbol">$</span>
  338. <span>
  339. <input id="element_4_1" name="element_4_1" class="element text currency" size="10" value="" type="text">.
  340. <label for="element_4_1">Dollars</label>
  341. </span>
  342. <span>
  343. <input id="element_4_2" name="element_4_2" class="element text" size="2" maxlength="2" value="" type="text">
  344. <label for="element_4_2">Cents</label>
  345. </span>
  346. </li>
  347. * @param {Object} optionNumber
  348. */
  349. function jps_createPriceOption(optionNumber){
  350.  
  351. var _priceOption = '';
  352.  
  353. _priceOption += '<label class="description" for="element_4">Price </label>';
  354. _priceOption += '<span class="symbol">$</span>';
  355. _priceOption += '<span>';
  356. _priceOption += '<input id="txt_event_option_value_' + optionNumber + '_dd" name="txt_event_option_value_' + optionNumber + '_dd" class="element text currency" size="10" value="" type="text">. ';
  357. _priceOption += '<label for="txt_event_option_value_' + optionNumber + '_dd">Dollars</label>';
  358. _priceOption += '</span>';
  359. _priceOption += '<span>';
  360. _priceOption += '<input id="txt_event_option_value_' + optionNumber + '_cc" name="txt_event_option_value_' + optionNumber + '_cc" class="element text" size="2" maxlength="2" value="" type="text">';
  361. _priceOption += '<label for="txt_event_option_value_' + optionNumber + '_cc">Cents</label>';
  362. _priceOption += '</span>';
  363.  
  364. return _priceOption;
  365. }
  366.  
  367. /**
  368. * <li id="li_9">
  369. <label class="description" for="element_9">Number </label>
  370. <div>
  371. <input id="element_9" name="element_9" class="element text medium" maxlength="255" value="" type="text">
  372. </div>
  373. </li>
  374. * @param {Object} optionNumber
  375. */
  376. function jps_createNumberOption(optionNumber){
  377.  
  378. var _numberOption = '';
  379.  
  380. _numberOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '_num">Number </label>';
  381. _numberOption += '<div>';
  382. _numberOption += '<input id="txt_event_option_value_' + optionNumber + '_num" name="txt_event_option_value_' + optionNumber + '_num" class="element text medium" maxlength="255" value="" type="text">';
  383. _numberOption += '</div>';
  384.  
  385. return _numberOption;
  386. }
  387.  
  388. /**
  389. * <li id="li_6">
  390. <label class="description" for="element_6">Email </label>
  391. <div>
  392. <input id="element_6" name="element_6" class="element text medium" maxlength="255" value="" type="text"> </div>
  393. </li>
  394. * @param {Object} optionNumber
  395. */
  396. function jps_createEmailOption(optionNumber){
  397.  
  398. var _emailOption = '';
  399.  
  400. _emailOption += '<label class="description" for="txt_event_option_value_' + optionNumber + '">Email </label>';
  401. _emailOption += '<div>';
  402. _emailOption += '<input id="txt_event_option_value_' + optionNumber + '_email" name="txt_event_option_value_' + optionNumber + '_email" class="element text medium" maxlength="255" value="@" type="text"></div>';
  403.  
  404. return _emailOption;
  405. }
  406.  
  407. /**
  408. * <button id="jps-calendar-options-btn-remove" class="jps-btn-remove" value="Remove">
  409. <span>Remove</span>
  410. </button>
  411. * @param {Object} optionNumber
  412. */
  413. function jps_createRemoveOption(optionNumber){
  414.  
  415. var _removeOption = '';
  416.  
  417. _removeOption += '<div class="actions">';
  418. _removeOption += '<a class="btn_option_remove" href="#" title="li_option_row_' + optionNumber + '">';
  419. _removeOption += '<img src="assets/css/icons/icon_minus.png" width="16" height="16" alt="Delete Option ' + optionNumber + '"></a>';
  420. _removeOption += '</div>';
  421.  
  422. return _removeOption;
  423. }
  424.  
  425. /**
  426. * I create a name for a custom option,
  427. * the other piece is the value.
  428. *
  429. * @param {Object} optionNumber
  430. */
  431. function jps_createOptionNameOption( optionNumber )
  432. {
  433. var option = '';
  434.  
  435. option += '<label class="description">Option Name</label>';
  436. option += '<input id="txt_event_option_name_' + optionNumber + '" name="txt_event_option_name_' + optionNumber + '" type="text" class="element text large" value=""/>';
  437.  
  438. return option;
  439. }
  440.  
  441. /**
  442. * I build a new option of name/value.
  443. *
  444. * @param {Object} optionID - Number of the option
  445. */
  446. function jps_createCustomOption(optionNumber){
  447.  
  448. var option = '';
  449.  
  450. option += '<label for="txt_event_option_name_' + optionNumber + '_custom" class="description">Option ' + optionNumber + '</label>';
  451. option += '<span>';
  452. option += '<input name="txt_event_option_name_' + optionNumber + '_custom" id="txt_event_option_name_' + optionNumber + '_custom" type="text" class="element text" value=""/>';
  453. option += '<label>Name</label>';
  454. option += '</span>';
  455. option += '<span>';
  456. option += '<input name="txt_event_option_value_' + optionNumber + '_custom" id="txt_event_option_value_' + optionNumber + 'custom_" type="text" class="element text" value=""/>';
  457. option += '<label>Value</label>';
  458. option += '</span>';
  459.  
  460. return option;
  461. }
  462.  
  463. /**
  464. * I create a event option, I switch based on the type
  465. * of the pre-made option is.
  466. *
  467. * @param {Object} optionType
  468. * @param {Object} optionNumber
  469. */
  470. function jps_createEventOption( optionType, optionNumber )
  471. {
  472. var type = optionType.toString().toLowerCase();
  473.  
  474. window.console.log( 'Option #'+ optionNumber + ' Type: ' + type );
  475. jpsPushOption( optionNumber, type );
  476.  
  477. switch (type)
  478. {
  479.  
  480. case 'text':
  481. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createTextOption(optionNumber));
  482. break;
  483.  
  484. case 'phone':
  485. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createPhoneOption(optionNumber));
  486. break;
  487.  
  488. case 'custom':
  489. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createCustomOption(optionNumber));
  490. break;
  491.  
  492. case 'address':
  493. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createAddressOption(optionNumber));
  494. break;
  495.  
  496. case 'url':
  497. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createUrlOption(optionNumber));
  498. break;
  499.  
  500. case 'person':
  501. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createNameOption(optionNumber));
  502. break;
  503.  
  504. case 'price':
  505. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createPriceOption(optionNumber));
  506. break;
  507.  
  508. case 'number':
  509. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createNumberOption(optionNumber));
  510. break;
  511.  
  512. case 'email':
  513. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createEmailOption(optionNumber));
  514. break;
  515.  
  516. case 'attachment':
  517. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createAttachmentOption(optionNumber));
  518. break;
  519.  
  520. case 'time':
  521. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createTimeOption(optionNumber));
  522. break;
  523.  
  524. case 'date':
  525. jpsAddOption('li_option_row_' + optionNumber, optionNumber, jps_createDateOption(optionNumber));
  526. break;
  527.  
  528. default:
  529.  
  530. break;
  531. }
  532. }
  533.  
  534. /**
  535. * I add a option for the div_event_options div.
  536. * I highlight the option that just was added
  537. *
  538. * @param {Object} optionID
  539. * @param {Object} optionCnt
  540. * @param {Object} optionContents
  541. */
  542. function jpsAddOption(optionID, optionCnt, optionContents)
  543. {
  544. var optionWrapContents = '';
  545.  
  546. optionWrapContents += '<li id="' + optionID + '" class="event_option" title="Option ' + optionID + '">';
  547. optionWrapContents += jps_createRemoveOption( optionCnt );
  548. optionWrapContents += '<div class="left">';
  549. optionWrapContents += jps_createOptionNameOption( optionCnt );
  550. optionWrapContents += '</div>';
  551. optionWrapContents += '<div class="right">';
  552. optionWrapContents += optionContents;
  553. optionWrapContents += '</div>';
  554. optionWrapContents += '</li>';
  555.  
  556. $('#ul_event_options').append( optionWrapContents );
  557.  
  558. $('li#' + optionID ).highlightFade(
  559. {
  560. speed: 800
  561. });
  562. }
  563.  
  564. /**
  565. * I get all of the options and return it as name/value pairs.
  566. * Whatever the about of options
  567. *
  568. * Types are:
  569. *
  570. * address -
  571. * Address 1: txt_event_option_value_' + optionNumber + '_address1
  572. * Address 2: txt_event_option_value_' + optionNumber + '_address2
  573. * City: txt_event_option_value_' + optionNumber + '_city
  574. * State: txt_event_option_value_' + optionNumber + '_state
  575. * Zip: txt_event_option_value_' + optionNumber + '_zip
  576. * Country: txt_event_option_value_' + optionNumber + '_country
  577. *
  578. * text - txt_event_option_value_' + optionNumber + '
  579. *
  580. * custom -
  581. * Custom Value - txt_event_option_name_' + optionNumber + '_custom
  582. *
  583. * url -
  584. * URL: txt_event_option_value_' + optionNumber + '_url
  585. *
  586. * person -
  587. * First: txt_event_option_value_' + optionNumber + '_first
  588. * Last: txt_event_option_value_' + optionNumber + '_last
  589. *
  590. * price -
  591. * Dollars: txt_event_option_value_' + optionNumber + '_dd,
  592. * Cents: txt_event_option_value_' + optionNumber + '_cc
  593. *
  594. * number -
  595. * Number: txt_event_option_value_' + optionNumber + '_num
  596. *
  597. * email -
  598. * Email: txt_event_option_value_' + optionNumber + '_email
  599. *
  600. * attachment -
  601. * File: txt_event_option_value_' + optionNumber + '_file
  602. *
  603. * time -
  604. * Hour: txt_event_option_value_' + optionNumber + '_hh
  605. * Minute: txt_event_option_value_' + optionNumber + '_mm
  606. * Second: txt_event_option_value_' + optionNumber + '_ss
  607. *
  608. * date -
  609. * Date: txt_event_option_value_' + optionNumber + 'date
  610. *
  611. *
  612. */
  613. function getOptionValues()
  614. {
  615. //Swtich based on option type, in the options array.
  616.  
  617. //Loop every object in the eventOptionsArray, grabbing each number and type.
  618. //For every number we need to get the value from the input.
  619. //The option name value
  620. //The option value value
  621. //Depending on what type of option it is
  622. //We are going to have to grab those values
  623. //After we grab the values, we create a new object
  624. //Holding all of our values and push it into a array.
  625. //Returning all option values in one array for
  626. //The database to insert it.
  627.  
  628. /*
  629. * Here is the object structure we are aiming for
  630. *
  631. * options: {
  632. * option_1: {
  633. * type: 'address',
  634. * name: 'Location',
  635. * value: '4834 Main Ave, Fair Oaks, CA, 95628, USA'
  636. * },
  637. * option_2: {
  638. * type: 'email',
  639. * name: 'Contact',
  640. * value: '[email protected]'
  641. * option_3: {
  642. * type: 'name',
  643. * name: 'Host',
  644. * value: 'Jonnie Spratley'
  645. * }
  646. * }
  647. *
  648. *
  649. *
  650. */
  651. //Options Object
  652. var returnArray = new Array();
  653. var options = new Object();
  654.  
  655. $.each( eventOptionsArray, function( index, obj ){
  656.  
  657. trace('Option #:'+ obj.number );
  658.  
  659. //Holds option_ + # option
  660. var option = new Object();
  661.  
  662. //The options object
  663. options['option_' + index ] = option;
  664.  
  665. //Each option inside of the options
  666. option.type = obj.type; //Object from the pushed
  667.  
  668. option.name = $( '#txt_event_option_name_' + obj.number ).val();
  669.  
  670. //Switch based on option type to build the values from the different form inputs
  671. switch( obj.type )
  672. {
  673. case 'address':
  674. var a1 = $( '#txt_event_option_value_' + obj.number + '_address1' ).val();
  675. var a2 = $( '#txt_event_option_value_' + obj.number + '_address2' ).val();
  676. var s = $( '#txt_event_option_value_' + obj.number + '_state' ).val();
  677. var c = $( '#txt_event_option_value_' + obj.number + '_city' ).val();
  678. var z = $( '#txt_event_option_value_' + obj.number + '_zip' ).val();
  679. var usa = $( '#txt_event_option_value_' + obj.number + '_country' ).val();
  680. var fullAddress = a1 + ' ' + a2 + ', ' + c + ', ' + s + ' ' + z + ', ' + usa;
  681.  
  682. option.value = fullAddress;
  683.  
  684. break;
  685.  
  686. case 'text':
  687.  
  688. option.value = $( '#txt_event_option_value_' + obj.number ).val();
  689.  
  690. break;
  691.  
  692.  
  693. case 'url':
  694.  
  695. option.value = $( '#txt_event_option_value_' + obj.number + '_url').val();
  696.  
  697. break;
  698.  
  699. case 'person':
  700.  
  701. var fname = $( '#txt_event_option_value_' + obj.number +'_first').val();
  702. var lname = $( '#txt_event_option_value_' + obj.number +'_last').val();
  703.  
  704. option.value = fname + ' ' + lname;
  705.  
  706. break;
  707.  
  708. case 'price':
  709.  
  710. option.value = '$' + $( '#txt_event_option_value_' + obj.number + '_dd').val() + '.' + $( '#txt_event_option_value_' + obj.number + '_cc').val();
  711.  
  712. break;
  713.  
  714. case 'number':
  715.  
  716. option.value = $( '#txt_event_option_value_' + obj.number + '_num' ).val();
  717.  
  718. break;
  719.  
  720. case 'email':
  721.  
  722. option.value = $( '#txt_event_option_value_' + obj.number + '_email').val();
  723.  
  724. break;
  725.  
  726. case 'time':
  727. var h = $( '#txt_event_option_value_' + obj.number + '_hh' ).val();
  728. var m = $( '#txt_event_option_value_' + obj.number + '_mm' ).val();
  729. var s = $( '#txt_event_option_value_' + obj.number + '_ss' ).val();
  730.  
  731. option.value = h + ':' + m + ':' + s;
  732.  
  733. break;
  734.  
  735. case 'phone':
  736. var p1 = $( '#txt_event_option_value_' + obj.number + '_555a' ).val();
  737. var p2 = $( '#txt_event_option_value_' + obj.number + '_555' ).val();
  738. var p3 = $( '#txt_event_option_value_' + obj.number + '_5555' ).val();
  739.  
  740. option.value = ''+p1+' '+p2+'-'+p3+'';
  741. break;
  742.  
  743. case 'date':
  744.  
  745. break;
  746.  
  747.  
  748. case 'custom':
  749.  
  750. break;
  751.  
  752. case 'attachment':
  753.  
  754. break;
  755.  
  756. default:
  757.  
  758. break;
  759. }
  760. returnArray.push( option );
  761. } );
  762.  
  763. trace( $.toJSON( returnArray ) );
  764.  
  765. return returnArray;
  766. }
  767.  
  768. /**
  769. * I dump a string to the console
  770. *
  771. * @param {Object} str - the string to log
  772. */
  773. function trace( str )
  774. {
  775. window.console.log( str );
  776. }
  777.  
  778.  
  779.  
  780. /*=========================================================
  781. * Calendar Set Date / Get Date Functions
  782. * Set - For setting the date on the form
  783. * Get - For getting the values from all of the inputs and
  784. * returning a mysql date
  785. ========================================================= */
  786.  
  787. /**
  788. * I make a mysql date timestamp
  789. * @deprecated - Datepicker used instead
  790. * @param {Object} dateobj - a date
  791. */
  792. function jps_makeTimestamp( dateobj )
  793. {
  794. var date = new Date( dateobj );
  795. var yyyy = date.getFullYear();
  796. var mm = date.getMonth() + 1;
  797. var dd = date.getDate();
  798. var hh = date.getHours();
  799. var min = date.getMinutes();
  800. var ss = date.getSeconds();
  801.  
  802. var mysqlDateTime = yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + min + ':' + ss;
  803.  
  804. return mysqlDateTime;
  805. }
  806.  
  807. /**
  808. * I get the date and times from the form, and make a valid
  809. * mysql datetime string for posting data.
  810. *
  811. * @deprecated - Datepicker used instead
  812. * @param {Object} id - the start or end date
  813. */
  814. function jps_getCalendarFormDate(id){
  815. //txt_event_end_yy
  816. var yyyy = $("#txt_event_" + id + "_yy").val();
  817. var mm = $("#txt_event_" + id + "_mm").val();
  818. var dd = $("#txt_event_" + id + "_dd").val();
  819. var hh = $("#txt_event_" + id + "_time_hh").val();
  820. var min = $("#txt_event_" + id + "_time_mm").val();
  821. var ss = $("#txt_event_" + id + "_time_ss").val();
  822.  
  823. //var mysqlDateTime = yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + min + ':' + ss;
  824. var mysqlDateTime = $("#txt_event_" + id ).val() + ' ' + hh + ':' + min + ':' + ss;
  825.  
  826. return mysqlDateTime;
  827. }
  828.  
  829. /**
  830. * I set the calendar dates
  831. * @deprecated - Datepicker used instead
  832. * @param {Object} id
  833. * @param {Object} date
  834. */
  835. function jps_setCalendarFormDate(id, date){
  836. var yyyy = $("#txt_event_" + id + "_yy").val(date.getFullYear());
  837. var mm = $("#txt_event_" + id + "_mm").val(date.getMonth() + 1);
  838. var dd = $("#txt_event_" + id + "_dd").val(date.getDate());
  839. var hh = $("#txt_event_" + id + "_time_hh").val(date.getHours());
  840. var min = $("#txt_event_" + id + "_time_mm").val(date.getMinutes());
  841. var ss = $("#txt_event_" + id + "_time_ss").val(date.getSeconds());
  842. }
  843.  
  844. /**
  845. * I clear the calendar dates
  846. * @deprecated - Datepicker used instead
  847. * @param {Object} id
  848. */
  849. function jps_clearCalendarFormDate(id){
  850. $("#txt_event_" + id + "_yy").val('');
  851. $("#txt_event_" + id + "_mm").val('');
  852. $("#txt_event_" + id + "_dd").val('');
  853. $("#txt_event_" + id + "_time_hh").val('00');
  854. $("#txt_event_" + id + "_time_mm").val('00');
  855. $("#txt_event_" + id + "_time_ss").val('00');
  856. }
  857.  
  858. /**
  859. * I take a string and create an excerpt from it, returning an object
  860. * with the summary and body properties,
  861. * @param {Object} str - the string to shorten
  862. * @param {Object} limit - the limit of characters
  863. */
  864. function jps_shortString( str, limit )
  865. {
  866. var body = new String( str );
  867. var summary = new String(str);
  868. summary = summary.substr( 0, summary.lastIndexOf( ' ', limit ) ) + '...';
  869.  
  870. var returnString = new Object({
  871. body: body,
  872. summary: summary
  873. });
  874.  
  875. //window.console.log( 'Summary - ' + summary);
  876. //window.console.log( 'Body - ' + body);
  877.  
  878. return returnString;
  879. }
  880.  
  881.  
  882. var jps_buildHCalEvent = function( obj )
  883. {
  884.  
  885. var html = '';
  886. html += '<div id="hcalendar-'+obj.title+'" class="vevent">';
  887. html += ' <abbr title="'+obj.start+'" class="dtstart">'+obj.start+'</abbr>, ';
  888. html += ' <abbr title="'+obj.end+'" class="dtend">'+obj.end+'</abbr>';
  889. html += ' <span class="summary">'+obj.title+'</span>';
  890. html += ' <span class="location"></span>';
  891.  
  892. html += ' <div class="description">';
  893. html += ' <p>'+obj.body+'</p>';
  894. html += ' </div>';
  895. html += '</div>';
  896.  
  897. return html;
  898. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.