submit w/options

by sanford

HTML

<div class="butbut"><form method="get" target="_test" action="http://webmail.cypressintegrated.com/getmea.php"><input name="Go" value="Go!" type="submit"><div class="tiptop"><input name="putter" type="text"><a class="upper">^</a><input name="checker" type="checkbox"><a class="upper">^</a></div></form></div>
<div class="butbut"><form method="get" target="_blank" action="http://127.0.01/dyummy"><input class="poster" name="Go" value="Go!" src="http://127.0.0.1/otherpeople/trans_1x1.gif" type="image"><div class="tiptop"><input class="shiftable" name="putter" type="text"><input id="updn1" class="upper" name="Go" value="Go!" src="http://127.0.0.1/otherpeople/trans_1x1.gif" type="image"><input class="shiftable" name="checker" type="checkbox"><input id="updn2" class="upper" name="Go" value="Go!" src="http://127.0.0.1/otherpeople/trans_1x1.gif" type="image"><input class="shiftable" name="putter2" value="putter2" type="text"><input id="updn3" class="upper" name="Go" value="Go!" src="http://127.0.0.1/otherpeople/trans_1x1.gif" type="image"></div></form></div>

<form method="get" target="_blank" action="http://127.0.01/dyummy"><input type="submit"><fieldset data-checkedIndex="1">Use settings
    <label class="fakeradiobasic" for="rad1_id1"><input type="radio" id="rad1_id1" name="rad1" value="0"><input type="button" name="faux" value="One time"></label>
    <label class="fakeradiobasic" for="rad1_id2"><input type="radio" id="rad1_id2" name="rad1" value="1" checked="checked"><input type="button" name="faux" value="For me"></label>
    <label class="fakeradiobasic" for="rad1_id3"><input type="radio" id="rad1_id3" name="rad1" value="2"><input type="button" name="faux" value="For all"></label>
    </fieldset><form>

CSS

BODY {background-color: lightblue;}

.upper {
    color: darkgray;
    position: relative;
    z-index: 11;
    background-image: url(http://127.0.0.1/otherpeople/moveup.gif?1);
    background-repeat: no-repeat;
    float: right;
}
.butbut {
    width: 16px;
    height: 24px;
    position: relative;
    float: left;
    margin-right: 36px;
}
.ZZbutbut + .butbut  {
    z-index: 1;
}
.tiptop {
    z-index: 9;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 24px;
    left: -5px;
    background: beige;
    -webkit-transition: all 50ms ease 0s;
    border-radius: 0 2px 2px 2px;
    -moz-border-radius: 0 2px 2px 2px;
    opacity: .1;
}
.butbut:hover .tiptop:before {
    height: 28px;
    width: 24px;
    position: absolute;
    display: block;
    top: -29px;
    left: -1px;
    background: beige;
    border: 1px solid darkgray;
    border-bottom: none;
    content: url(http://127.0.0.1/otherpeople/trans.gif);
    border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
}
.butbut INPUT[type=submit], .butbut INPUT[type=image] {
    position: relative;
    z-index: 99;
    height: 20px;
    font-size: 11px;
    padding: 2px;
}
.butbut INPUT.poster[type=image] {
    background-image: url(http://www.figureone.com/favicon.png);
    height: 16px;
    width: 16px;
    padding: 0;
}
.

.butbut:hover INPUT.poster[type=image] {
    background-image: url(http://127.0.0.1/otherpeople/favicon_mo.gif)
}
.ZZbutbut .tiptop, .butbut:hover .tiptop {
    border: 1px solid darkgray;
    padding: 4px 4px 4px 4px;
    height: auto;
    width: auto;
    min-width: 190px;
    -webkit-transition: opacity 1150ms ease 0s;
    opacity: 1;
}
.tiptop INPUT {
    width: 0px;
    height: 0px;
    border: none;
    visibility: hidden; /* moz will not hide a checkbox via wxh=0x0 */
    position: relative;
    z-index:10;
}
.butbut:hover .tiptop INPUT {
    visibility: visible;
    clear: both;
}
.butbut:hover .tiptop INPUT[type=text] {
    height: 24px;
    width: 160px;
   ...

JavaScript

'swapNode' in document.documentElement || Element.implement({
    swapNode: function(other) {
            other = $(other);
            var next = other.nextSibling, parent = other.parentNode;
            this.parentNode.replaceChild(other, this);
            return parent.insertBefore(this, next);
    }
});

$$('.upper').addEvent('click',function(e){
    e.stop();
    //debugger;
    var host = this.getPrevious('INPUT.shiftable');
    console.log ( this, host );
    var targetHost;
    if ( targetHost = host.getPrevious('INPUT.shiftable') ) {
            console.log ('up');
            targetHandle = targetHost.getNext('INPUT.upper');
            host.swapNode(targetHost);
            this.swapNode(targetHandle);
    } else {
        console.log ('dn');
        host.inject( host.getParent(),'bottom' );
        this.inject( host.getParent(),'bottom' );
    }

    this.focus();
    
});

$$('INPUT[type=radio] + INPUT[type=button]').addEvent('click',function(e){
    
    /* all browsers */
    e.stop();
    var FS = this.getParent('FIELDSET'), RB = this.getPrevious();
    FS.set('data-checkedIndex',RB.get('value'));
    RB.click();
    
    /* 
    only IE needed the rb click to be scripted (the label-button doesn't work there on its own)
    but n.b. scripting on the button alone allowed for instant redraw in WK!
    IE still needs to force redraw
    */
    !Browser.ie || FS.setStyle('visibility','hidden').setStyle('visibility','visible');

});