dreamwest Posted May 29, 2009 Share Posted May 29, 2009 How can i post a form using http request. I can do this with a link and div becuase i know what im passing to the php page: <div id='MyDIV'> <a href='' onclick='RequireAjaxData("/ajax/quicklist.php?vid=100", "MyDIV"); return false;'> Add quicklist</a></div> How can i do this when posting a form. When a user clicks submit button the post gets submitted to the test_mail_basic.php page without page reload : <form action="ajax/test_mail_basic.php" method="post"> Phone <input type="text" name="phone" value="" maxlength="200" size="22"> Comments:<textarea name="comments" cols="31" rows="5"></textarea> <input type="submit" name="send" value="Send"> <form> Quote Link to comment Share on other sites More sharing options...
Alt_F4 Posted May 29, 2009 Share Posted May 29, 2009 use a button instead of a submit and call a javascript function like what you have done with the link <form action="" method="post"> Phone <input type="text" name="phone" id="phone" value="" maxlength="200" size="22"> Comments:<textarea name="comments" id="comments" cols="31" rows="5"></textarea> <input type="button" name="send" value="Send" onclick="submitComment();"> <form> you can either pass the url of the page for ajax to use and the elements to get data from: onclick="submitComment('ajax/test_mail_basic.php','phone','comments');" and make the js function reusable OR just call the function: onclick="submitComment(); and access the data within the js function Let me know if that last bit doesn't make sense Quote Link to comment Share on other sites More sharing options...
dreamwest Posted May 29, 2009 Author Share Posted May 29, 2009 Its accessing the basic_mail.php ok but not posting anything. Heres what i did: <input type="button" name="send" value="Send" onclick='RequireAjaxData("includes/mail_basic.php","phone","comments" , "MyDIV"); return false;'> <div id='MyDIV'></div> Quote Link to comment Share on other sites More sharing options...
dreamwest Posted May 29, 2009 Author Share Posted May 29, 2009 Here is my entire page index.htm: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <script> var object_busy= false; ShowLoading = 1 ; var MyTimer = null; Myvar = "<table align='center'><tr><td><img src='' ></td></tr></table>"; function RequireAjaxData($Request, $Control) { if ($Control == "" || $Control == null) {alert ("No output specified !"); return;} var ai = new AJAXInteraction($Request, GetServerData, $Control ); ai.doGet(); } function GetServerData ($TheData, $Control){ document.getElementById($Control).innerHTML = $TheData; } function AJAXInteraction(url, callback, $Control) { var req = init(); req.onreadystatechange = processRequest; function init() { if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); } else {alert ("Your browser seems to be out of date, Please update!"); return; } } function processRequest () { if (req.readyState == 4) { if (req.status == 200) callback(req.responseText, $Control); } else callback(Myvar , $Control); } this.doGet = function() { req.open("GET", url, true); req.send(null); } this.doPost = function(body) { req.open("POST", url, true); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(body); } } </script> </head> <body> <form action="" method="post"> Phone <input type="text" name="phone" id="phone" value="" maxlength="200" size="22"> Comments:<textarea name="comments" id="comments" cols="31" rows="5"></textarea> <input type="button" name="send" value="Send" onclick='RequireAjaxData("includes/mail_basic.php","phone","comments" , "MyDIV"); return false;'> </form> <div id='MyDIV'></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
JonnoTheDev Posted May 29, 2009 Share Posted May 29, 2009 The event handler should be onSubmit="return functionName()" withing the form tag. Not an onClick() within the button element Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted May 29, 2009 Share Posted May 29, 2009 What neil.johnson said. In the function functionName(), always return false! Quote Link to comment Share on other sites More sharing options...
dreamwest Posted May 29, 2009 Author Share Posted May 29, 2009 Ok changed it to onsubmit, everything works except its not posting the form contents to the php page <form action="" method="post" onsubmit='RequireAjaxData("includes/mail_basic.php", "MyDIV"); return false;'> Phone <input type="text" name="phone" id="phone" value="" maxlength="200" size="22"> Comments:<textarea name="comments" id="comments" cols="31" rows="5"></textarea> <input type="submit" name="send" value="Send" > </form> <div id='MyDIV'></div> Quote Link to comment Share on other sites More sharing options...
Ken2k7 Posted May 29, 2009 Share Posted May 29, 2009 So I'm thinking that's the function RequireAjaxData problem, am I right? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.