StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>First, <em>what you have is perfectly valid</em>. The only changes I can suggest is to use <a href="http://api.jquery.com/data/" rel="nofollow noreferrer"><code>.data()</code></a> and <a href="http://api.jquery.com/jQuery.data/" rel="nofollow noreferrer"><code>$.data()</code></a> to make it valid (no invalid attributes). You can chaining the <a href="http://api.jquery.com/focus/" rel="nofollow noreferrer"><code>.focus()</code></a> and <a href="http://api.jquery.com/blur/" rel="nofollow noreferrer"><code>.blur()</code></a> handlers to prevent a duplicate selection. Also there's no need for <code>#loginf</code> before another ID selector...they should be unique and just <code>#ID</code> has a shortcut in the jQuery core code. </p> <p>Also, I changed it around a little bit to make it more extensible so you can add as many as you want with less code as you go, like this:</p> <pre><code>var types = { "1": { action: "login1.php", user: { id: "userid", val: "Username" }, pass: { id: "password", val: "password" } }, "2": { action: "login2.php", user: { id: "email", val: "Email" }, pass: { id: "passed_password", val: "password" } } }; $('#logintype').change(function() { var type = types[$(this).val()]; $('#loginf').attr('action', type.action); $('#user').attr('name', type.user.id).data('defaultValue', type.user.val).val(type.user.val); $('#pass').attr('name', type.pass.id).data('defaultValue', type.pass.val).val(type.pass.val); }).change(); $('.textbox').focus(function(){ if ($(this).val() == $.data(this, 'defaultValue')) $(this).val(''); }).blur(function(){ if ($(this).val() == '') $(this).val($.data(this, 'defaultValue')); }); </code></pre> <p><a href="http://jsfiddle.net/nick_craver/v6WWC/7/" rel="nofollow noreferrer">You can give it a try here</a>, personally I just like this style in case you need to add a third option later it makes it very quick/easy to do (though arguably your current method still makes this pretty easy). As you add more though, you'll save more and more code this route over the your current way, but it completely depends on your style, it doesn't matter much either way.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload