• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 145
  • Last Modified:

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
0
tonelm54
Asked:
tonelm54
1 Solution
 
Chris StanyonCommented:
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

0
 
leakim971PluritechnicianCommented:
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now