troubleshooting Question

Ajax and PHP

Avatar of Overthere
Overthere asked on
* CodingPHPAJAX
9 Comments1 Solution199 ViewsLast Modified:
After reading and experimenting, I wrote a snippet of coding. I am beginning to understand and get the 'gist' of it but still newbie. I have it pretty clean except that when it returns my result, the form displays again and it goes downhill from there...what am I doing wrong??
Should I place the data validation in a separate page and just return the error message? I haven't inserted the coding to display a pop-up error message to user but that's something I would like to do too.  What would that look like?
I have attached screen shots and have inserted the coding. Any advice would be much appreciated... I am really trying to learn this technique.

<?php
if (isset($_POST))
{
    $begdate = isset($_POST['txtdepartdate']) ? $_POST['txtdepartdate'] : 'No Departure Date passed through<br>';
    $enddate = isset($_POST['txtreturndate']) ? $_POST['txtreturndate'] : 'No Return Date passed through<br>';
        // display them
        $result = 'Departure Date:' . $begdate  . '  Return Date: ' . $enddate; 
        echo $result;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="UTF-8"> 
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script>
$(document).ready
     (function() 
{
    $("#search").click
	(function(e) 
	{
        e.preventDefault();

        $.ajax
		({
            url: 'testajax.php',
            type: 'POST',
            data:{
                'txtdepartdate' : $('#txtdepartdate').val(),
                'txtreturndate' : $('#txtreturndate').val()
            },
            success: function(data, status){
                $('#result').html(data)
            }
        });
    });
});
</script>
<script>
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
	showButtonPanel: true,
    buttonImage: 'jquery-ui-1.12.1.custom/images/calendar.gif',
    buttonImageOnly: true,
	dateFormat: 'mm-dd-yy'
	
   });
  });
</script>
</head>
<body>
<div id="result">Dates should Display here</div>
<form>
	<table style="margin: auto;">
		<tr>
        	<div name="txtdepartdate">
                <td style="text-align:right">Depart Date:
				</td>
				<td>
                    <input type="text" id="txtdepartdate" name="txtdepartdate" class="datepicker" />
	            </td>
	        </div>	
	        <div name="txtreturndate">
                <td style="text-align:right">Returning Date:
				</td>
				<td>
     	            <input type="text" id="txtreturndate" name="txtreturndate" class="datepicker" />
	            </td>
	        </div>	
        </tr>
    </table>
	<br>
    <table style="margin: auto;">	
        <tr>
              <td style="text-align:center" colspan="4"><input type="submit" id="search" name="search" />
			  </td>
		</tr>
	</table>				
</form>
</div>
</body>
</html> 
first-time-page-loads.JPG
after-submitting.JPG
datepicker-display-error.JPG
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 9 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 9 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros