contactInfo

by aprudencio

HTML

<div id="phones" class="phonesContainer">
    <div id="fistPhone" class="phone">
        <div id="divPhoneCombos" class="floatleft">
            <select id="phoneOptions">
                <option>Trabajo</option>
                <option>Casa</option>
            </select>
        </div>
        <div id="divPhoneInputs" class="floatleft">
            <input type="text" id="phoneFieldCreateLink" />
        </div>
        <div id="divPhoneBasureros" class="floatleft">
            <a id="modelobasurero" class="basurero" href="javascript:void()">Borrar</a>
        </div>
    </div>
</div>

CSS

.floatleft{
    float:left;
}
.phone{
    /*float: none;*/
    width:300px;
    margin: 2px;
    height: 25px;
}
.phonesContainer {
    width: 400px;
}

JavaScript

$(".basurero").click(function() {

});

$("#phoneFieldCreateLink").live("blur", function () {checkInput(this);});

$("#phoneFieldCreateLink").live("keypress", function(e) {

    if (e.which== 13) {
        
        checkInput(this);
        $(this).blur();
                      
    }
});
$(".phoneInput").live("keypress", function(e) {

    if (e.which== 13) {
        $(this).blur();                 
    }
});


function checkInput(obj) {
    if ($(obj).val() != "") {
        $("#currentDiv").attr("id", null);
        
        $("#activePhoneLink").remove();
        crearLink(obj);
        
    }
    else {
        $("#activePhoneLink").show();
        $("#currentDiv .floatleft").remove();
    }
    
}

function crearLink(obj) {
    //$(obj).parent().parent().clone().attr("id","newField").hide().appendTo("#phones");
    $(obj).attr("id", null).addClass("phoneInput");
    //$(obj).removeClass("phoneFieldCreateLink").addClass("phoneField"); 
    $obj = $("<a />").html("Añadir otro telefono").click(function() {

        $divCombo = div().addClass("floatleft");
        $divInput = div().addClass("floatleft");
        $divBasurero = div().addClass("floatleft");

        $combo = $("#phoneOptions").clone();
        $divCombo.append($combo);

        $input = phoneFieldCreateLink();
        $divInput.append($input);

        $basurero = $("#modelobasurero").clone(false);
        $divBasurero.append($basurero);

            $(this).parent().append($divCombo).append($divInput).append($divBasurero);
        $(this).attr("id", "activePhoneLink").hide();

        $input.focus();
    });
    $div = $("<div />").addClass("phone").attr("id", "currentDiv").append($obj);
    $($div).appendTo("#phones");
    

}

function phoneFieldCreateLink() {
    return $("<input />").attr("id", "phoneFieldCreateLink");
}

function div() {
    return $("<div />");
}

function labelInput(obj) {
  
    
}