Overthere

asked on 3/13/2017

Ajax and PHP

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

* CodingPHPAJAX

Last Comment

Overthere

8/22/2022 - Mon

Brian Tao

3/13/2017

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

ASKER CERTIFIED SOLUTION

Julian Hansen

3/13/2017

Become an EE member today7-DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.

Not exactly the question you had in mind?

Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.

ask a question

Julian Hansen

3/14/2017

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

3/14/2017

ASKER

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.

Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!

James Murphy

Overthere

3/14/2017

ASKER

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

Julian Hansen

3/14/2017

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

3/14/2017

ASKER

I see, I was wondering....

Get an unlimited membership to EE for less than $4 a week.

Unlimited question asking, solutions, articles and more.

Ray Paseur

3/14/2017

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

3/14/2017

ASKER

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.