[SOLVED] Editable text and passing values of text boxes to variables

Using JavaScript with Hype
1

quick question - if you have a rectangle, and define it this way:

<input type="text" id="first_name" placeholder="" style="padding-left: 2px; line-height: 24px; font-size: 1.24em; width: 100%; border: none; font-family: Lobster Two; color:#1B5A57; background-color:#FFFEE1">

it renders out to the browser as a lovely bit of text that you can easily select and edit. however, when you change the value of the field, and try to pass this to a variable, such as:
first_name = hypeDocument.getElementById(‘first_name’).innerHTML;
this renders undefined.

in this scenario - if you console log this:
console.log(hypeDocument.getElementById(‘first_name’).innerHTML);

you get this:
<input type="text" id="first_name" style="padding-left: 2px; line-height: 24px; font-size: 1.24em; width: 100%; border: none; font-family: Lobster Two; color:#1B5A57; background-color:#FFFEE1">

which makes perfect sense. however, if you have added or changed text to that field, then are seeking the newer / edited value, how to get at the new value is slightly confusing me. this:

console.log(hypeDocument.getElementById(‘first_name’).value);
is undefined

I have also tried the following method, which worked really well in terms of the data being correct, but for some reason when I click on the fields they do not go into edit mode right away, i have to tab into the field before I can add or remove text. not ideal.

on the rectangle that is the shape, on the class, use editable - and add this to the code initiated when the scene loads:
var editables = document.querySelectorAll(’.editable’);

console.log(editables);
for (var i=0; i < editables.length; i++) {
	editables[i].contentEditable = "true";
}

I will read anything that can help - I would like very much to make this work and I am super close. I have downloaded and reviewed all the examples of forms, but I am missing something. the crux of the matter is either:

  1. how do use a rectangle with the input text type and HTML code that makes it work well and look good, but somehow get that data out in a clean way

or

  1. how do i use the .editable way, but somehow make it where i can just click once inside the item and start typing as per typical expectation of user interface design, rather than having to tab through to be able to start typing in the fields?

and this is neither here nor there, but when I use the setup that makes me tab before I can type, i even have to click a non text object above the first field on the layout so i can tab into the field, its so bizarre.

2

to clarify what I mean when I talk about the tabbing. this video is
using method #2 - the editable text what works for the variables but the tabbing is maddening.

on or around 7 seconds, I click onto a graphical object above the text, and then TAB into the item - note the cursor blinks and I can type.

on around second 15, you can see i click into the field, it highlight, but I cannot type into the field until mark 17 seconds, when i click the first name field, it becomes active, and i tab into the second field. around 18 seconds that field can now be changed.

20 seconds - you can see how i tab into the email field and can change it.
at 32 seconds I can delete by selecting the last tab and hitting delete keys, but at 36 seconds, when i select the last name field, I cannot edit it until i grab the first name field, focus on it around 40 seconds, and then tab into the field. i can delete, but oddly it only likes it from the front contents.

the validation is working, it knows the field is empty, but i cannot click into it, once again at 50 seconds i have to pick the tab that precedes it and then at around 59 seconds it finally goes through.

that’s a lot of fussing with text, i want to make this smoother of course.

3

Hi Alex!

I am actually not following much of what You are describing - but I locked on to the request about editing a text field by clicking and then entering new text - which can then be passed to a variable - which is what I have done in this Demo. Hope this moves You along in your quest…

BTW this is my first foray into this edit text, etc. workflow - as a result of your question - so I don’t know that much more than what is presented here!

Demo Project: ChangeText_JHSv1.hype.zip (19.2 KB)

Online Demo here.

In the editable text field’s “innerHTML”:

<input type="text" id="myText" style="font-size:16px" value="Edit this text">


Clicking the “Click to show edited text above” field runs the “textEditChange” function:

var x = document.getElementById("myText").value;
 document.getElementById("textHolder").innerHTML = x;

Notes: The “editable text” field’s ID is set in the innerHTML as shown - do not use Hype’s ID field. The “Text edit shows here” field’s ID is set in Hype’s own ID field.

1 Like
4

JimScott,

WOW! This was so, incredibly helpful. Thank you!
:grinning:
I have been getting the contents of the field to pass as variables, but not as variables you can click on and change with the embedded HTML input define. it was so odd.

thanks to your file - i was able to get this to work, and here is the (seemingly slight??) difference between what I had and what you had. and if anyone wants to explain why this is so different in application - please I am all ears!

what I had:

first_name = hypeDocument.getElementById(“first_name”).value;
last_name = hypeDocument.getElementById(“last_name”).value;
email_address = hypeDocument.getElementById(“email_address”).value;

became this:
first_name = document.getElementById(“first_name”).value;
last_name = document.getElementById(“last_name”).value;
email_address = document.getElementById(“email_address”).value;

AND i took the text object from your demo, because my rectangle would not work - so yours worked. i brought it in and changed the HTML input type to match my design. to be fair, I have changed that element back and forth dozens of times today, so i have no idea how it started life. if you could tell me how you constructed the object that works, I can know what to do. its appears to be just a normal rectangle? I grabbed the one you pull values from in your file.

2 Likes
5

I'm a bit sleepy, and I didn't read every word of the thread, but I noticed a difference here...

If you're trying to grab the text from a text input, it would be "value" not "innerHTML". The later examples use the correct "value" property.

6

Detailing @Photics response...

I think the difference was: in my example in the "innerHTML" of the input element, the text was placed into the "value" property, and so was retrievable by the “textEditChange” function which asked for the input element's value.

I did not see the "value" property being used in your example input element - so your code (as below) returned "undefined".

console.log(hypeDocument.getElementById(‘first_name’).value);

is undefined

7

Yes, I know! I am talking the super subtle difference between these two syntaxes - was enough to stop producing UNDEFINED and start passing a value:

first_name = hypeDocument.getElementById(“first_name”).value; //resulted in UNDEFINED

and

first_name = document.getElementById(“first_name”).value; //functioned as expected!

8

Very astute - I did go into my code and add the value, just leaving it at value="" worked perfectly but only after I changed the rectangle. and only after I changed the syntax to document and not hypeDocument.

on a bright note - because of your help I was able to do what I hoped for - make it look nice, make it work without being frustrating and get data to the database. yay! :+1:

1 Like