CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Frankly Saputra
Frankly Saputra

Reputation: 103

AJAX submit on multiple input field w/ edit & save button

I would like to have ajax submit (without reloading the page) on multiple inputs. So I have a form which has several input fields with edit and save buttons. When a user click on edit, it focuses on that input field and save with ajax.

The question is, how to make the save button with ajax submit without reloading the page and only that edited field will be changed on save.

Here's my html and js:

HTML

<br>
<br>
<label>Fullname</label>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Fullname" value="John Doe" readonly> <span class="input-group-btn">
        <button class="btn btn-default btn-edit" type="button">EDIT</button>
         <button class="btn btn-default btn-save" type="button">SAVE</button>
         <button class="btn btn-default btn-cancel" type="button">CANCEL</button>
      </span>

</div>
<br>
<label>Nickname</label>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Nickname" value="John" readonly> <span class="input-group-btn">
        <button class="btn btn-default btn-edit" type="button">EDIT</button>
         <button class="btn btn-default btn-save" type="button">SAVE</button>
         <button class="btn btn-default btn-cancel" type="button">CANCEL</button>
      </span>

</div>

JS

jQuery(document).ready(function () {
    $('.btn-save, .btn-cancel').hide();
    var inputVal;

    $('.btn-edit').click(function () {
        $(this).closest('div').find('.btn-edit').hide();
        $(this).closest('div').find('.btn-save, .btn-cancel').show();
        $(this).closest('div').find('input').removeAttr('readonly').focus();
        inputVal = $(this).closest('div').find('input').val();
    });

    $('.btn-save').click(function () {
        $(this).closest('div').find('input').attr('readonly', 'readonly');
        $(this).closest('div').find('.btn-save, .btn-cancel').hide();
        $(this).closest('div').find('.btn-edit').show();
    });

    $('.btn-cancel').click(function () {
        $(this).closest('div').find('input').val(inputVal);
        $(this).closest('div').find('input').attr('readonly', 'readonly');
        $(this).closest('div').find('.btn-save, .btn-cancel').hide();
        $(this).closest('div').find('.btn-edit').show();
    });


});

I created a demo on JSFiddle. Please help....

DEMO

Upvotes: 3

Views: 1754

Answers (1)

VMcreator
VMcreator

Reputation: 843

In your save button put ajax request onclick:

$('.btn-save').click(function () {
    $(this).closest('div').find('input').attr('readonly', 'readonly');
    $(this).closest('div').find('.btn-save, .btn-cancel').hide();
    $(this).closest('div').find('.btn-edit').show();
    var inputValue=$(this).closest('div').find('input').val();
    $.ajax({  URL:"submit url",
              type:"POST",
              data:{  inputValue:inputValue  },
              success:function(data){
                                   // do whatever you want with the response      
                                 }
           });
});

Please read more about jQuery ajax documentation as what Euphoria said.

Upvotes: 2

Related Questions