button click not working on mobile

Question

So I have a form that has 2 buttons on the botton.

<div class="col-xs-12">
    <div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
    <a href="/how_to_book.php">
        <div class="how-to-book-button-mobile">
            How to book?
        </div>
    </a>
</div>

originaly i had onclick="send_message();" on the submit-button-mobile (which worked for desktop but not on mobile. Also the tag was also not clickable on mobile.

I've searched here and found this answer to make it work on mobile

        $('.submit-button-mobile').on('click touchstart', send_message);
        $('.how-to-book-button-mobile').on('click touchstart', function() {
            window.location.href = "/how_to_book.php";
        });

And still have the same problem, unclickable on mobile (tried on chrome developer tools with mobile view and tried on iphone and android).

send_message() is in another .js file included at the top of file. It looks like this

function send_message()
        {
            var a=document.forms["Form"]["name"].value;
            var b=document.forms["Form"]["email"].value;
            var c=document.forms["Form"]["message"].value;
            var d=document.forms["Form"]["surname"].value;

            document.getElementById("contact_message").innerHTML = "Sending your message... Please wait.";

            loadXMLDoc(a, b, c, d);
        }


        //pomocna funkcija za validaciju emaila
        function validateEmail(email) {
            var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
            return re.test(email);
        }

        //funkcija za slanje emaila
        function loadXMLDoc(name, mail, message, surname)
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
              {// code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp=new XMLHttpRequest();
              }
            else
              {// code for IE6, IE5
              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
              }
            xmlhttp.onreadystatechange=function()
              {
              if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                document.getElementById("contact_message").innerHTML=xmlhttp.responseText;
                document.getElementById("contact_message2").innerHTML=xmlhttp.responseText;
                }
              }

            // xmlhttp.open("GET","send_enquiry.php",true);
            xmlhttp.open("POST","send_enquiry.php",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("name=" + name + "&email=" + mail + "&message=" + message + "&surname=" + surname);

            xmlhttp.send();
        }

added the send_message function in the original post. Even the link is not working. What am i doing wrong? The same function is working properly on desktop view when i call it with onclick tag inside the div of the button. — Vlatko Murković, May 02 '16 at 07:09
Can you trace it with alerts after and before the document is ready on the page? And also trace it in the `click touchstart` whether the event is fired or not.. — choz, May 02 '16 at 07:13
I don't really understand what you mean by traceing it with alerts. But i've put breakpoints in file where send_message() is and it doesn't go till that part when i click on the button. But when i do it in desktop the breakpoint is working. — Vlatko Murković, May 02 '16 at 07:17
Alerts tracing/console tracing.. Put console.log("hello"); or an alert() inside the click handler and inside the function, so you can see what is actually not working. — Enrico, May 02 '16 at 07:19
Also, use the long syntax for handler and don't forget brackets: .on("click", function(){ console.log("hi"); sendmessage(); }); — Enrico, May 02 '16 at 07:21
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { if ('ontouchend' in document || (/windows phone/i.test(navigator.userAgent.toLowerCase()))){ EventType = (document.ontouchstart!==null)? 'click' : 'touchend'; } } use this code for define event for desktop and mobile and used EventType instead of click or tuchstart and write properly event on button like body .on EventType the selector and function — Rajiv, May 02 '16 at 07:23
the button is not clickable (i guess that is due to page layout (positioning:absolute) I'll try changing that and get back. — Vlatko Murković, May 02 '16 at 07:31
That was the problem, there way another div going over the buttons. I've put z-index a higher number on the buttons and it's working now even with the original option (inline onclick="send_message()") Sorry for bothering you. Thank you for the help — Vlatko Murković, May 02 '16 at 07:35

score 1 · Answer 1 · edited Jun 25 '18 at 22:40

Probably you have to write click function in the same file where you have defined the send_message() definition as well as click definition should be inside document.ready() function. First check whether you are getting alert or not on click of div.

$(document).ready(function() {
$('.how-to-book-button-mobile').on('click touchstart', function(e) {
     e.preventDefault();
           alert("how-to-book-button-mobile");
});
$('.submit-button-mobile').on('click touchstart', function(e) {
           e.preventDefault();
           alert("submit");
});
});

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<div class="col-xs-12">
    <div class="submit-button-mobile">Submit</div>
</div>
<div class="col-xs-12">
    <a href="#">
        <div class="how-to-book-button-mobile">
            How to book?
        </div>
    </a>
</div>

This answer also might help you.

It was only the problem of not being able to click on the button (there was an overlay over it which i didn't notice). Thank you for the help though — Vlatko Murković, May 02 '16 at 07:37
Thanks for sharing your soln. This also might help someone. Feels great when you solve your own problem. — Ram, May 02 '16 at 07:41

button click not working on mobile

1 Answers1