User input in Harlowe: defining variable content using html tags

Comments

• petithobbit

  February 2016

  The "//" comments are not in the original code.
• greyelf

  February 2016

  Harlowe does not currently have built-in support for HTML based inputs like text fields, radio buttons, check boxes, or selection drop-downs.
  
  A number of Author's have developed a technique that combines the usage of Javascript with a named hook, a submit button and a (live:) macro to allow advance inputs. Searching the forums using "customScripts" will show you some of examples, although none of them currently support the HTML select element.
  
  The following solution consists of two parts:
  
  1. The Javascript used to update a named hook with the current selected value of a select element. The following is placed within your Story Javascript area, it defines a submitSelect function which will be attached to a submit button in the passage.

  if (typeof window.customScripts == "undefined") {
  	window.customScripts = {
  		submitSelect: function(hookName) {
  			var value = $("select[name='" + hookName + "']").val();
  			$("tw-hook[name*='" + hookName + "']").text(value);
  		}
  	}; 
  };
  

  note: the above uses a name attribute instead of an element id to make it consistent with the other solutions for radio buttons, check boxes and text fields.
  
  2. The Passage code:

  (set: $arrondissement = "Beauport")
  
  In which neibourghood are we? [$arrondissement]<farrondissement|
  <select name="farrondissement" required="required">
  <option value="Beauport">Beauport</option>
  <option value="Charlesbourg">Charlesbourg</option>
  <option value="Limoilou">La Cité Limoilou</option>
  <option value="Haute-Saint-Charles">Saint-Charles</option>
  <option value="Rivières">Les Rivières</option>
  <option value="sainte-foy-sillery-cap-Rouge">sainte-foy-sillery-cap-Rouge</option>
  </select>
  <button type="submit" onclick="customScripts.submitSelect('farrondissement')">Enregistrer quartier le</button>
  
  (live:100ms)[
  	(set: $arrondissement = ?farrondissement)
  ]
  

  note: Sorry if the French translation of the "Save Neibourghood" submit button text is incorrect, I don't speak French. *smile*
  
  The above Passage code does the following:
  a. The submit button updates the farrondissement named hook's contents to be the value of the currently selected option's value.
  b. The (live:) macro updates the $arrondissement variable with the contents of the farrondissement named hook.
  c. It relies on the named hook and the select element having the same name, which is slightly different to related variable's name.
  
  Because you are using the select element's required="required" option the first non-empty string option is automatically selected, so you need to assign the $arrondissement variable the value of the relevant option.
• petithobbit

  February 2016

  Thank you so much for the very concise answer! I'll give it a try!