Mail form feedback message

rewind

Good day everyone,

First-timer here, please apply patience 😉

I'm creating my first website at the moment, it's a simple one page site with a contact form. Once the form has been submitted, I don't want to reload the page, I just want a confirmation message to appear underneath the Send button. I'm using the mail code from http://www.w3schools.com/php/php_secure_mail.asp, but as soon as the form is submitted it goes to a completely blank page and puts the confirmation message there. How do I stop this happening?

rewind

oh and the html form is in index.html, the action php is in mail.php.

Ashley_Sheridan

First, avoid paying too much attention to w3schools, it's not the most reliable form of information.

If you want the form to submit without reloading then you'll have to do it with Ajax (not recommended, not all visitors will have Javascript available/enabled). The alternative is to put the form and the mail sending PHP in the same script file and have a check to see whether or not the form was submitted and a mail sent. If it wasn't, then show the form, if it was then show the confirmation message. You can improve upon this by showing the form with fields already filled out where an error occurred (i.e. the user didn't fill in all required fields, etc).

rewind

Thanks for the cautionary advice on w3schools, noted.

So if I put the html form code in the file with the php script, I'd then call that script in the html file where the form had previously been? (sorry, I've been teaching myself html/css, now delving into javascript and php. I aim to avoid js with this project tho)

rewind

or, what if I rename the index.html as index.php and stick the mail script in there, just have one file? what will the action="mail.php" become then?

Ashley_Sheridan

Go with your second, I'm not sure what you mean in the first!

The action of the form can either be left blank, or changed to index.php (assuming that is the name you use for the file). A blank action by default will mean the form submits to itself (I've yet to see a browser which doesn't do this). Then, in your script you can check to see if it's been submitted or not and display the right output with a line like this:

if(isset($_REQUEST['submit']))
{
    // process user submission
}
else
{
    // show form
}

Where 'submit' is the name of a form field. Typically I name my submit buttons 'submit', but any form field will do the trick.

bradgrafelman

rewind;11016295 wrote:
I aim to avoid js with this project tho)

You can't avoid using client-side languages while simultaneously wanting code that changes client-side behavior. Pick one or the other, because this:

rewind;11016285 wrote:
Once the form has been submitted, I don't want to reload the page, I just want a confirmation message to appear underneath the Send button.

is not possible using only HTML with no Javascript.

Ashley Sheridan;11016309 wrote:
A blank action by default will mean the form submits to itself (I've yet to see a browser which doesn't do this)

... which isn't a very good justification to throw caution to the wind and start ignoring established standards. Well... it isn't unless you're hoping to work for Microsoft, I suppose.

Ashley_Sheridan

A better justification would be that this is defined in the spec i suppose...
http://www.w3.org/MarkUp/html-spec/html-spec_8.html

bradgrafelman

Ashley Sheridan;11016351 wrote:
A better justification would be that this is defined in the spec i suppose...
http://www.w3.org/MarkUp/html-spec/html-spec_8.html

Try referencing a spec that isn't 17 years old. 😉

Better yet, try going to http://validator.w3.org and pasting this:

<!doctype html>
<html>
<head>
<title>Example - Empty Action Attribute</title>
</head>
<body>
<form method="POST" action="">
<input type="submit">
</form>
</body>
</html>

into the "Validate by Direct Input" tab and observe what the validator has to say about "Line 7, Column 30."

Ashley_Sheridan

Ah yes, didn't realise it was so out of date. I somehow doubt that browsers will start following the spec on this one though, as it would break too many websites, and no browser wants to be the one that is technically right but "doesn't work" for people using it.

Weedpacket

However under HTML 4 the current specification says that an empty action attribute resolves to the document's base URL (likewise for other attribute values that are supposed to be interpreted as URLs). Unless otherwise stated the document's base URL is the URL of the document.

http://www.w3.org/TR/html401/struct/links.html#h-12.4.1

HTML5 explicitly rules out an empty value - even though the empty string is a valid URL. Still haven't found out why that decision was made.

According to the discussion of the attribute's value, leaving it out completely has the desired effect.

In other words, in HTML5, the default value for a form's action attribute is one that cannot be specified explicitly!

(Apparently, [font=monospace]action="."[/font] also works, but as far as I can make out, by rights it should , given a base of [font=monospace]http://www.example.com/a/b/form.php[/font], resolve into [font=monospace]http://www.example.com/a/b/[/font] and that's not what you want....)

rewind

Thank you everyone, I think I'm on the right path now.

bradgrafelman;11016345 wrote:
You can't avoid using client-side languages while simultaneously wanting code that changes client-side behavior. Pick one or the other, because this:
is not possible using only HTML with no Javascript.

I understand now, thank you.

johanafm

Weedpacket;11016385 wrote:
In other words, in HTML5, the default value for a form's action attribute is one that cannot be specified explicitly!

Actually, the default value is the URL of the current document, which you will get if you omit the action attribute. But you can of course still specify the current URL explicitly as well.

Weedpacket

johanafm;11016435 wrote:
Actually, the default value is the URL of the current document, which you will get if you omit the action attribute. But you can of course still specify the current URL explicitly as well.

What I meant by that is more accurately phrased (emphasis mine):

The action of an element is the value of the element's formaction attribute, if the element is a submit button and has such an attribute, or the value of its form owner's action attribute, if it has one, or else the empty string.

The action IDL attribute must reflect the content attribute of the same name, except that on getting, when the content attribute is missing or its value is the empty string, the document's address must be returned instead.

There are two "attributes" here - you speak of the IDL interface attribute, I speak of the HTML attribute. (I can guess why the two have different "defaults" - the HTML attribute isn't expected to be aware of information that is not intrinsically part of the document.)

Which still doesn't explain why [font=monospace]action=""[/font] is deemed invalid, since it implies right there that the attribute can have an empty string for a value (it's a consequence of a more general rule).