How to get attribute's value from a text box?


#1

Hi , I am trying to get attribute’s value from a text box .

I have a textfield that allow people to input his / her email address.
I have created a button which has an “mail to” action

how to get attribute’s value or text(email address in this case) from a text field?
Please help! Any help will be highly appreciated.
I tried “Element.getAttribute(“targetEmail”).value” but it does not work.


(Mark Hunte) #2

What are you actually trying to do.

Are you wanting an email to sent to you with their email address. If so this is not the area to do this.

Compose email will try and use the users defualt email program to compose an email. Their Email address normally would be populated by this. Tthey would then need to hit the send button. This defeats the purpose…

The email address in Compose email will be the send to email address not the from.

Bu I may have the wrong idea of what you are trying to do…


If you are trying to get them to Mail themselves then
You can use javascript.

Give the input an id.

and the Click action to run a javascript.

var mailto = document.querySelector('#fmail').value;
window.open('mailto:' + mailto)

fmail being the inpu id.

Note that the browser may block this and ask the user to allow it


#3

Hi mark , thanks very much for your help! I tried your method with the following code. But it does not open the email window like the one that I opened with "Action>compose Email…"
Could you please show me how I could open the Mail UI window with the Mailto command?

Best regards ,

var mailto = document.querySelector('#targetEmail').value;
window.open('mailto:' + mailto)

(Mark Hunte) #4

What do you have as the form/input code


#5

it is a HTML widget. Thnks


(Mark Hunte) #6

A widget will be a problem because it is in effect an iframe which has it’s own set of security restrictions.

Use a normal rectangle for the form code. Put the form code in it’s innerHTML.


#7

Hi , thanks for the suggestions!
I have already used a rectangle and attach the code to "edit head HTML…"
The text box appeared on the screen but the text does not seem to be working.
I tested it with the alert command first. It said “undefined”.

var mailto = document.querySelector(’#targetEmail’).value;
alert(mailto);
//window.open(‘mailto:’ + mailto)

thanks a lot. Please advise.


(Mark Hunte) #8

I should have been a bit clearer.

you do not need to give the rectangle an id.

You give the input one.

<form>
 Email: <input type="text" id="targetEmail" >
 
</form>

Also to stop blank window opening change the JS to

   var mailto = document.querySelector('#targetEmail').value;
 win =  window.open('mailto:' + mailto)

 if (win && win.open && !win.closed) win.close();

#9

really great Thanks for your advice! It works!
By the way , but each time, it seems there is a message coming out every time I use that mail command. the message is " This website has been blocked from automatically composing an email. (but I didnt have it if I called the mail window from action>compose mail

do you have any clue of how I could avoid that Message window? Thanks a lot for your help and attention!


(Mark Hunte) #10

I only got it in Safari and not Chrome.

A further play

win = window.location.href = 'mailto: ' + mailto

Works.

I originally did not use this as I thought it would try and change the actual page but it does not.

You probably can also get rid of the if condition line.


#11

Hi, thanks for suggesting me to create the textfield with the rectangle. I have used the Head HTML. But my textField stays on all the pages of my iOS app which is not what I want. I only need the textfield appears on my last (final) page. May I please ask if you have any idea about how I can create the textfield without having it being a Header or should I use HTLP Widget?
Thanks and please advise!


#12

Hi, I am now trying to create an iOX iphone / ipad App. The last part of the App is for user to use slider to express some score. Then when the user press the “mail” botton, it will have the user to send a simple report (data that are collected from the sliders) to the user.

I have been trying iQueryUI 's https://jqueryui.com/
to create the sliders and the textField for this app.
How could I get the attribute’s from the iqueryUI’s textfield and integer slider ? And how do I have them as the string form and have them appear in the Mail window?
The following attached image is the target that I have been working on!
Please help since this is the Final nail of the coffin. Any help will be greatly appreciated!
This is my first time to try iQuery UI. Does any got any clue? Thanks a lot for your attention! Thanks a bunch!

<!doctype html>

jQuery UI Slider - Slider bound to select Minimum number of beds 1 2 3 4 5 6


(Mark Hunte) #13

If you put code in that last post you need to use the code tags around it so it shows up!.

Any way here is a quick example.

The sliders are just normal rectangles with ids and class name.

No need to be in head.

Example config at scene load.

 $( "#item1" ).slider();
    $( "#item2" ).slider();
    
    $( ".selector" ).on( "slide", function( event, ui ) {
  
 hypeDocument.getElementById(event.target.id + 'result').innerHTML = ui.value
   
    
    
    } );

When mail button is clicked.

var mailto = document.querySelector('#targetEmail').value;
itemValues = []
 			
 			//win = window.location.href = 'mailto: ' + mailto
 			var sliders = $(".selector");
 			sliders.each(function(e,ob) {
 			var val = $(ob).slider( "value" )
 			itemValues.push(ob.id + " = " + val )
 			
 			});
 			
 			var results =itemValues.toString().replace(",","%0D%0A")
 		
 	win = window.location.href = "mailto:"+ mailto  + "?subject=report&body=" + results


jquerySlider_Mailto_MHv1.hypetemplate.zip (18.9 KB)


#14

Great Thanks for your Help! I am taking a look and Trying!
I just wanna say “YOU ROCK!”


#15

Hi, I have been trying to use \n to having a New Line. but it seems it is not working for the string.
Could anyone give me a hint? thanks a lot!


(Mark Hunte) #16

Use %0D%0A


#17

Hi Thanks very much for your help with the sliders. But I have encountered a few problems while I was testing the slider features and the “mail” function with HypeReflect with my iPad.

  1. the sliders cannot be swiped with my finger
    (since my final deliverable is an IOS app, it is important for it to be working on iPhone and iPad screen)
    Could anyone have any clue how this could be fixed.

  2. For iOS developer, which way is the best to preview (when creating App with Hype)? (with xCode or in HypeReflect) This is my first time to try to craete an app. Please advise.

  3. the mail button function works perfectly in my computer (mac book), but it does not seem to be working in HypeReflect environment. The Mail app doesnt appear in my iPad. How should I test this mail feature with my iPad or iPhone ?

THanks a lot for your attention! Any help and suggestion will be greatly appreciated! Thanks!


(Jonathan Deutsch) #18

This is an issue with jquery ui sliders. I googled and found a solution is to include touch punch after your other script includes in the head:

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

It depends on “best” as Hype Reflect is the easiest, but may also be the least accurate. Previewing in your project will be the most accurate. Second to that is may be previewing in Mobile Safari depending on your app (as Hype Reflect is a WKWebView in an app, so in some ways this could be better).

Hype Reflect does not handle mailto: links; it is not a problem with the code. IF you use the Safari icon in Hype Reflect and preview in Safari it will work fine. You may need to explicitly handle this in your app, depending on the setup.


#19

Hi Thanks for your information!
For question 1) thanks for your suggestion to include the “touch punch” script.
I did try putting that script in the head < > file.
But it still does not seem to be working when it comes to previewing with Hype reflect.
Could you please show me how I could correct the script? The attached image show the lines of my head file.
Thanks a lot for your following up!


(Jonathan Deutsch) #20

What you have looks the same as mine; all I needed to do was add that one line. I’ve attached a zip of my document.

I’m able to grab the slider and move it around in Hype Reflect.

slider-fixed.hype.zip (18.1 KB)