SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery.datepicker + Form validation

    jQuery.datepicker + Form validation

    Hi all

    I have a simplified version of the form I'm working with here.

    http://www.ttmt.org.uk/forum/dateForm/

    The form uses a jQuery datepicker plugin - http://www.kelvinluck.com/assets/jqu...icker/v2/demo/

    Everything was working fine until I tried to pass the form values to a php script using another jQuery script that I wrote.

    In the code here I have the jQuery to post the values commented out so the datepicker works. If I have the JQuery post function uncommented the datepicker doesn't appear.

    Can anyone see what I doing wrong here.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <script type="text/javascript" src="js/jQuery1.4.3.js"></script>
      <script type="text/javascript" src="js/date.js"></script>
      <script type="text/javascript" src="js/jquery.datePicker.js"></script>
      <script type="text/javascript">
        $(function(){
        	$('.date-pick').datePicker();
          /*
        	$('#book_submit').submit(function(){
        	  var booknameVal = $('#bookname').val();
        	  var bookemailVal = $('#bookemail').val();
        	  var bookphoneVal = $('#bookphone').val();
        	  var bookdateVal = $('#date1').val();
        	  //
        	  $.post("book.php"),{
        	    name: booknameVal,
        	    email: bookemailVal,
        	    phone: bookphoneVal,
        	    date: bookdateVal }, function(data){ $('book_status p').html(data);
        	    if(data.indexOf('Thank You')==0){document.forms[0].reset();}
        	  });
        	  return false;
        	})
          */
        });
        
      </script>
    	
    	<title></title>
      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        form{
          margin:30px;
          width:20em;
        } 
        form fieldset{
          border:0;
        }   
        form label,
        form input,
        form select{
          float:left;
        }
        form label{
          width:100%;
        }
        form input,
        form textarea{
          background:#eee;
          width:100%;
          border-width:0;
          padding:.35em .2em;
          margin-bottom:8px;
          font-size:1em;
          border:1px solid #ddd;
        }
        form input:focus,
        form textarea:focus,
        form input:hover,
        form textarea:hover{
          background:#e1dfdf;
        }
        form select{
        margin-bottom:20px;
        }
        form #send{
          width:80px;
          margin-top:25px;
          padding-top:7px;
          clear:both;
          background:gold;
        }
      </style>
    	<link rel="stylesheet" href="css/datepicker.css" type="text/css" />
    </head>
      
    <body>        
      <form id="book_submit" method="post" action="">
        <fieldset>
          <label for="name">Name</label>
          <input type="text" id="bookname" >
          <label for="email">Email</label>
          <input type="text" id="bookemail" >
          <label for="date">Date</label>
          <input name="date1" id="date1" class="date-pick">
          <input type="submit" value="SEND" id="send" />
        </fieldset>
      </form>
              
    </body>
    </html>

  2. #2
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed it.

    I had loads of typo's and stupid errors.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •