How to format the data string 'Ajax' with the dynamic checkbox list ul

advertisements

I am new to jquery and more specifically ajax.

I have created a form including text fields as well as a dynamic dropdown ul list pulled from a MySQL table. I use a PHP script that checks for empty fields and at least one checkbox is checked in the form and returns true if these conditions are met . I have tested the meeting_new_validation.php and the values I want to return are working fine but my ajax is not effectively talking to it. I am almost positive the error exists at the 'data' string. I am not sure how to format the data string with the inclusion of the dynamic drop down ul list. Here is what I have:

FORM

<form id="new_meeting_form" action="meeting_new_validation.php" method="POST">
  Meeting Name:
  <input type="text" id="meeting_topic" name="meeting_topic" placeholder="ex: ARIA Budget" class="input"/>
  <?php
  require_once('php/config.php');
  $query = "SELECT * FROM tapp_contact_list";
  $result = mysqli_query($con, $query) or die("Query error: " . mysqli_error($con));
  ?>
  <div id="dd" class="wrapper-dropdown"><small id="counter"></small>
    <ul class="dropdown">
      <?php
      $i=1;
      while ($row = mysqli_fetch_array($result)){
        echo '<li><input type="checkbox" id="element-'.$i.'" name="checked[]" value='.$row['Names'].'><label for="element-'.$i.'">'.$i.'. '.$row['Names'].'</label> </li>';
        $i++;
      }?>
    </ul>
  </div>
  Meeting Location:
  <input type="text" id="meeting_location" name="meeting_location" class="input"/>
  Meeting Agenda:
 <input type="text" id="meeting_agenda" name="meeting_agenda" class="input"/>
 <input type="button" name="start" class="new_meeting_validation" onclick="new_meeting_validation()" value="START" />
 <div id="add_err"><br></div>
</form>

php script checking for empty fields: meeting_new_validation.php

<?php
$topic = $_POST['meeting_topic'];
$checked = $_POST['checked'];
$location = $_POST['meeting_location'];
$agenda = $_POST['meeting_agenda'];

if($topic == ""){
  echo '*Please enter a meeting name';
}
elseif($checked == ""){
  echo '*Please select people at the meeting';
}
elseif($location == ""){
  echo '*Please enter a meeting location';
}
elseif($agenda == ""){
  echo '*Please enter a meeting agenda';
}
else{
  echo 'true';
}
?>

JQUERY:

function new_meeting_validation(){
  var meetingTopic=$('#meeting_topic').val();
  var meetingLocation=$('#meeting_location').val();
  var checkbox=$("#checked").val();
  var meetingAgenda=$('#meeting_agenda').val();
  var dataString = 'meeting_topic='+meetingTopic+'checked='+checkbox+'meeting_location='+meetingLocation+'meeting_agenda='+meetingAgenda;
  $.ajax({
    type: "POST",
    url: "meeting_new_validation.php",
    data: dataString,
    cache: false,
    success: function(result){
  var result=trim(result);
  if(result=='true'){
        $("#meeting_new_b").fadeOut('slow');
        window.location='meeting_page.php';
      }
      else{
        $("#add_err").fadeIn('normal').html(result);
      }
    }
  }); //end ajax
  return false;
} //end new_meeting_validation

function trim(str){
  var str=str.replace(/^\s+|\s+$/,'');
  return str;
}

I believe its just a formatting error? Any help is greatly appreciated, thank you in advanced!


You can use jQuery's built-in serialize function:

function new_meeting_validation(){
  $.ajax({
    type: "POST",
    url: "meeting_new_validation.php",
    data: $('#new_meeting_form').serialize(),
    cache: false,
    success: function(result){
    ...

That will give you the complete form, regardless of when what field was added.

On the server side you need to use isset to check what checkboxes were checked as unchecked checkboxes do not get sent to the server.