我想在多个输入上使用 ajax 提交(无需重新加载页面)。 所以我有一个表单,其中有几个带有编辑和保存按钮的输入字段。当用户点击编辑时,它会聚焦于该输入字段并使用 ajax 保存。
问题是,如何在不重新加载页面的情况下使用 ajax 提交保存按钮,并且只有编辑的字段会在保存时更改。
这是我的 html 和 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();
});
});
我在 JSFiddle 上创建了一个演示。请帮忙....
最佳答案
在您的保存按钮中放置 ajax 请求 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
}
});
});
如 Euphoria 所说,请阅读有关 jQuery ajax 文档的更多信息。
关于javascript - 使用/编辑和保存按钮在多个输入字段上提交 AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31870039/