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?
-
2A minor point, but "ajax" includes a server-side technology like PHP or Perl. Ajax is part client (eg. JavaScript) and part server.– MrWhiteCommented Aug 22, 2011 at 7:54
Add a comment
|
3 Answers
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)
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.)
-
Wow! Some brilliant people here! Thanks very much for the tips and will experiment with these. Commented Aug 22, 2011 at 14:55
- Put id="myform" on the element
- Add id="mysubmitbutton" to the submit button on the form
- Make sure you include jQuery to your page
add this piece of code somewhere in your page
<script type="text/javascript"> $('#mysubmitbutton').on('click', function() { console.log($('#myform').serializeArray()); return false; // Prevent the submition of the form }); </script>
After these steps you should see the form's output in your browser's console. You can then take the output from $('#myform').serializeArray() and render it in an HTML container using just javascript code, without going through PHP.
