[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

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

Posted on 2013-05-16
2
Medium Priority
?
142 Views
Last Modified: 2013-05-30
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
Comment
Question by:tonelm54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39170898
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 39170927
0

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question