asked on

Get ID from existing control, delete it and create a new one

Im trying to change the contents of a div from a drop down box and an image to a textbox, but I want the textbox to have the same ID as the dropdown (makes the handeling of the value much easier later).

So what Ive got soo far is:-

     <div class="inp" id="inpGangID">
          <select id="comGangID" name="comGangID" size="1">
          </select>
          <img class="freeInput" src="img/freeInput.png" alt="Free Input" />
     </div> 

<script>
$(document).ready(function () {
     $("img .freeInput").click(changeToFreeInput());
     $("input").blur(saveChanges());
});

function changeToFreeInput() {
     $(this).parent().html('<input id=`' + $(this).id + '` value=`' + ' + $(this).id + '` />');

     //Add handler again to newly created textbox
     $($(this).id).blur(saveChanges());
     }
function saveChanges() {
     //Just for debug at the moment
     alert($(this).id + " = " + $(this).val() );
     }
</script>

Open in new window

Although the function seems to fire, it doesnt seem to delete the current html (dropdownbox and image) and replace it with a textbox with the same ID.

What am I doing wrong :-S

Thank you in advance for any assistance

Chris Stanyon

Couple of issues - when using selectors, you need to pay attention to spaces - img .freeInput (with a space) will select an element with a class of freeInput within an image - not what you want. Without the space - img.freeInput - will select an image with a class of freeInput - what you do want!

Also, when you click on an image, $(this) refers to the image - your image doesn't have an ID, so you can't set a new element to it. You either need to give you image an ID, or be clearer about which ID you want to use. To get the ID you need to use $(this).attr('id')

Here's a jQuery way of doing something similar:

<div class="inp" id="inpGangID">
    <select id="comGangID" name="comGangID" size="1"></select>
    <img id="chris" class="freeInput" src="img/freeInput.png" alt="Free Input" />
</div> 

$('img.freeInput').click(function() {
    var myInput = $('<input/>', {
        id: $(this).attr('id'),
        value: $(this).attr('id'),
        type: 'text'
    });
    
    $(this).parent().html(myInput);
});

Open in new window

If you want to put this in a separate function, then you'll also need to pass the clicked element into the new function, and use the argument name instead of this:

$('img.freeInput').click( function() { changeToFreeInput(this) });

function changeToFreeInput(myElement) {
     var id = $(myElement).attr('id');
}

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial