Now if I understand what you want here, it would essentially be a form that submits, displays a confirmation and then preforms some action while never leaving the page. If this is the case then my original second option would have been the correct choice as it involved the use of AJAX to submit your form. AJAX is basically a way for pages to send and recieve data to other scripts/servers without needing to load any additional pages and would easily take care of your issue.
So there will need to be a few changes to how your page works if you want to set it up with AJAX. There are probably mixed opinions about this next part but in my personal opinion I would say get rid of the submit button and use a regular <input> based button. Since AJAX is going to send the form for us we don't need the form to submit and attempt to load a page action. So your form would look something like this:
<form action="http://www.6ixfilms.com/cgi-bin/6ix.pl" method="post" name="contact-form" onsubmit="_SubmitForm()">
<input type="text" name="realname" id="name" value="Your Name" class="hintTextbox"/>
<input type="text" name="email" id="email" value="Your Email Address" class="hintTextbox" />
<textarea name="comments" id="comment"></textarea>
<input type=hidden name="redirect" value="http://www.6ixfilms.com">
<input type="button" value="Submit" id="submit" onclick="_SubmitForm()" />
</form>
Next you'll need your AJAX coding in javascript to actually send the form, clear everything out, display your confirmation and lastly move to a designated anchor on the page. I'll use some generic things (like the alert() message box) for now but these things can always be replaced with custom message boxes and you could also add in a simple loading icon/message while the form is being submitted.
<script type="text/javascript">
function setReqObj() {
var nAjax;
if(window.XMLHttpRequest) {
nAjax = new XMLHttpRequest();
} else {
nAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
return nAjax;
}
function _SubmitForm() {
var xmlhttp = setReqObj();
if(xmlhttp) {
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4) {
document.forms["contact-form"].reset();
$responseText = xmlhttp.responseText;
alert("Comments successfully submitted!");
document.location.href = "#software";
}
}
var $validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var $name = document.forms["contact-form"]["realname"].value;
var $email = document.forms["contact-form"]["email"].value;
var $comments = encodeURIComponent(document.forms["contact-form"]["comments"].value);
if($name == "") {
alert("Please enter a valid name!");
return false;
}
if(!$email.match($validEmail)) {
alert("Please enter a valid email address!");
return false;
}
if($comment.length <= 4) {
alert("Please enter a valid comment!");
return false;
}
var $ajData = "realname=" + $name + "&email=" + $email + "&comments=" + $comments;
xmlhttp.open("POST", "http://www.6ixfilms.com/cgi-bin/6ix.pl", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send($ajData);
} else {
document.forms["contact-form"].submit();
}
}
</script>
Again, this is just a basic draft of what you need to make this work. It has some basic validation to check the form elements before submitting and then will submit them to your script just as if the form were normally submitted. I also set a variable called $responseText which would contain the response or output of the 6ix.pl script. You could choose to utilize this and preform different actions based on the response. Also as a fallback, any users in a browser that doesn't support AJAX will have the form submitted normally. So their page will change and reload as unfortunately they have no other option.
Let me know if this works out for you or not.
