Question

我想在多个输入上提交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上创建了一个demo。请帮帮....

DEMO

Answer 1

在你的保存按钮中输入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      
                                 }
           });
});

请阅读更多关于jQuery ajax文档的内容，以及 Euphoria 所说的内容。

AJAX提交多个输入字段w / edit＆amp;保存按钮

1 个答案: