MemoryWater (Kristalize) form manipulation playground

by psycketom

HTML

<form method="post" action="">
<label for="description" class="n">Description</label><br />
<textarea name="description" id="description" class="n"></textarea><br />
<div class="friend-mails">
    <h3>Tell others</h3>
    <div class="right">
        <div class="mail">
            <label class="n">Friend e-mail</label><br />
            <input type="text" name="friendmail[]" value="" class="n" /><br />
        </div>
        <div class="mail">
            <label class="n">Friend e-mail</label><br />
            <input type="text" name="friendmail[]" value="" class="n" /><br />
        </div>
    </div>
    <div class="left">
        <div class="mail">
            <label class="n">Friend e-mail</label><br />
            <input type="text" name="friendmail[]" value="" class="n" /><br />
        </div>
        <div class="mail">
            <label class="n">Friend e-mail</label><br />
            <input type="text" name="friendmail[]" value="" class="n" /><br />
        </div>
    </div>
    <br class="both" />
    <a href="#" id="addEmail">Add Email</a>
</div>
</form>
<div class="placeholder friend-email">
    <div class="mail">
        <label class="n">Friend e-mail</label><br />
        <input type="text" name="friendmail[]" value="" class="n" /><br />
    </div>
</div>

CSS

.placeholder {
    display: none;
}
.friend-mails {
    background-color: #fad1d1;
    padding: 10px;
    border: solid 1px #fad1d1;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    behavior: url('/PIE.htc');    
}
.friend-mails h3 {
    color: #ff2c2d;
}
.friend-mails label.n {
    color: #666666;
}
.friend-mails a {
    margin-right: 10px;
}
.left {
    float: left;
}
.right {
    float: right;
}
br.left { clear: left; }
br.right { clear: right; }
br.both { clear: both; }

JavaScript

var modified = 0;
var friendMail = $('.friend-email').html();
var startCount = $('.mail:visible').length;
$('form').change(function() {
    var value = $('#description').val();
    if (value != "") {
        $('.friend-mails').children('.right, .left').children('.mail:last-child').remove();
        startCount = startCount - 2;
        modified = 1;
    } else {
        if (modified == 1) {
            $('.friend-mails').children('.right, .left').append(friendMail);
            startCount = startCount + 2;
            modified = 0;
        }
    }
});
var side = 'left',
    remove = 0;
$('#addEmail').live('click', function() {
    $('.friend-mails').children('.' + side).append(friendMail);
    if (remove == 0) {
        $(this).parent().append('<a href="#" id="removeEmail">Remove last added e-mail</a>');
        remove = 1;
    }
    side = toggleSide(side);
    return false;
});
$('#removeEmail').live('click', function() {
    var currentCount = $('.mail:visible').length;
    if ((currentCount - 1) == startCount && remove == 1) {
        $(this).remove();
        remove = 0;
    }
    side = toggleSide(side);
    $('.friend-mails').children('.' + side).children('.mail:last-child').remove();
    return false;
});

function toggleSide(side) {
    if (side == 'left') return 'right';
    else return 'left';
}