(Harlowe) How do I save a text input field as a variable?

Question

Hello!

I am using Twine 2.2.1 with Harlowe 2.1.0 on Mac. 

I would like to have a text field that asks a user to enter a name, and then once they click "submit" it gets saved as a variable. (I do not want to use the "prompt" option as I dislike the popup from a user experience point of view).

I have read a number of very helpful posts which outline a way to do this via a hook using a little Javascript, but I have been unable to get these to work, as every time I try and get the page to save the name to a variable it gives me the error "A hook name cannot be stored"

From the Story Javascript:

if (typeof window.customScripts == "undefined") {
	window.customScripts = {
		submitName: function(inputName) {
			//Get the value of the textbox at time of click
			var newName = $("input[name='" + inputName + "']")[0].value;
			//Find the hook node based on name and set the text inside
			$("tw-hook[name*='" + inputName + "']").text(newName);
			//Log the Change
			console.log(inputName + " changed.")
		}
	}; 
};

And from the Passage:

(set: $UNAME = "Lancer")
Your Name: [Lancer]<fname|
<input type="text" name="fname" value="Lancer"><button type="submit" onclick="customScripts.submitName('fname')">[Update Name]<submitname|</button>

(click:?submitname)[(set: $UNAME = ?fname) [[Hillside]] ]

Any advice would be gratefully received - I have been dissecting this for a while and all the sources I have read say this should work but I cannot get it to!

Sources:
https://twinery.org/forum/discussion/4895/user-input-in-harlowe
https://twinery.org/forum/discussion/5634/user-input-in-harlowe-defining-variable-content-using-html-tags
http://twinery.org/forum/discussion/comment/6468/#Comment_6468

Answer 1

Hi Elliotpage,

try following this post

http://twinery.org/questions/881/a-way-to-have-a-text-box-on-the-page-rather-than-an-input-box?show=881#q881

It worked for me (Twine2/Harlowe2.2.1)

( I added a simple [[CheckTheValue]] Link on the passage with the code     -  and on the CheckTheValue passage simply put:

fname=$fname

So that I could see, if the var was set.

Maybe the references you listed are out of date.

 

Comments

Maybe the references you listed are out of date.

The method described in the original links is designed to work with the 1.x series of Harlowe.

The Developer of Harlowe deliberately modified the 2.x series so that you can no longer retrieve the current value of a named hook, which is why Elliotpage is seeing that error message. The (set:) macro thinks they are trying to save a reference to the named hook object in a story variable, similar to how you can save a reference to either an Command object or to a Changer object. (like those returned by either the (enchant:) macro or the (text-colour:) macro)

@Elliotpage
WARNING: Take care when using the story variable updating part of the HACK described in the link supplied by Jherek, especially if you are leaving the Undo/Redo links in your story. If you use that Javascript code to directly add elements to a story variable containing a collection object (like an Array or Data-Map) then you may be inadvertently corrupting the History information of the story, which can lead to interesting outcomes.