input submit button not working on android devices

Question

I have website with submit button, It can be clicked, but there is no action on android (chrome). On PC chrome it works fine. Dont know where the problem is...

<input style="display:none" type="submit" class="inline-right vytvorplakat" value="Publikovat plakát" onclick="capture();" />

function capture() {
    $('#target2').html2canvas({
        onrendered: function (canvas) {
            //Set hidden field's value to image data (base-64 string)
            $('#img_val').val(canvas.toDataURL("image/png"));
            //Submit the form manually
            document.getElementById("myForm").submit();
        }
    });
}

I tried this: (as Navjot Singh suggested) but still the same problem, only works on desktop

<input style="display:none" type="submit" class="inline-right vytvorplakat" value="Publikovat plakát" <a href="javascript:capture()">

How can the button be clicked when it's set to `display: none`? — Rory McCrossan, Jan 27 '17 at 09:09
There is script, checking if there is correct input in textarea, if yes, the button is vissible. It works, the button shows correctly both on PC and mobile, but on mobile clicking it do nothing and on PC it is submited. — user7176800, Jan 27 '17 at 09:13
have a look at this. http://stackoverflow.com/questions/5453937/onclick-event-not-working-in-javascript — , Jan 27 '17 at 09:18

Ionut · Answer 1 · 2017-01-27T10:16:10.693

1

onclick is deprecated and it can have unexpected behaviour on modern browsers or devices. Try binding an event listener for the click like this:

  document.getElementsByClassName("vytvorplakat")[0].addEventListener("click", capture);

UPDATE:

Demonstrative snippet:

function capture() {
  console.log('test');
  //here goes your html2canvas code
}

document.getElementsByClassName("vytvorplakat")[0].addEventListener("click", capture);

<input type="submit" class="inline-right vytvorplakat" value="Publikovat plakát" />

edited Jan 27 '17 at 10:16

answered Jan 27 '17 at 09:09

Ionut

10,249
4
33
62

Thanks, but dont know where to put it, should it be somewhear in the "function capture()" script? – user7176800 Jan 27 '17 at 09:59

Mohammed Magdy · Accepted Answer · 2017-01-27T11:00:04.167

try Bind event in JS To solve this issue :)

$(".vytvorplakat").on("click" ,capture );

i think this will solve your issue set ID to this button and Bind event in this id Because Onclick not support an some browser

HTML

<input id="testing" type="submit" class="inline-right vytvorplakat" value="Publikovat plakát"  />

js

$("#testing").on("click" ,capture );

function capture() {
   //remove this alert 
  alert("Welcom from capture");
  $('#target2').html2canvas({
    onrendered: function(canvas) {
      //Set hidden field's value to image data (base-64 string)
      $('#img_val').val(canvas.toDataURL("image/png"));
      //Submit the form manually
      document.getElementById("myForm").submit();
    }
  });
}

@user7176800, how is this different from my answer? My answer is the same, only pure JavaScript. My solution didn't worked?? — Ionut, Jan 27 '17 at 10:29

input submit button not working on android devices

2 Answers2