Ajax and PHP

Overthere asked

on 2017-03-13

9 Comments

1 Solution

190 Views

Last Modified: 2017-03-14

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>

Open in new window

first-time-page-loads.JPG
after-submitting.JPG
datepicker-display-error.JPG

Comment

Watch Question

View Solution Only

Brian Tao

Owner

CERTIFIED EXPERT

Top Expert 2014

Commented: 2017-03-13

Try adding exit() after your line#8

<?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;
        exit();
}
?>
<!DOCTYPE html>
// the rest of your code ...

Open in new window

Julian Hansen

CERTIFIED EXPERT

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2017-03-13

This problem has been solved!

(Unlock this solution with a 7-day Free Trial)

UNLOCK SOLUTION

Julian Hansen

CERTIFIED EXPERT

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2017-03-14

Update on the previous post.

You have some illegal markup in your table.

The <div name="txtdepartdate"> inside the <tr> - what is that for? And why the name attribute?

This is not valid markup and should be removed as per below.

<div id="result">Dates should Display here</div>
<form>
  <table style="margin: auto;">
    <tr>
      <td style="text-align:right">Depart Date:
      </td>
      <td>
        <input type="text" id="txtdepartdate" name="txtdepartdate" class="datepicker" />
      </td>
      <td style="text-align:right">Returning Date:
      </td>
      <td>
        <input type="text" id="txtreturndate" name="txtreturndate" class="datepicker" />
      </td>
    </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>

Open in new window

Overthere

Author

Commented: 2017-03-14

I have no idea why I put the <div lines in for the dates - I think it was because this page originally was a rewrite for tabs. Bad oversight on my part. And the location of the scripts - you are right, bad habit of mine to put where I have - a habit from asp I think and javascipt and afew other things - you know like window.open scripts etc. I am going back, separate coding and revise it.
I noticed you use container and wrapper - why?
And you use "<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />" - why?
I am just trying to understand and been busy re-writing two pages to separate coding - I always did that in other languages but I have no clue why I fail to do it when using PHP etc. Stupid I guess.

Overthere

Author

Commented: 2017-03-14

Thank you - you cleared the fog up....

Julian Hansen

CERTIFIED EXPERT

Most Valuable Expert 2017

Distinguished Expert 2019

Commented: 2017-03-14

noticed you use container and wrapper - why?

The template I use for my samples is constructed that way. I use Bootstrap as the CSS theme because it has out of the box styles I can use to make the page look reasonable without having to do anything.

I wouldn't worry too much about the code that exists outside of the following

<!-- START HTML -->

<!-- END -->

Open in new window

This is what appears in the HTML tab of the source listing at the bottom of the page - and is the meat of the sample - the rest is just a wrapper.

If you are going to use the sample then only look at the CSS / jQuery / HTML tabs in the source - don't worry about the full listing.

Overthere

Author

Commented: 2017-03-14

I see, I was wondering....

Ray Paseur

Most Valuable Expert 2011

Author of the Year 2014

Commented: 2017-03-14

why I fail ... when using PHP

Ha! Everyone fails in PHP because it's a terrible language, especially if you are used to the formal structures of Java or Python, or the helpful conventions of Ruby. It's not just you, believe me. You can't go online and look for a PHP example and find the same code twice. At the high end of PHP, in the FIG, we are trying to bring some discipline and order to the chaotic language. At the low end of PHP, people are hacking away at WordPress sites, copying snippets from shady resources on the internet, and writing scripts that are time-bombs.

If you have some time and want a laugh, read this rant, which is both funny and smart.
https://eev.ee/blog/2012/04/09/php-a-fractal-of-bad-design/

Overthere

Author

Commented: 2017-03-14

As you know Ray, I have had my struggles with it and not whining but whew! And I am trying hard to learn how new methods and new ways.
I guess I like torturing myself - ha ha! But getting there - maybe - lol! I cracked up at the link - reminded when I was coding in assembler on mainframes!!
Thanks for comment.

Ajax and PHP

Premium Content

Premium Content

View Solution Only

Why Experts Exchange?

Did You Know?

Ask ANY Question