Add button inside textbox

forms, html, javascript, jquery

Solution

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

Problem

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> ```

Original source