javascript - Add button inside textbox - Stack Overflow

admin管理员组

文章数量:1393866

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>

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>

• javascript
• jquery
• html
• forms

Share Improve this question Follow asked Jul 10, 2014 at 3:41 Arun KalyanaramanArun Kalyanaraman 64822 gold badges1010 silver badges2222 bronze badges 2

• do you post plete html? i dont see your remove button. – bumbumpaw Commented Jul 10, 2014 at 3:47
• after adding a address I am getting the remove button. – Mritunjay Commented Jul 10, 2014 at 3:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

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.

本文标签： javascriptAdd button inside textboxStack Overflow