CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Arun Kalyanaraman
Arun Kalyanaraman

Reputation: 648

Add button inside textbox

I have this form which allows people to add addresses depending on how many ever they need and it is controlled by two buttons, one that is "add address" and another that is "remove". I was wondering if anyone could help me remove the "remove" button and instead place an "x" in the right corner of the text box that acts as a button to remove that box. I have placed the code related to the form below. Thanks again beforehand for all your help, I appreciate all your help.

jquery

<script>
$(window).load(function(){
$("#add-address").click(function(e){
        e.preventDefault();
        var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
        var label = '<label for="data[address][' + numberOfAddresses + ']"></label> ';
        var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" placeholder= "Address ' + (numberOfAddresses+1) + '"/>';
        var removeButton = '<button class="remove-address">Remove</button>';
        var html = "<div class='address'>" + label + input + removeButton + "</div>";
        $("#form1").find("#add-address").before(html);
    });

$(document).on("click", ".remove-address",function(e){
    e.preventDefault();
    $(this).parents(".address").remove();
    //update labels
    $("#form1").find("label[for^='data[address]']").each(function(){
        //$(this).html("Address " + ($(this).parents('.address').index() + 1));
        $(this).next("input").attr("placeholder","Address " + ($(this).parents('.address').index() + 1));

    });
});

});
</script>

html

<form id="form1" method="post" action = "h.php">
    <div class="address">
        <!--<label for="data[address][0]">Address 1</label>-->
        <input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
    </div>
    <button id="add-address">Add address</button>

    <input type="submit" value="Submit" />
</form>

Upvotes: 3

Views: 6032

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42736

You can do this simply using css, display:inline-block, and a negative margin-left

HTML

<div class="address">
    <!--<label for="data[address][0]">Address 1</label>-->
    <input type="text" name="data[address][0]" id="data[address][0]" placeholder = "Address 1" />
    <div class="inputRemove">&times;</div>
</div>

CSS

.inputRemove{
    display:inline-block;
    margin-left:-20px;
    cursor:pointer;
}

.address input[type=text] {
    padding-right:25px;
}

The .address input[type=text] styling will make it so text inputed will not display under the close x

JSFiddle Demo

Upvotes: 7

devric
devric

Reputation: 3665

Just use position absolute the 'x'

.container        " position relative     
    textarea      " psotion absolute
    .closeBtn     " position absolute

notice i put the .closeBtn after the textarea element, so you dont need to specify the z-index in css. the later element will be above the previous element by default.

Upvotes: 0

Related Questions