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
Post a Comment