Ajax Posting Form Elements

Question

I need your help a bit.

I am trying to 'POST' form elements with ajax. When i get all elements by name i see the result on console of the browser and also it send the datas to databases. But the problem is. it sends checkbox values wrong. it always send "on" value even if i not checked.Select part is working corretly by the way.

Here is my form part

<div class="right-side" id="right-side-id">
  <form action="criterias.inc.php" id="ajax" method="POST" class="ajax">
    <br>
    <center>
      <h>Customize Your Experience</h>
    </center>
    <div class="right-side-options">
      People interested in Friendship<input type="checkbox" class="checkmark" name="friendshipcheck"><br>
      People interested in Practice<input type="checkbox" class="checkmark" name="practicecheck"><br><br>
      Subject of Conversation
      <select name="subjectName" class="select">
        <option value="science">Science</option>
        <option value="love">Love</option>
        <option value="depressive">Deppressive</option>
        <option value="anything">Anything</option>
      </select><br><br>
      Language
      <select name="languageName" class="select">
        <?php
          include('connection.php');
          $sql   = "SELECT* FROM languages";
          $query = mysqli_query($conn, $sql);
          while ($result = mysqli_fetch_assoc($query)) {
            $language = $result["language_name"];
            echo "<option>" . $language . "</option>";
          }
        ?>
      </select>
      <input type="submit" class="searchbutton" id="search-button-id" value="Search" onclick="showPartner();">
    </div>
  </form>
</div>

And here is my Javascript code.

$('form.ajax').on('submit',function(){
  var that = $(this),
    url=that.attr('action'),
    type = that.attr('method'),
    data = {};

  that.find('[name]').each(function(index, value){
    var that = $(this),
      name=that.attr('name'),
      value = that.val();

    data[name] = value;
  });

  $.ajax({
    url:url,
    type:type,
    data:data,
    success:function(response){
      console.log(response);
    }
  });
  return false;
});

Answer 1

The issue is that you are trying to implement your own version of the serialize method, which does not include checkboxes if they are not checked. Your logic is including fields regardless, so long as they have a name field.

Rather than trying to write your own implementation and reinventing the wheel, use the serialize() method that is already implemented by jQuery.

$('form.ajax').on('submit', function (e) {
  e.preventDefault();

  var $this = $(this),
      url = this.action,
      type = this.method,
      data = $this.serialize();

  $.ajax({
    url: url,
    type: type,
    data: data,
    success: function(response) {
      console.log(response);
    }
  });
});

Answer 2

This is the default behaviour in jQuery. What you need to do is explicitly handle the checkbox values to determine if its checked or not. Change your ajax method as follows. We'll modify the loop so it checks the checkbox value:

that.find('[name]').each(function(index, value){
   var that = $(this),
       name= that.attr('name'),
       value = that.val();


       if (that.attr('type') === 'checkbox') {
         data[name] = that.is(':checked') // this will set the value to true or false
       } else {
          data[name] = value;
       }

});

Answer 3

You should use;

$('#checkboxelement').is(":checked")

to read checked status of checkbox and radio elements.