form using AJAX JQUERY PHP not working -


i unable load external file while using ajax jquery. want use jquery ajax pop form validate, enter data in mysql. starting simple ajax function. kindly let me know going wrong

<!doctype html> <html>     <head>         <link rel="stylesheet" type="text/css" media="all" href="test_style.css">         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">    </script>         <script>         $(document).ready(function(){             $("#ajax-contact-form").submit(function(){                 var str = $(this).serialize();                 $.ajax({                     type: "post",                     url:"contact.php",                     data: str,                     success:function(result) {                         $("#div1").html(result);                     }                 });             });         });         </script>     </head>     <body>         <div id="contact_form">               <form id="ajax-contact-form" name="contact" action="">                  <fieldset>                     <label for="name" id="name_label">name</label>                     <input type="text" name="name" id="name" size="30" value="" class="text-input"/>                       <label class="error" for="name" id="name_error">this field required.</label>                       <input class="button" type="submit" name="submit" value="send message">                 </fieldset>               </form>         </div>      </body> </html> 

and contact.php file is

<?php echo "hello"; ?> 

<!doctype html> <html> <head>  <link rel="stylesheet" type="text/css" media="all" href="test_style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>    <script> $(function() {    $(".button").click(function() {       $.ajax({url:"contact.php",success:function(result){       $("#div1").html(result);     }});     return false;   }); }); </script>   </head> <body>  <div id="contact_form">  <form name="contact" action="">  <fieldset>    <label for="name" id="name_label">name</label>      <input type="text" name="name" id="name" size="30" value="" class="text-input" />    <label class="error" for="name" id="name_error">this field required.</label>    <input type="submit" name="submit" class="button" id="submit_btn" value="send" /> </fieldset>   </form> </div>  <div id="div1"> </div>    </body> </html> 

try that:

what needed fixed:

1) you'd duplicated onready function,

2) can use submit form button, since it's default action submit form, result wouldn't have been visible.

3) there no #div1 result displayed in.

hopefully, has been helpful... happy coding!


Comments

Popular posts from this blog

css - Which browser returns the correct result for getBoundingClientRect of an SVG element? -

gcc - Calling fftR4() in c from assembly -

.htaccess - Matching full URL in RewriteCond -