Writing a form where the user doesn't leave the page after submit

[Jeremy_H]

I’m trying to create a form on my page that that allows for a user to type some data into a field, click send, they stay on the same page, and an alert shows on the screen thanking them for the submission.

The data they have sent then gets written into a special log file for me to review later.

Is this possible? And if so, how do I progress from what I have below?

<form action="" method="post">
<input name="" type="text"><input type="submit" value="Submit">
</form>

Many thanks!

[createErrorMsg]

One way is to have the form submit to itself (make the form file the recipient in the action attribute) and then place the script which processes the form data in the form page. If the script doesn't detect any POST data (like when the user first visits), it loads just the form page. If there is POST data, the script processes it, generates the "Thanks for submitting" response, then loads the rest of the page.

Just one solution of many, I'm sure.

cEM

[Jeremy_H]

Thank you very much for the suggestions cEM.

I have a reservation however, with submitting to the same page, since the user will then be brought back up to the top of the page, which could prove to be very confusing.

I've been writing down some ideas on some paper, and I think I might have an idea:

Can a form submit to a target on the page but not showing, then that loaded page would read and write the variables, then load the 'Thanks'.

I don't know, maybe that would make for some sloppy code?

[BradleyT]

You could use some CSS to hide the form and display a thank you message.

[kaled]

If you are using GET rather than POST and javascript is enabled, you could simply change the href of an element (such as an image or iframe) on the page. You would have to gather the data yourself rather than rely on the form's submit method but you could still use a submit button and use onsubmit="processForm(); return false". This would allow the enter key to be used normally.

Kaled.

[Robin_reala]

Jeremy - have the form submit not just to an address but to a fragment as well. E.g.:

<form action="thispage.php#form_id">

[alex77]

Expanding kaled's approach, you could use Ajax to execute the request, provided that Javascript is enabled.

Basically, you call a Javascript function that generates a new HTTP request in the background. You can use server-side code (PHP, JSP, ...) to evaluate the request, log your info and deliver whatever response code you need. Then, the client-side Javascript can evaluate the response and dynamically change the page accordingly.

The effect is that you have a proper HTTP request-response-cycle going without the browser refreshing (since it's running in the background).

The Javascript you need for that is surprisingly simple:

 function retrieveURL(url) {
 if (window.XMLHttpRequest) { // Non-IE browsers
  req = new XMLHttpRequest();
  req.onreadystatechange = processStateChange;
  try {
  req.open("GET", url, true);
  } catch (e) {
  alert(e);
  }
  req.send(null);
 } else if (window.ActiveXObject) { // IE
  req = new ActiveXObject("Microsoft.XMLHTTP");
  if (req) {
  req.onreadystatechange = processStateChange;
  req.open("GET", url, true);
  req.send();
  }
 }
 }

 function processStateChange(status) {
 if (req.readyState == 4) { // Complete
  if (req.status == 200) { // OK response
  // insert response in page
  document.getElementById("someElement").value = req.responseText;
  } else {
  alert("Problem: " + req.statusText);
  }
 }
 }

For further reading, check Wikipedia for Ajax and continue from there.