almightyegg Posted March 6, 2009 Share Posted March 6, 2009 Hi, I posted this on javascript board first but got told ajax would be better for my problem...right, I have a form with a simple text input and a submit button... I want that button, when pressed, to access a file (new.php) and take that message data with it BUT without the page reloading at all and the message input emptyig after the file is accessed... I'd be really greatful if somebody could point me in the right direction... here's my form currently: <form method="POST"> <input type="text" name="message"> <input value="Post!" type="submit"> </form> Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/ Share on other sites More sharing options...
jcj Posted March 7, 2009 Share Posted March 7, 2009 I put together a quick AJAX sample based on your form. Here is your form with the AJAX function in the head. <html> <head> <script type="text/javascript"> function getMessageResponse(str) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById('response').innerHTML=xmlHttp.responseText; document.myform.message.value = ''; } } var url="new.php"; url=url+"?message="+str; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> </head> <body> <form method="POST" name="myform" id="myform"> <input type="text" name="message"> <input value="Post!" type="button" onclick="getMessageResponse(document.myform.message.value);"> </form> <div id="response" name="response">Response will be placed here on submit.</div> </body> </html> And the sample new.php I used for testing. <?php if(isset($_GET['message'])) { $received = $_GET['message']; echo "I received: $received."; } ?> Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/#findComment-778682 Share on other sites More sharing options...
almightyegg Posted March 7, 2009 Author Share Posted March 7, 2009 Thanks for you reply - only problem is in my new.php is a mysql_query("INSERT INTO blah blah blah The way I have it set up is that there is an IFRAME with mysql data in it and it reloads every 5 seconds. When posting something with my form, that new information doeasn't display until I refresh the page... So A) How do I make it insert correctly B) is there anyway of doing the mysql thing without it being reloaded and making a horrible clicking sound and also clogging up my browse history thanks in advance Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/#findComment-779047 Share on other sites More sharing options...
jcj Posted March 7, 2009 Share Posted March 7, 2009 It's basically the same as my previous example.. In this version I created a table named "demotbl" in the database "demo" with a demo_pk (auto increment) field and a descr (text) field. form page: <html> <head> <script type="text/javascript"> function getMessageResponse(str) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById('response').innerHTML=xmlHttp.responseText; document.myform.message.value = ''; } } var url="new.php"; url=url+"?message="+str; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> </head> <body> <form method="POST" name="myform" id="myform" onSubmit="return false;"> <input type="text" name="message"> <input value="Post!" type="submit" onclick="getMessageResponse(document.myform.message.value);"> </form> <div id="response" name="response">Response will be placed here on submit.</div> </body> </html> PHP page (note that you would want to include error checking in this for your final version.. This is just a quick demo.) <?php if(isset($_GET['message'])) { /* this code is missing all error/sanity checks. Just a quick and dirty * example of inserting a record and echoing the complete table back. */ //Connect $con = mysqli_connect("localhost", "demo", "demodemo", "demo"); //Set the message variable that we will insert into the database. $message = mysqli_real_escape_string($con, $_GET['message']); //Set up and execute the insert query. $insertquery = "insert into demotbl(descr) values('$message')"; mysqli_query($con, $insertquery); //Set up and execute the select query to return all the values including //the new one. $selectquery = "select * from demotbl order by demo_pk"; $result = mysqli_query($con, $selectquery); //echo the results from the select query while ($row = mysqli_fetch_assoc($result)) { echo $row["demo_pk"] . " " . $row["descr"] . "<br />"; } //Free result and close connection. mysqli_free_result($result); mysqli_close($con); } ?> Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/#findComment-779102 Share on other sites More sharing options...
gggggggg Posted February 24, 2010 Share Posted February 24, 2010 Hello, not sure if i should have started a new topic or not, so went with sticking to this one. I followed this post to the letter, it worked perfect. But then I realised there are limitations about the size of a URL and what can be passed over a URL. e.g. a & sign. I want to send maybe 5000 characters. Any suggestions, and by the way, this is my first ajax/js attempt, so I will need all the steps please. thanks for your help g Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/#findComment-1017530 Share on other sites More sharing options...
iGetRid Posted May 12, 2010 Share Posted May 12, 2010 I put together a quick AJAX sample based on your form. Here is your form with the AJAX function in the head. <html> <head> <script type="text/javascript"> function getMessageResponse(str) { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.getElementById('response').innerHTML=xmlHttp.responseText; document.myform.message.value = ''; } } var url="new.php"; url=url+"?message="+str; url=url+"&sid="+Math.random(); xmlHttp.open("GET",url,true); xmlHttp.send(null); } </script> </head> <body> <form method="POST" name="myform" id="myform"> <input type="text" name="message"> <input value="Post!" type="button" onclick="getMessageResponse(document.myform.message.value);"> </form> <div id="response" name="response">Response will be placed here on submit.</div> </body> </html> And the sample new.php I used for testing. <?php if(isset($_GET['message'])) { $received = $_GET['message']; echo "I received: $received."; } ?> How do you even DARE to say you put together that script ! You never did fool ! It's on w3schools fuckhead ! I registered to say this, fool ! f you ! Quote Link to comment https://forums.phpfreaks.com/topic/148272-solved-form-submit-without-reload/#findComment-1057407 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.