How do I get my input box to persist after clicking Amend? (SOLVED)

samflex

Greetings experts, I have a two part question but first what I am trying to accomplish and what I have tried so far. Currently, we have a button on our web page with an Amend. value. When you click the Amend button, a textbox is displayed which allows users to enter whatever text they wish to enter. If user changes his/her mind after clicking Amend, users can click Cancel to hide the textbox again. This works well. The original intent is to allow users to enter data as an amendment to existing data and submit to the database. Here is the working code:

//JS
$("#btconsultsup").click(function () {
if ($(this).val().toLowerCase() == "amend") {
$.each($('.consultsup'), function(i, item){
$(this).show();
});
$(this).val("Cancel");
} else {
$.each($('.consultsup'), function(i, item){
$(this).hide();
});
$(this).val("Amend");
}
});

//HTML

However, management has decided that once data is entered into this textbox, (A), once you click Amend button to display the textbox, then Cancel button should be hidden because they want the textbox to display permanently on the page even after the page is closed and reopened; and (B), data should displayed permanently on that textbox. So, how do I hide the Cancel button so it will no longer be available to users to click on it to hide the textbox once it is already displayed? Two, how do I ensure that once the Amend button is clicked and textbox is displayed, that it remains displayed even after the page is closed and reopened. I had suggested to them that the best solution is to just add the textbox to the page without the need for Amend button but they refused. Any suggestion is greatly appreaciated.

Richard Deeming

Assuming your server-side code outputs the stored value from the database in the textbox, then you simply need to test on page load whether the textbox is empty, and display it if it has a value.

$(function(){
const displayShortCosts = function(){
$(".consultsup").show();
$("#btconsultsup").hide();
});

if ($("#amendconSupportContractCosts").val()) {
    displayShortCosts();
}
else {
    $("#btconsultsup").click(displayShortCosts);
}

});

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

samflex

Hello Richard, Thank you very much sir for your awesome response. Just one follow up question. So your solution and my JS would work together as shown below?

$(function(){
const displayShortCosts = function(){
$(".consultsup").show();
$("#btconsultsup").hide();
});

if ($("#shortCosts").val()) {
    displayShortCosts();
}
else {
    $("#btconsultsup").click(displayShortCosts);
}

});

$("#btconsultsup").click(function () {
if ($(this).val().toLowerCase() == "amend") {
$.each($('.consultsup'), function(i, item){
$(this).show();
});
$(this).val("Cancel");
} else {
$.each($('.consultsup'), function(i, item){
$(this).hide();
});
$(this).val("Amend");
}
});

Richard Deeming

You wouldn't need your script. :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

samflex

Just a little confused by this:

if ($("#shortCosts").val()) {

I have it as a class in my HTML:

Richard Deeming

Sorry, should be:

if ($("#amendconSupportContractCosts").val()) {

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

samflex

Perfect, perfect!!! Thank you so much sir. Incredible!