CODEWITHSUNDEEP
javascriptjquery
Raihan
Raihan

Reputation: 4021

How to Change Text Value with jquery

I have list Item with edit link each of them. If I click the Edit link it open a Input filed with SAVE and CANCEL button. If I click cancel it goes back to original view. Upto this it fine. FIDDLE

But I want when save button is clicked , If I write something in the input field it will save and will replace previous text.

Like I have TEXT 'Cras justo odio' , if I click edit it opens a input field and I write "THIS IS COOL" and press save. Now text 'Cras justo odio' will replace with "THIS IS COOL". How I can do this ?

Thanks in advance.

JS

$(".btn-link").click(function () {
    $(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});
$(".cancel-edit").click(function () {
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});

Upvotes: 2

Views: 80

Answers (2)

Gega Gagua
Gega Gagua

Reputation: 92

    $(".btn-link").click(function () {
    $(this).parent('.view-mode').hide();
    $(this).parent('.view-mode').siblings('.edit-mode').show();
});
$(".cancel-edit").click(function () {
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});
$(".confirm-edit").click(function () {
    $dft = $(this).parent('.edit-mode').siblings('.view-mode').find('span').text();   
    $(this).parent('.edit-mode').find('.form-control').val($dft);
    $val = $(this).parent('.edit-mode').find('.form-control').val();
    $(this).parent('.edit-mode').siblings('.view-mode').find('span').text($val);
    $(this).parent('.edit-mode').hide();
    $(this).parent('.edit-mode').siblings('.view-mode').show();
});

Upvotes: 1

emmanuel
emmanuel

Reputation: 9615

You have to add:

$(".confirm-edit").click(function () {
  var inptext = $(this).siblings('input').val();
  $(this).parent('.edit-mode').siblings('.view-mode').children('span').text(inptext);
  $(this).parent('.edit-mode').hide();
  $(this).parent('.edit-mode').siblings('.view-mode').show();
});

Fiddle: http://jsfiddle.net/has9L9Lh/38/

Upvotes: 4

Related Questions