• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 148
  • 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">
          <img class="freeInput" src="img/freeInput.png" alt="Free Input" />

$(document).ready(function () {
     $("img .freeInput").click(changeToFreeInput());

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

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

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
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" />

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

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

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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