JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<form id="loginf" method="post" action="foo.php"> 
        <fieldset> 
            <select id="logintype" name="logintype" class="drop"> 
                <option value="1">Foo</option> 
                <option value="2">Bar</option>           
            </select> 
            <input type="text" id="user" class="textbox"/> 
            <input type="password" id="pass" class="textbox"/> 
            <input type="submit" id="submit" name="submit" value="SUBMIT" class="button" /> 
        </fieldset> 
    </form>

JavaScript

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'));
 });