Question

I’m trying to implement Ajax jQuery Form submission. The code I pasted below is not working. I get an undefined index error for day month and year

jQuery Ajax

<script>
 $(document).ready(function() {
    $('#cal_submit').click(function(event) { 
      if ($('select[name="day"]').val() == '') {
            event.preventDefault();
            alert('Please enter a day');
        }
        else {
            event.preventDefault();
            new_day = $('select[name="day"]').val();
            new_month = $('select[name="month"]').val();
            new_year = $('select[name="year"]').val();
            $.get('function.php', { day: new_day, month: new_month, year:new_year} );
            $('select[name="day"]').val('');
            $('select[name="month"]').val('');
            $('select[name="year"]').val('');
        }
    }); 
});
</script>

The function where the handling php is located.

function calendar()
{ 


        $j = mysql_real_escape_string($_GET['day']);
        $F = ucwords(mysql_real_escape_string($_GET['month']));
        $Y = mysql_real_escape_string($_GET['year']);
        $date =" ".$F." ".$j.", ".$Y." ";

   $query = "SELECT * 
              FROM calendar 
              WHERE event_day = '".$j."'
              AND   event_month = '".$F."'
              AND   event_year  = '".$Y."'" ; 
            $run = mysql_query($query);
            $norows = mysql_numrows($run);

            if ($norows < 1){
                echo "<div class=\"indexnoresult\">No TAP Event(s) for $date</div>" ;
            }  else {
            while($row = mysql_fetch_array($run)) {

                  echo "<div class=\"indexnoresult\">Event(s) for $date<br>
                   Name :   $row[event_name]  <br>
                   Time :   $row[event_time]   <br> 
                   Venue :  $row[event_venue]  <br>
                  </div> 
                 " ;



            }

            } ?>

HTML Form

     <form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" >

                Pick Date To View Events     

             <select name="day">
                    <option value ="">    </option>
                    <option value ="1">1</option>
                    <option value ="2">2</option>   
             </select> 

    Month
                <select name="month">
                    <option value ="">    </option>
                    <option value ="january">January</option>
                    <option value ="february"> february </option>
                    <option value ="march">March</option>
                 </select>

    Year:
                 <select name="year">
                    <option value ="">    </option>
                    <option value ="2005">2005</option>
                    <option value ="2006">2006</option>             
               </select>

    <input type='submit' name='cal_submit' id='cal_submit'>
    </form>
    </div> 

Please where I’m I going wrong.

Answer 1

you need to have the same variable in your ajax object/data.

        day = $('select[name="day"]').val();
        month = $('select[name="month"]').val();
        year = $('select[name="year"]').val();
        $.get('function.php', { day: day, month: month, year:year} );

the first select option (default value when ajax is called, without making a selection from the select list) is blank, thats why the error.

also, the form says POST method whereas your ajax is GET.