Question

Could you please advice me a plugin or a solution on jquery.

I need to have an input field with email type. When entered it shows just like on image attached.

You can click on the change link and input will be shown again with this value.

What is the best way to do that?

Thanks!

Answer 1

You could you a plugin like Jeditable or implement a custom solution like the following:

HTML

<label for="email">Email:</label>
<div id="email">[e-mail]</div>
<a href="#" id="changeEmail" data-target="email">change</a>

JS

// Switch to Input //
$('#changeEmail').bind('click', function(e){

    // Prevent Switch if Already Input //
    if ($(this).get(0).tagName != 'input') {
        var $target = $('#'+$(this).data('target')); // Get Target Element
        var val = $target.text(); // Get Current Target Value

        // Swap Elements //
        $target.replaceWith('<input id="email" type="text" value="'+val+'" />');

        // Hide Change //
        $('#changeEmail').hide();
    }
});

// Switch to Div //
$(document).delegate('#email', 'blur', function(){

    // Prevent Switch if Input is Empty //
    if ($(this).val() != ''){
        $(this).replaceWith('<div id="email">'+$(this).val()+'</div>');
        $('#changeEmail').show();
    } else {
        $('#changeEmail').hide();
    }
});

UPDATED DEMO HERE

I hope this helps!