How to create save button with .ajax()

Question

I have two buttons, an edit and a save. When the user clicks on edit, the input box becomes accessible. How can I get the save button to work properly? Meaning, when the user clicks 'save' the text they have typed in will update to the database. I have the following code, the edit button works but when I click the save button, it disappears and the 'edit' button becomes unaccessible. Please help!

JS:

$(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="' + ui.fullName + '" type="text"><button class="edit">Edit</button><button class="save">Save</button>');

$(".edit").click(function(e) {

  $("#editInput").prop('disabled', false);
});

$(".save").click(function(e) {
  $(this).closest('div').find('input').attr('readonly', 'readonly');
  $(this).closest('div').find('.save').hide();
  $(this).closest('div').find('.edit').show();
  var inputValue = $(this).closest('div').find('input').val();
  $.ajax({
    URL: "https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey",
    type: "POST",
    data: {
      inputValue: inputValue
    },
    success: function(data) {
      swal("Congrats", "Your name has been saved!", "success");
    }
  });
});
}

Please modify your indentation.

Chang
– Chang

2017-05-02 03:56:42 +00:00
Commented May 2, 2017 at 3:56 — Chang
– Chang, Commented May 2, 2017 at 3:56

Narendra Jadhav · Accepted Answer · 2022-07-06 06:33:38Z

2

Please check following lines in your code:

$(this).closest('div').find('input').attr('readonly', 'readonly');

when you click save button, above code makes input readonly. hence it appears that edit button has become inaccessible (as stated in your question).

$(this).closest('div').find('.save').hide();

above line is hiding the save button.

Solution

Change the code of click event on edit button as follows:

$(".edit").click(function(e) {

  $("#editInput").prop('disabled', false);

  // Make input accessible
  $("#editInput").prop('readonly', false);

  // Show the save button
  $(".save").show();
});

Code Snippet

$(document).ready(function() {

  $(".home").html('<label>Name:</label><input id="editInput" disabled="true" id="userFullName" value="" type="text"><button class="edit">Edit</button><button class="save">Save</button>');
  
  $(".edit").click(function(e) {
    $("#editInput").prop('disabled', false);
    $("#editInput").prop('readonly', false);
    $(".save").show();
  });

  $(".save").click(function(e) {
    $(this).closest('div').find('input').prop('disabled', true);
    $(this).closest('div').find('input').attr('readonly', 'readonly');
    $(this).closest('div').find('.save').hide();
    $(this).closest('div').find('.edit').show();
    var inputValue = $(this).closest('div').find('input').val();

    $.ajax({
      URL: "https://api.mlab.com/api/1/databases/spk-db/collections/dwUsers/58f62d66c2ef164e6b93a162?apiKey=apiKey",
      type: "POST",
      data: {
        inputValue: inputValue
      },
      success: function(data) {
        alert('name saved');
      },
      error: function() {
        alert('ajax error. Maybe StackOverflow does not allow ajax requests');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home"></div>

edited Jul 6, 2022 at 6:33

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

answered May 2, 2017 at 4:06

Muhammad Inaam Munir

1,26010 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hank.Ball Over a year ago

Thank you!! that was really helpful. I adjusted my code but when I run it, the error alert shows up. Is there something else I need to code so that the success alert shows up?

Muhammad Inaam Munir Over a year ago

@Hank.Ball please accept the answer if it was helpful. Thanks

Collectives™ on Stack Overflow

How to create save button with .ajax()

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related