Monie Studios » form http://www.moniestudios.com So much to learn, so little time! Sat, 21 Aug 2010 04:59:27 +0000 en hourly 1 http://wordpress.org/?v=3.0 Introduction – jQuery Tip Series: Form http://www.moniestudios.com/tutorials/jquery-tip-series-form/ http://www.moniestudios.com/tutorials/jquery-tip-series-form/#comments Tue, 30 Jun 2009 00:44:24 +0000 Monie http://www.moniestudios.com/?p=414 On this first series, I’ll be talking about jQuery Tip Series: Form. Enjoy yourself.

The Scenario!

Have you ever fill an online form that require you to fill in the same information twice? In other words, does your patience being tested every time you fill an online form? The following demonstration will show you how you can play around with your form value in this example, joining two separate field value and assigned them into another third field value.

The following example is just a basic tutorial. With this knowledge, you can manipulate them and use them in developing your very own user friendly web form.

Demo: jQuery


JavaScript Approach

<html>
<head>
    <title>Input Joining</title>
    <script type="text/javascript">
    function FillIn() {
        document.getElementById('fullname').value =
        document.getElementById('fname').value + ' ' + document.getElementById('surname').value;
    }
    </script>
</head>
<body onLoad="FillIn()">
    <input id="fname" name="fname" value="William" onblur="FillIn()">
    <input id="surname" name="surname" value="Shakespeare" onblur="FillIn()">
    <input id="fullname" name="fullname" value="">
</body>
</html>

jQuery Approach

<html>
<head>
    <title>Input Joining</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        function FillIn() {
            $('#fullname').val($('#fname').val() + ' ' + $('#surname').val());
        }
        $(document).ready(function () {
            $('#fname').bind('blur', function () { FillIn(); });
            $('#surname').bind('blur', function () { FillIn(); });
            FillIn();
        });
    </script>
</head>
<body>
    <input id="fname" name="fname" value="William">
    <input id="surname" name="surname" value="Shakespeare">
    <input id="fullname" name="fullname" value="">
</body>
</html>

So, which one is better?

Some say jQuery is a short form for complex JavaScript code…

…using straight-up javascript is almost always going to be more efficient than using a framework (i.e. jQuery). jQuery should really only be used to make complex javascript coding tasks simpler to write, and more accessible for those who don’t know advanced javascript. The other benefit would be cross-browser compatibility.

japh, Thewebsqueeze.

and some say jQuery perform better than JavaScript…

…the difference in speed is hardly a significant issue. In real performance terms, code execution is not going to be much different. Note also that jQuery has benefited from staggering performance improvements in version 1.3.

..it’s actually more efficient to use jQuery’s syntax (in most cases), as it’s much more terse.

MikeHopley, Thewebsqueeze.

Full discussion on: Thewebsqueeze.com

]]> http://www.moniestudios.com/tutorials/jquery-tip-series-form/feed/ 0