An HTML form not functioning on mobile devices

Question

I have a simple single field newsletter signup form with one input field and an submit button. I use a <a> tag with the onclick property set to a javascript function that forces an HTML5 check of the 'required' fields and submits the form. This setup works great with desktop, but doesn't work at all with mobile devices, and I'm not exactly sure why.

Here is the stripped down HTML and JavaScript files I'm using:

newsletterForm.html

<form action="formSubmit.php" method="POST">

    <label for="emailfield">Email here:</label>
    <input type="text" name="email" id="emailfield" required>

    <input type="submit" name="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px>
    <a onclick="submitform();">Sign up</a>

</form>

handleforms.js

function submitform() {

    document.getElementById('submithandler').click();
}

I was using the <a> tag because I wanted to use special styling that wasn't working with an <input type='submit'> tag, although if there is a way to force a style on the submit button, that would be nice.

When the user clicks the button, or link, it should emulate a click on the <input type='submit'> form element in order to force an HTML5 check for the 'required' input fields.

What would prevent this setup from functioning on mobile and how could I fix it?

I'm open to critiques and comments about my code, I hope to learn from anyone willing to teach.

Answer 1

Try the below code it will work

<form action="formSubmit.php" method="POST" id="myform">

<label for="emailfield">Email here:</label>
<input type="text" id="emailfield" required>

<input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px>
<a onclick="submitform();">Sign up</a>

</form>


function submitform() {

document.getElementById('myform').submit();
}

Answer 2

You need to add name property to all the input fields. Without that the form cannot be submitted.

<form action="formSubmit.php" method="POST">

    <label for="emailfield">Email here:</label>
    <input type="text" id="emailfield" required name="emailfield">

    <input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px" name="submit">
    <a onclick="submitform();">Sign up</a>

</form>

Answer 3

Click events don't work on iOS and some phone browser, you'd have to use the touchstart, touchmove and touchend events to work out if the users tapped the screen.

Code:

 <script>
       var tap = true;
       document.addEventListener('touchstart',function(e) {
          tap = true;
       });
       document.addEventListener('touchmove',function(e) {
         tap = false;
       });
       document.addEventListener('touchend',function(e) {
          if(tap) {
             //users tapped the screen
          }
       });
    </script>

Something along the lines of that

Answer 4

These are not the valid uses of an HTML Form. We should use them according to their standard behavior.

Use onsubmit attribute instead of binding click events. This will work like a charm in devices as well. Just make sure you have written type="submit" to the submit button.

<form action="formSubmit.php" onsubmit="myFunction()">
   Enter name: <input type="text" name="fname">
   <input type="submit" value="Submit">
</form>

<script>
  function myFunction() {
    alert("The form was submitted");
  }
</script>

Answer 5

Try code given below :

It will also disable click of form submit on mobile devices

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form action="formSubmit.php" method="POST">
<label for="emailfield">Email here:</label>
<input type="text" id="emailfield" required>
<input type="submit" id="submithandler" style="position:absolute;top:0;left:-9999px;width:1px;height:1px;">
<a id="Submit_Form" style="cursor: pointer;">Sign up</a>
</form>
<script>
$( document ).ready(function() {
    $('#Submit_Form').on("click",function(){
     var isMobile = window.matchMedia("only screen and (max-width: 760px)");
     if (isMobile.matches) 
     {
         $('#submithandler').prop('disabled', true);
     }
     else
     {
         $('#submithandler').click();
     }
  }); 
});
</script>

There is a JavaScript API built in for detecting media. below lines are for tablets and mobile screens and it will disable click of submit button on mobiles and tablets :

var isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (isMobile.matches) 
{
$('#submithandler').prop('disabled', true);
}

Hope this answer will Help you!