Question about ajax forms and progressive enhancement

Let’s talk about the 1% of population who don’t have JavaScript enabled. How can you structure your PHP code to echo out a message (if the user processed the form through ajax) and use a header(“Location: example.com?error2”); if the user processed the form without JavaScript enabled?

Take a look at this PHP code:

if (!preg_match("/^[a-z0-9 _-]+$/i", $username) || !preg_match("/^[a-z_]*$/i", $province)) {
// header("Location: Join?error2"); //invalid characters in form! - do not show user which error!
echo "Sorry, please choose a different username.";
exit(); // stops the script if there's any code after this point.

The ajax call would return the echo’ed message as the ‘html’, but if the user did not use the ajax form, then he should be directed with the header() method with the message in the url. How should progressive enhancement be practised in this case?

$(document).ready(function(){
  $('form#signup .submit').click(function(event) {
    event.preventDefault();
    $.ajax({
      url: "pages.php",
      method: "post",
      data: $('form#signup').serialize() + "&submit",
      dataType: "text",
      success: function (html, data) {
        $('#result').html("Ajax Success Status:" + data + "<br>Result:" + html);
      }
    });
  });
});

<noscript> IS the most semanticly accurate way to specify non-javascript content - and rather then detecting if javascript is disabled, detect if it’s enabled. So show the “you need javascript to properly use my site” message by default, but hide it with a javascript function immediately onLoad

Ah I see! That’s awesome… My attempts were some weird functions through php, completely forgetting the possibility of using a simple tag… Good thing I didn’t post my code here lol.

Thanks once again @astonecipher, you’re my saviour :innocent:

Sponsor our Newsletter | Privacy Policy | Terms of Service