Simple form without any redirect

[albert1955]

Hello
I am trying to make a form - just one question with 3 options
but I dont want anything to happen when its submitted
just to remain on the page
something like the small polls you see, but I need to collect the responses as well

thanks for any help
A:|

[chrishirst]

leave the action attribute empty for a form that submits to itself.
<form .... action="" ...>

[MinatureCookie]

If you want it to remain on the page it's been sent on, this is going into AJAX. Basically, the form submits to a page through Javascript, as if attempting to get an XML file.
It is, however, kinda complicated - I'm not sure how much experience you have? http://www.tizag.com/ajaxTutorial/ajaxform.php - that's a link to a tutorial explaining through it, if you're confident enough with Javascript though :)

[chrishirst]

If you want it to remain on the page it's been sent on, this is going into AJAX.No it doesn't!

[MinatureCookie]

No it doesn't!

...It does if you want the form to do anything? Your code would load the original page again; not remain on that page. There's a difference.

[chrishirst]

Do I take it that you're not a programmer then? :D

You simply include the code that handles the form data in the document, then check for the submit button being pressed or form data being present.
Then you either process the form data or show the form to the user.

[MinatureCookie]

Or we can take it that you're not thinking about this properly...
If he's trying to create a poll, then he'll need it to submit to a server-side page to register the results of the form. If he wants it to remain on the page, without reloading the page, he will need AJAX to allow the javascript to communicate with the server-side file.
Simply reloading the page with the server-side code on that page will not have the same effect.

[chrishirst]

Oh please, would you like me to demonstrate how simple it is to collect form data ON THE SAME PAGE as the form is??

Vote in a poll, send email, login, add comments to a page, or ANYTHING
Let me know and I can have a demonstration page live and fully operational for you in under 30 minutes! WITHOUT any use of AJAX at all!!

How do you think this was done BEFORE AJAX came along??

[MinatureCookie]

You're missing the point. AJAX does it without reloading the page.
albert1955:

I dont want anything to happen when its submitted

The page reloading would be something.

Please don't get upset. I'm not saying that what you're saying is wrong. Yes, what you're saying will work.
However, it does not work without anything happening.

[chrishirst]

and the title says "Simple form without any redirect" There is ABSOLUTELY no need to start adding complications such as AJAX when it is ABSOLUTELY unnecessary.

[MinatureCookie]

And then in the post it is stated

but I dont want anything to happen when its submitted
just to remain on the page


The page reloading would be something happening.

(On a side-note, I'm a fan of AJAX - and honestly even if he didn't ask for it, I'd still recommend AJAX. It's just better UI, let alone its faster and sends a lot less data)

[albert1955]

Hey guys and thanks
I should have added the html...

<form method=post action="http://www.pozhet.org.au/cgi-bin/formmail/FormMail.pl">
<input type="hidden" name="recipient" value="webmaster@pozhet.org.au">
<input type="hidden" name="subject" value="viewer location poll">
<input type=hidden name="env_report" value="remote_host,http_user_agent">

<fieldset>
<legend>Which area are you located?</legend>


<input name="location" type="radio" value="Sydney Metro" id="Sydney Metro" />
<label for="Sydney Metro">Sydney Metro</label><br />
<input name="location" type="radio" value="Regional NSW" id="Regional NSW" />
<label for="Regional NSW">Regional NSW</label><br />
<input name="location" type="radio" value="Elsewhere" id="Elsewhere" />
<label for="Elsewhere">Elsewhere</label><br />



</fieldset>

<div id="butdiv" class="reqfield">
<input name="Submit" class="submit" value="Submit" type="submit" />
</div>
<!--End Submit Button Container-->
<br />
</form>

As you can see its just a simple form that I want in a small box so that we can collect data.
I looked at the http://www.tizag.com/ajaxTutorial/ajaxform.php tutorial but cant quiet figure out how to change it to suit this form.
so that the page doesnt reload.
I will appreciate any further help if you could thanks
A:$

[chrishirst]

No choice, you are sending the data to a perl script, so the location that the user is directed to will be specified in the script.

[MinatureCookie]

Well at the moment, that POST data is sent to that PL page. What you want to is just simulate the same effect through Javascript.
So keeep your current code, but give the form an id of "ajaxform".
Then add this javascript at the bottom of your page.

function ajaxFunction(rec, sub, env, action){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var params = "recipient="+rec+"&subject="+sub+"&env_report="+env; //Put your form data here.
xmlhttp.open("POST", action, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);

xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.responseText != "Error"){ //Meaning your PL page must output "Error" if it's an error, and whatever else for a sucess
alert("Success");
}
else{
alert("Error");
}
}
}
}

document.getElementById("ajaxform").onsubmit = function(){
ajaxFunction(this.recipient.value, this.subject.value, this.env_report.value, this.action); //You'll need all of your form inputs here, I'm just doing the first 3 so you'll get the idea
return false; //Stops the page from actually going to the PL page
}


After you fix that up to handle all of your form inputs, then this should work nicely for you :)
Now if a user comes along without Javascript enabled, then they will submit the form to simply look at the PL page. So make sure that it isn't too much just plain text. There are a few users out there without Javascript :)

Let me know if any of that is unclear or whatever, it's quite a large block of ugly code if you're not used to looking at it, I remember.