title: Jquery Mobile Ajax Post Insert Data
body: <p>I'm trying to post data from a form with an ajax post. Currently I am just debugging this by alerting the data sent, via a php script.</p>
  
  <p>So my code html :</p>
  
  <pre><code>       &lt;form id="form_sewa"&gt;
              &lt;input type="hidden" name="penyewaan" id="penyewaan" value=""&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="nama_anak"&gt;Nama Anak:&lt;/label&gt;
                  &lt;input type="text" data-mini="true" name="nama_anak" id="nama_anak" value=""&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="jumlah_uang"&gt;Jumlah Uang:&lt;/label&gt;
                  &lt;input type="number" data-mini="true" name="jumlah_uang" pattern="[0-9]" id="jumlah_uang" value=""&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="harga_kamar"&gt;&lt;b&gt;Harga&lt;/b&gt; Kamar:&lt;/label&gt;
                  &lt;input type="number" data-mini="true" name="harga_kamar" pattern="[0-9]" id="harga_kamar" value=""&gt;
              &lt;/div&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;!-- Untuk tanggal --&gt;
                  &lt;label for="tanggal_masuk"&gt;Tanggal &lt;b&gt;Masuk:&lt;/b&gt;&lt;/label&gt;
                  &lt;input id="tanggal_masuk" name="tanggal_masuk" data-mini="true" /&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="tanggal_keluar"&gt;Tanggal &lt;b&gt;Keluar:&lt;/b&gt;&lt;/label&gt;
                  &lt;input id="tanggal_keluar" name="tanggal_keluar" data-mini="true" /&gt;
              &lt;/div&gt;
              &lt;br&gt;
              &lt;div class="form-group col-md-12"&gt;
                  &lt;label for="no_kamar"&gt;&lt;b&gt;Nomor&lt;/b&gt; Kamar:&lt;/label&gt;
                  &lt;input type="number" data-mini="true" name="no_kamar" pattern="[0-9]" id="no_kamar" value=""&gt;
              &lt;/div&gt;
              &lt;input type="submit" data-role="button" data-theme="f" data-inline="true" data-icon="check" id="submitSwa" /&gt;
              &lt;a href="#" data-role="button" data-theme="f" data-inline="true" data-rel="back"&gt;Kembali&lt;/a&gt;
          &lt;/form&gt;
  </code></pre>
  
  <p>In JavaScript</p>
  
  <pre><code>    $(document).ready(function(){
          $("#submitSwa").click(function(){
              $.ajax({
                  url: "http://localhost/apri2/php/crudpenyewaan.php",
                  type: "post",
                  cache:false,
                  data: {
                      nama_anak: $('#nama_anak').val(),
                      jumlah_uang: $('#jumlah_uang').val(),
                      harga_kamar: $('#harga_kamar').val(),
                      tanggal_masuk: $('#tanggal_masuk').val(),
                      tanggal_keluar: $('#tanggal_keluar').val(),
                      no_kamar: $('#no_kamar').val()
                  },
                  success: function(response){
                      alert(response);
                  },
                  error: function(){                      
                      alert('Error while request..');
                  },
                  complete: function() {
                      $.mobile.loading("hide");
                  }
              });
          });
      });
  </code></pre>
  
  <p>And in php</p>
  
  <pre><code>&lt;?php 
      print_r($_POST);    
  ?&gt;
  </code></pre>
  
  <p>I have tried methods like submithandler, formdata serialize, but the alert doesn't show up and my url looks like this after clicking submit:
  <img src="https://i.stack.imgur.com/VMdDU.png" alt="Before submit">
  <img src="https://i.stack.imgur.com/tjsij.png" alt="After submit"></p>