[SOLVED] Form submit without reload

almightyegg · 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>

jcj · 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.";
}

?>

almightyegg · 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

jcj · 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);
}
?>

gggggggg · 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

iGetRid · 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 !

Sign In

[SOLVED] Form submit without reload

Recommended Posts

almightyegg

Link to comment

Share on other sites

jcj

Link to comment

Share on other sites

almightyegg

Link to comment

Share on other sites

jcj

Link to comment

Share on other sites

gggggggg

Link to comment

Share on other sites

iGetRid

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information