We help IT Professionals succeed at work.

Ajax and PHP

Overthere
Overthere asked
on
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

Brian TaoOwner
CERTIFIED EXPERT
Top Expert 2014

Commented:
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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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

Author

Commented:
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.

Author

Commented:
Thank you - you cleared the fog up....
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
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.

Author

Commented:
I see, I was wondering....
Most Valuable Expert 2011
Author of the Year 2014

Commented:
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/

Author

Commented:
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.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions