Advanced Search

jQuery Form Builder

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

Expand | Embed | Plain Text

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.