?
Solved

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

Posted on 2013-05-16
2
Medium Priority
?
140 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 43

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses
Course of the Month12 days, 17 hours left to enroll

777 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