Using the iOS keyboard to trigger submit button

6,719 views
Skip to first unread message

Chris Jackson

unread,
Dec 30, 2013, 7:28:30 PM12/30/13
to phon...@googlegroups.com
Hello. I am hoping this is the correct place to ask this. I have not been able to find anything while searching this weekend. I am building a Phonegap/HTML iOS app and have run into a snag. In the app I have a very small form (one textfield). When the textfield is tapped on the keyboard pops up as expected for the user to enter text. If I close the keyboard (by pressing 'Done'), the keyboard hides allowing me to press the submit button on the form. This works great.

However, if I press 'Enter' on the keyboard it does not submit the form. It actually refreshes the page. I would have thought that by pressing 'Enter' that would have done the same as tapping the submit button on the page. What would I need to do to make this happen.

Thanks for any help!

WebSteve

unread,
Dec 31, 2013, 10:32:50 AM12/31/13
to phon...@googlegroups.com
That's strange. I would think the Enter key would add a new line. Is this an <input> field or <textarea>? (At any rate, I don't know how this would be fixed.)

Alberto Mendoza

unread,
Jan 1, 2014, 11:24:44 PM1/1/14
to phon...@googlegroups.com
You might need to listen the "keyup" event and evaluate the "Enter" key code.


Then proceed to validate/submit your form or any action you need.

Chris Jackson

unread,
Jan 2, 2014, 9:19:31 AM1/2/14
to phon...@googlegroups.com
I looked into the keyup but don't think that is the problem since action is being taken when the enter button is pressed (just the wrong action). The form is in a data-role="panel". I am wondering if that has anything to do with it???

The button on the page has an onclick event to fire a javascript function (The button on the page works fine). I tried moving the onclick event to the opening form tag but it did not work.

<form id="myform" onclick="sendVal(); return false;">

madhu latha

unread,
Jan 2, 2014, 9:22:31 AM1/2/14
to phon...@googlegroups.com

Use onsubmit attribute to submit the form when clicked in iphone

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Chris Jackson

unread,
Jan 2, 2014, 10:04:52 AM1/2/14
to phon...@googlegroups.com
I just tried onsubmit. That didn't work either. It refreshes the page, essentially sending the user back to the beginning (#page1). I thought maybe the target should be changed for the form but I tried that already with no luck (target= _blank, _parent, etc.)




On Monday, December 30, 2013 7:28:30 PM UTC-5, Chris Jackson wrote:

Alberto Mendoza

unread,
Jan 2, 2014, 9:03:09 PM1/2/14
to phon...@googlegroups.com
Try to add preventDefault(); in your sendVal() function, this will prevent to submit the page.

[code]
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Form Submit</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body onload="handleBodyLoad()">
        <div>
            <form onsubmit="handleSubmit();">
                <input type="text" />
                <input type="submit" value="Submit" />
            </form>
        </div>
        <script>
            function handleBodyLoad(){
                alert("Body has been loaded.");
            }
            function handleSubmit(){
                preventDefault();
                alert("Form submitted.");
                return true;
            }
        </script>
    </body>
</html>
[/code]

Kevin Rosen

unread,
Jan 3, 2014, 11:54:09 AM1/3/14
to phon...@googlegroups.com
What you need to make sure is that both your textfield as well as your button are inside a <form> and that form has an obsubmit. Also, you need to make sure the button is a <input type="submit" /> and not a <button />. If this doesn't work, post a snippet of your code and I will look into it, but this method works just fine for me on iOS and Android. Also, the "Done" button should change into "Go" if it works


On Monday, December 30, 2013 4:28:30 PM UTC-8, Chris Jackson wrote:

Chris Jackson

unread,
Jan 3, 2014, 9:00:00 PM1/3/14
to phon...@googlegroups.com
I tried preventDefault() with no luck.

The following is a chunk of code from the page (which includes all of the form code). The textfield and button are both inside the form and labeled correctly.



<div data-role="page" id="page2">
            
            <div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-dismissible="true" data-theme="b">
               
                <form name="answerform" onsubmit="sendVal(); return false;">
                <input type="text" id="ans"  value="" />
                <input type="hidden" id="number" value="">
                <a href="#" data-role="button"  data-inline="true" onclick="sendVal(); return false;">Submit</a>
                </form>
                
            </div>


<!-- the rest of #page2 code -->

Alberto Mendoza

unread,
Jan 4, 2014, 3:50:49 PM1/4/14
to phon...@googlegroups.com
Try to use a "submit" button instead of a link (<a>...)

<input type="submit" value="Submit" />

You can remove "button"  look-like by using some CSS code.

Chris Jackson

unread,
Jan 4, 2014, 7:50:35 PM1/4/14
to phon...@googlegroups.com
Changing  to input type submit didn';t seem to do it but I found the following that works perfectly. I just added it to onSubmit..


function hideKey() {
document.activeElement.blur();
$("input").blur();
};

Thanks for all the help!!

Tien Do

unread,
Jan 7, 2014, 10:30:46 AM1/7/14
to phon...@googlegroups.com
I don't understand why this code works, really, and it's very strange to submit a form with this code.

If submit is not handled automatically, in my code, I often handle Enter key by input's keypress event and check its e.which with 13, if it is matched then fire submit.
Reply all
Reply to author
Forward
0 new messages