0

I have a form with inputs, the Jquery makes a specific input (the url input) form input to link, but i have for example two inputs of the url, the HTML ids are url0 and url1 and still when i want to edit the first input/url0 the inputs of the url1 is making visible and the changes are made for the url1 not url0 and when click out the input it makes the value of url1 same with the url0, you can see exactly what i mean here - jsfiddle

thanks a lot

exact steps:

  1. Form with inputs
  2. two url inputs url0/url1
  3. onload they are links but with a hidden input in HTML on click activate the input so can be editable
  4. when click out of the input it converts to links again

Problem is those two inputs (url0/url1) gets confused and make strange behavior on edit. please check the link above to see

3
  • 1
    I think you're going to have to try and explain more clearly, in steps, what it is you want to happen. Jun 22, 2012 at 12:47
  • @JasperMogg thanks for your comment, i updated the question, hope it's more clear now
    – Abude
    Jun 22, 2012 at 12:52
  • 1
    OK gotcha :-) Will have a look now. Jun 22, 2012 at 12:54

2 Answers 2

1

See working jsFiddle here.

Here is the modified JS which works when you click on the link -

$('.a0 a').click(function(e){
    e.preventDefault();
    $(this).parent().parent().find('input').val($(this).text()).show().focus();
    $(this).parent().hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

The following works when you click on the div the link is in - jsFiddle

$('.a0').click(function(e){
    e.preventDefault();
    $(this).parent().find('input').val($(this).find('a').text()).show().focus();
    $(this).hide();
})

$('#url0, #url1').each(
    function(index, element){
        $(element).blur(function(){
            $(this).hide().prev().show().find('a').html(this.value);
    })
    }    
);

9
  • 1
    No probs. Someone here will know how to assign both '#url' click handlers in one line - I'd love to hear how! Jun 22, 2012 at 13:09
  • 1
    A for loop would be easy enough, yeah. Just get your ids into an array and loop through them. I'm sure you can use .each() for this though - trying to work it out atm. Jun 22, 2012 at 13:15
  • 1
    There ya go matey. Just put whatever selector you want instead of '#url0, #url1'. You could use a class on each input box and put that in the selector. Jun 22, 2012 at 13:25
  • 1
    jsFiddle here - jsfiddle.net/jaspermogg/9e2X3/4 Will update answer accordingly. Jun 22, 2012 at 16:15
  • 1
    I think you should post another question asking that and link it here. Also try to explain what you want a little better? Jun 22, 2012 at 16:27
1

The strange behavour is related to how you are handling your events

for example

$('#url0,#url1').val($(this).text()).show().focus();

Will open both inputs on a single click on either link.

you need to have reference between your input and link and maintain it or change it dynamically from link to input and back.

p.s didn't think i would be seeing the exact same code a few days later :P

1
  • hi, thanks for the answer, and how can i do it to include both but to not open both at the same time ? thanks
    – Abude
    Jun 22, 2012 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.