title: Jquery ajax call doesn't work on mobile
body: <p>I'm trying to use ajax and jquery to submit a form when a user checks a checkbox. Then it should submit an ajax call to an order.php page.</p>
  
  <p>This is the javascript used</p>
  
  <pre><code>$(document).ready(function () {
      $("#statusform").on("change", "input:checkbox", function () {
          $("#statusform").submit();
      });
  });
  
  $(function () {
      $('#statusform').on('submit', function (e) {
          e.preventDefault();
          $.ajax({
              type: 'POST',
              url: 'order.php?id=&lt;?php echo $id; ?&gt;&amp;action=changestatus',
              datatype: "json",
              data: $(this).serialize(),
              success: function (data) {
                  console.log(data["json"]);
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  console.log(JSON.stringify(jqXHR));
                  console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
              }
          });
      });
  });
  </code></pre>
  
  <p>And heres the form</p>
  
  <pre><code>&lt;form id="statusform"&gt;
      &lt;input type="checkbox" data-role="flipswitch" name="betalt" id="betalt" data-on-text="Betalt" data-off-text="Ikke betalt" data-wrapper-class="custom-size-flipswitch" &lt;?php if ($row['betalt']) {echo "checked";}?&gt;&gt;
      &amp;nbsp;&amp;nbsp;
      &lt;input type="checkbox" data-role="flipswitch" name="leveret" id="leveret" data-on-text="Leveret" data-off-text="Ikke leveret" data-wrapper-class="custom-size-flipswitch" &lt;?php if ($row['leveret']) {echo "checked";}?&gt;&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Everything works fine on a desktop pc browser, but when tried on a google chrome mobile browser on my iphone, it doesn't seem to do anything.</p>
  
  <p>Do any of you guys have any ideas?</p>