Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 1 down vote favorite

Is there a way to accept form input and have the output dumped/printed back to the web page with HTML or JavaScript/AJAX and without PHP/Perl/server-side scripts?

share|improve this question
2  
A minor point, but "ajax" includes a server-side technology like PHP or Perl. Ajax is part client (eg. JavaScript) and part server. – w3d Aug 22 '11 at 7:54

2 Answers

up vote 2 down vote

Off the top of my head, you could do something like...

<form class="dump" action="#" method="post">
<fieldset>
    <legend>Dump inputs</legend>
    <label for="name">Name</label>
    <input id="name" type="text" size="25" />
    <label for="email">email</label>
    <input id="email" type="text" size="25" />
    <input type="submit" id="submit" value="Send" />
</fieldset>

and then a bit of JavaScript (I'm using jQuery, but I'm sure you can do this with normal JS). This will fire when the form is submitted, creates vars from the values and then output them to the screen (after the bottom of the form)

$(document).ready(function() {
$('form.dump').each(function() {
    $(this).children('fieldset').children('input#submit').click(function() {

        //Clear any previous outputs
        $(this).parent('fieldset').parent('form.dump').siblings('.output').remove();

        //Create the value vars
        var nameVal = $(this).siblings('input[id="name"]').val();
        var emailVal = $(this).siblings('input[id="email"]').val();

        //Output after form
        $(this).parent('fieldset').parent('form.dump').after(
            '<p class="output">Name is ' + nameVal + '</p>' +
            '<p class="output">email is ' + emailVal + '</p>'
            );
        return false;//Stops browser trying to actually submit the form
    });
});

});

Of course, there are a few things to bear in mind

  • Make sure there's a suitable non-JS fallback
  • This does nothing with the data except output it back to the page
  • This does no validation/sanitizing etc
  • There may well be a leaner/better way, but it's Monday morning and this is the first thing I could do off the top of my head ;o)
share|improve this answer
up vote 1 down vote

Displaying form results with HTML and CSS only

It's possible to display form results using only HTML and CSS with clever use of the :target selector. An explanation is below the code.

Click for a live demo. (Type in the box in the 'Result' window and click "Submit".)

<!doctype html>
<html>
    <head>
        <title>CSS form submission</title>
        <style type="text/css">
        /* Place an invisible link over the submit button that will
           change the page target when the submit button is clicked.
           N.B. The submit button is never actually triggered;
           it exists only to act as a hit target for the user
           and to conform to the user's expectations of what
           a form should look like. */      
        a#submit{ position:absolute; top:0; left:0; height:100%; width:70px; }

        /* Hide the 'You typed:' text upon initial page load */
        #page p{ display:none }

        /* When #page becomes the target (on form submission),
           show the 'You typed:' text, hide the submit button,
           and redisplay the input box in plain text. */        
        #page:target p{display:inline}
        #page:target input[type="submit"]{display:none}
        #page:target input{display:inline-block;border:0px}
        </style>
    </head>
    <body>
        <div id="page">
            <form action="" method="post">
            <p>You typed:</p>
            <input type="text" />
            <div style="position:relative">
                <input type="submit">
                <a id="submit" href="#page"></a>
            </div>
            </form>
        </div>
    </body>
</html>

How it works

You might be able to understand it from the commented CSS code above, but, in case you want a full explanation, read on.

First, the form's submit button has an invisible link above it that we style with CSS:

<div style="position:relative">
    <input type="submit">
    <a id="submit" href="#page" ></a>
</div>

a#submit{ position:absolute; top:0; left:0; height:100%; width:70px; }

When the user clicks the "Submit" button, they're actually clicking the invisible link above it; the user never hits the Submit button and the form itself is never submitted.

What happens instead is that, when the link over the submit button is clicked, the url changes from site.com/form.html to site.com/form.html#page. It's not well known, but you can use the #page part of the URL as a CSS selector with the :target pseudoclass (documentation here). This lets us style the page differently when there is a #page element in the browser's address bar.

And so, when the link is clicked and the user is redirected to #page, we show the 'You typed:' text, hide the submit button, and change the input box styling to show them what they typed. All of this is done using the :target selector.

The CSS rule that looks like #page:target p{display:inline} says "when the #page is the target, display the paragraph text in a line." This allows the input box to be on the same line as the paragraph, instead of beneath it.

Next, the line that looks like #page:target input[type="submit"]{display:none} hides the submit button when the page is the target.

Finally, the line that looks like #page:target input{display:inline-block;border:0px} displays the input box next to the paragraph text, and gets rid of the border. We're actually showing the user the exact same input box they've just typed in! We're just styling it differently.

This could be extended with multiple inputs if required, but I've used one to keep it simple.

Note that browser support for the CSS :target selector is pretty good, but that IE8 and a few other browsers will struggle with it. (Full list here.)

share|improve this answer
Wow! Some brilliant people here! Thanks very much for the tips and will experiment with these. – user92272 Aug 22 '11 at 14:55

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.