CODEWITHSUNDEEP
javascripthtmlforms
SuperContraptionGuy
SuperContraptionGuy

Reputation: 35

An HTML form not functioning on mobile devices

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.

Upvotes: 1

Views: 8409

Answers (5)

Rohit Agre
Rohit Agre

Reputation: 1528

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>

Upvotes: 2

Ankita Tanti
Ankita Tanti

Reputation: 455

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!

Upvotes: 0

Krunal Modi
Krunal Modi

Reputation: 747

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>

Upvotes: 0

digit
digit

Reputation: 4565

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

Upvotes: 0

Kiran Kumar
Kiran Kumar

Reputation: 1051

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();
}

Upvotes: 3

Related Questions