Accessible Forms with PHP and jQuery
And yes, if there's any takeaway from this, it's that plans are now officially underway to convert the site to make it fully accessible.
---
Tell me to get back to rewriting this site so it's not horrible on mobileI don't know what any of that means, but if it makes the site more accessible, then I'm sure it's great.
Ravenprose said:I don't know what any of that means, but if it makes the site more accessible, then I'm sure it's great.
Accessibility in web design refers to the site's usability for persons with disabilities. For example, the blind, who use screenreaders.
---
Tell me to get back to rewriting this site so it's not horrible on mobile
Log in or Register for free to comment
Recently Spotted:
robio (9m)
Let's start from the no-JavaScript version and work up. Normally your form without JavaScript would look something like this To have JavaScript handle the post, we'll add an onsubmit function to the form. When the onsubmit function returns false, the form does not submit. So by having the formSubmit function return false, we can have the page handle the post via AJAX instead of having to refresh the page. Let's look at the formSubmit function. The .serialize() function takes the form elements and converts them to query string parameters so they can be passed through post. By using this, we can reuse the same generic formSubmit function regardless of the form -- all we have to add is the onsubmit attribute to the form.
Now you may also want to have error and success messages return. A good way to handle this is via JSON objects. JSON is a standard by which objects can be represented in string form, so we can pass a string from PHP to JavaScript, which can then be handled as an object. Let's update out formSubmit function to handle this behaviour (the script will assume that there are hidden divs with the ID "error" and "success". Now we need to construct the JSON object on the PHP side. The error will be echoed, but remember that we want this to work even if it's not an AJAX post, so we need different behaviour depending on whether or not it was an AJAX post -- echo error/success messages if AJAX, redirect back if it's not. Let's go to example.php; the script will assume that the value $_SESSION['page'] holds the value of $_SERVER['PHP_SELF'] before the post. Looks like a lot of work, but with that, we're all done. Everything from now on is handled identically between jQuery and non-JavaScript versions of the site, and all you have to do is add onsubmit="return formSubmit(this)" to each form, and in the processing script, close with Reporting::endDo(). Everything else takes care of itself.
---
Tell me to get back to rewriting this site so it's not horrible on mobile