Styjun

What should we do with manuals from the 80s?

What would be synonyms for "be into something"?

What would cause a nuclear power plant to break down after 2000 years, but not sooner?

Has there ever been a truly bilingual country prior to the contemporary period?

What are the advantages of this gold finger shape?

Difference between "va faire" and "ira faire"

Is a suspension needed to do wheelies?

How to render "have ideas above his station" into German

If it isn't [someone's name]!

Not fallen in Latin

Gofer work in exchange for LoR

Vegetarian dishes on Russian trains (European part)

What should I do if actually I found a serious flaw in someone's PhD thesis and an article derived from that PhD thesis?

Why don't modern jet engines use forced exhaust mixing?

If a person claims to know anything could it be disproven by saying 'prove that we are not in a simulation'?

Is this bar slide trick shown on Cheers real or a visual effect?

Is there a fallacy about "appeal to 'big words'"?

Why can't I see 1861 / 1871 census entries on Freecen website when I can see them on Ancestry website?

What is the fastest way to level past 95 in Diablo II?

Regression when x and y each have uncertainties

Parse a simple key=value config file in C

How do I answer an interview question about how to handle a hard deadline I won't be able to meet?

What's a good pattern to calculate a variable only when it is used the first time?

Unsolved Problems due to Lack of Computational Power

How to add a cancel button for 'contenteditable' editable field?

How do you disable browser Autocomplete on web form field / input tag?How do you remove all the options of a select box and then add one option and select it with jQuery?How can I know which radio button is selected via jQuery?How to remove close button on the jQuery UI dialog?How to prevent buttons from submitting formsHow to create an HTML button that acts like a link?How to select a radio button by default?How to check a radio button with jQuery?Cannot display HTML stringThe text inside my button is editable in HTML. Why?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I want to add a cancel button to this editable fields which would make the field non-editable and undo the current changes made.

$('button').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

jquery html attributes

share|improve this question

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

add a comment | 

0

I want to add a cancel button to this editable fields which would make the field non-editable and undo the current changes made.

$('button').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

jquery html attributes

share|improve this question

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

add a comment | 

I want to add a cancel button to this editable fields which would make the field non-editable and undo the current changes made.

$('button').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

jquery html attributes

share|improve this question

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

$('button').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this question

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

share|improve this question

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

asked Mar 27 at 12:59

YogapriyaYogapriya

1777 bronze badges

1 Answer
1

active

oldest

votes

2

I've modifies you code a bit and then added the click event for your cancel button:

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText",$('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

I've added $('.company').attr("data-oldText",$('.company').text()) so when you press edit then it "saves" the old data.

Then if you press the cancel, it will replace the current text with the old text.

Working demo

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this answer

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much!! It works like charm!
  
  – Yogapriya
  Mar 27 at 13:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Yogapriya No problem, happy to help
  
  – Carsten Løvbo Andersen
  Mar 27 at 13:24
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55377817%2fhow-to-add-a-cancel-button-for-contenteditable-editable-field%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

I've modifies you code a bit and then added the click event for your cancel button:

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText",$('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

I've added $('.company').attr("data-oldText",$('.company').text()) so when you press edit then it "saves" the old data.

Then if you press the cancel, it will replace the current text with the old text.

Working demo

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this answer

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much!! It works like charm!
  
  – Yogapriya
  Mar 27 at 13:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Yogapriya No problem, happy to help
  
  – Carsten Løvbo Andersen
  Mar 27 at 13:24
  

  
  
  
  

add a comment | 

2

I've modifies you code a bit and then added the click event for your cancel button:

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText",$('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

I've added $('.company').attr("data-oldText",$('.company').text()) so when you press edit then it "saves" the old data.

Then if you press the cancel, it will replace the current text with the old text.

Working demo

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this answer

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much!! It works like charm!
  
  – Yogapriya
  Mar 27 at 13:20
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Yogapriya No problem, happy to help
  
  – Carsten Løvbo Andersen
  Mar 27 at 13:24
  

  
  
  
  

add a comment | 

I've modifies you code a bit and then added the click event for your cancel button:

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText",$('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

I've added $('.company').attr("data-oldText",$('.company').text()) so when you press edit then it "saves" the old data.

Then if you press the cancel, it will replace the current text with the old text.

Working demo

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this answer

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText",$('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

$('button.edit').on('click', function() 
 if ($(this).hasClass('save')) 
 alert("Saved!!!");
 $(this).text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 else 
 $(this).text("Save").addClass('save');
 $('.company').attr("data-oldText", $('.company').text())
 $('.company').attr('contenteditable', 'true').css(
 'border': 'black solid 1px',
 'outline': 'none'
 ).focus();
 
);

$('button.cancel').on("click", function() 
 if ($('button.edit').hasClass('save')) 
 $('.company').text($('.company').attr("data-oldText"))
 $('button.edit').text("Edit").removeClass('save');
 $('.company').attr('contenteditable', 'false').css(
 'border': 'none',
 'outline': 'none'
 );
 
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center company">Company Name</div>
<button class="btn btn-default edit">Edit</button> <button class="btn btn-default cancel">Cancel</button>

share|improve this answer

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges

answered Mar 27 at 13:03

Carsten Løvbo AndersenCarsten Løvbo Andersen

16.1k88 gold badges3232 silver badges6262 bronze badges