AJAX is sent to multiple input fields with edit and save button
I would like to have ajax submit (without page reloading) on multiple inputs. Thus, I have a form that has multiple input fields with edit and save buttons. When the user clicks on edit, it focuses on that input field and saves with ajax.
The question is how to make a 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....
source to share
In your save button, set the onclick ajax request:
$('.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
}
});
});
For more information on the jQuery ajax documentation, please read Euphoria .
source to share
SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKO SKO SKO SKO SKO SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKO SKO SKO SKO SKO SKO SKRSKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKR SKR SKO SKR SKR SKR SKR SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKR SKO SKR SKR SKR SKO SKR SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKR SKR SKR SKR SKr SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFRSKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR YUKO SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFRSKO SKO SKO SKO SKO SKO SKO SKO SKO SKO SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFR TFRYUKO YUKO YUKO YUKO YUKO YUKO YUKO YUKO SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKRSKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR SKR
source to share