The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> HTML form on Samsung tablet, weird behavior that goes against described function
Brad Keefer
post Sep 12 2018, 07:56 PM
Post #1





Group: Members
Posts: 3
Joined: 12-September 18
Member No.: 26,713



Please forgive me for a first post just asking for help, but I'm really at a loss.

First, full disclosure, I'm a sysadmin, not a dedicated web developer. I know enough HTML & PHP to get started and can google for things I need, but that's about it.

Now, to my issue:

I have coded a small html form that allows preschool students to be checked in by their parents or their teachers. We are accessing the form using Chrome 68 on Samsung Galaxy tablets, What we want to happen is for the parent to be able to hit the enter button on the tablet keyboard and submit the form once they have filled out everything for their children. Based on what I have been reading, this behavior is the default for html forms with a Submit button.

But that is not what we are seeing. Instead of getting a "Go" option for the enter key on the tablet, the button says "Next" and acts as a Tab character, moving the cursor from one input field to the next.

this makes absolutely no sense to me. There are no errors in the logs that I can see, this is just not the expected default behavior from HTML. Code snippets are below:

CODE

<html>
<head>
    <title>Check-In</title>
    <link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>

<form method="post" action="<?php echo htmlspecialchars('process.php')?>">
    <div class="student" style="background-color: #969696;">
       <label for "student01"><b>Donald Blake</b></label>
       <input type="hidden" id="student01" name="student01" value="Donald Blake">
       <input type="radio" name="option01" id="option01a" value="in"><label for "option01a" style="text-align: left;">Check-In</label>
       <label for "option01b">Check-Out</label><input type="radio" name="option01" id="option01b" value="out">
       <label for="notes01">Notes:</label>
       <input type="textarea" rows="1" name="notes01" id="notes01" size="30" maxlength="128">
       <label for="sig01"> Signature: </label>
       <input type="text" name="sig01" id="sig01" size="20" maxlength="80">
       <input type="hidden" name="class01" id="class01" value="3B">
     </div>  


that is the start of my form. all of the students are in a <div></div> block.

The end of the file looks like this

CODE

<div class="student">
       <label for "student46"><b>Pepper Potts</b></label>
       <input type="hidden" id="student46" name="student46" value="Pepper Potts">
       <input type="radio" name="option46" id="option46a" value="in"><label for "option46a" style="text-align: left;">Check-In</label>
       <label for "option46b">Check-Out</label><input type="radio" name="option46" id="option46b" value="out">
       <label for="notes46">Notes:</label>
       <input type="textarea" rows="1" name="notes46" id="notes46" size="30" maxlength="128">
       <label for="sig46"> Signature: </label>
       <input type="text" name="sig46" id="sig46" size="20" maxlength="80">
       <input type="hidden" name="class46" id="class46" value="5A">
    </div>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>


Again, based on what I've been reading, as long as the input type of submit is within the <form></form> tags, then I should get teh behavior of getting "Go" for my enter key...

I've been playing around with it some, but have had no luck getting this to work.

I know it's got to be something simple I'm missing, because everythign I'm seeing says that this should just worko as I want it to...

So, what could I be missing?

Any thoughts would be greatly appreciated.

Thanks in Advance.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 12 2018, 11:17 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,066
Joined: 9-August 06
Member No.: 6



QUOTE(Brad Keefer @ Sep 13 2018, 02:56 AM) *

What we want to happen is for the parent to be able to hit the enter button on the tablet keyboard and submit the form once they have filled out everything for their children. Based on what I have been reading, this behavior is the default for html forms with a Submit button.


No. I don't know what you've been reading, but it's not the default behavior.
http://htmlhelp.com/faq/html/forms.html#enter-submit
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brad Keefer
post Sep 13 2018, 07:16 AM
Post #3





Group: Members
Posts: 3
Joined: 12-September 18
Member No.: 26,713



Ah, that explains a lot of my confusion.

So, if I'm reading that right, the only way for a submit button to get invoked by the enter key is to have 1 input field and no textarea inputs.

That's not going to work with the kind of form we need unfortunately.

Anyway, thanks for clearing that up. That'll teach me to not put too much stock in information I read on forums like StackOverflow.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 13 2018, 07:21 AM
Post #4


.
********

Group: WDG Moderators
Posts: 7,947
Joined: 10-August 06
Member No.: 7



QUOTE(Brad Keefer @ Sep 13 2018, 02:56 AM) *

CODE

<form method="post" action="<?php echo htmlspecialchars('process.php')?>">


Off-topic: the above PHP code doesn't have any purpose. The htmlspecialchars() function converts special characters to entities, but there are no special characters in the string "process.php".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brad Keefer
post Sep 13 2018, 09:56 AM
Post #5





Group: Members
Posts: 3
Joined: 12-September 18
Member No.: 26,713



Interesting... I was under the impression that the htmlspecialchars() function prevented someone from submitting random PHP code in an input field, not that it prevented the filename from having special characters.

Also of note, even though it is not the default behavior, out of 4 samsung tablets we have accessing teh web form, one actually has Go for the enter key, and works the way we are wanting it to. the other 3 just have Next for the Enter key and tab to the next data field.

Could it be that the working one is on a slightly older version of Chrome for Android? I unfortunately don't have access to that one currently to verify its version, but was just curious.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 13 2018, 12:22 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,947
Joined: 10-August 06
Member No.: 7



QUOTE(Brad Keefer @ Sep 13 2018, 04:56 PM) *

Interesting... I was under the impression that the htmlspecialchars() function prevented someone from submitting random PHP code in an input field, not that it prevented the filename from having special characters.

True, but then it must be used in the PHP code that the form submits to (in this case the code in the actual file process.php). PHP code in the actual HTML form can't prevent anything, since it runs before the user has submitted the form.

QUOTE
Also of note, even though it is not the default behavior, out of 4 samsung tablets we have accessing teh web form, one actually has Go for the enter key, and works the way we are wanting it to. the other 3 just have Next for the Enter key and tab to the next data field.

Could it be that the working one is on a slightly older version of Chrome for Android? I unfortunately don't have access to that one currently to verify its version, but was just curious.

There's a lot of variation in how different browsers let users interact with form fields, I don't think there's any standard way for it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 14 2018, 08:13 AM
Post #7


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,066
Joined: 9-August 06
Member No.: 6



I think it's kind of a mystery. The same browser may submit one form with several text fields but not another. I have no idea why this is.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st November 2018 - 11:47 AM