在ajax成功之后保存输入数据并在文本框中添加图标

时间:2017-07-03 07:46:23

标签: javascript jquery html ajax

我想通过自己的id保存每个输入文本,并在ajax成功后在该输入中附加图标。

HTML:

    <div class="form-group has-feedback autosave">
        <input type="text" class="form-control" id="fname" name="fname" placeholder="Your name"/>
        <i class="form-control-feedback"></i>
    </div>

    <div class="form-group has-feedback autosave">
        <input type="text" class="form-control" id="lname" name="lname" placeholder="Your lastname"/>
        <i class="form-control-feedback"></i>
    </div>

使用Javascript:

$(document).on('blur', '.autosave input', function(e) { 
//when input inside .autosave was blurred
  var _id=$(this).attr('id');//id
  var _val=$(this).val();//value

    $.ajax({
        type: 'POST',
        url: 'save.php',
        data: {id:_id,val:_val},//send id and val
        dataType: 'json',
        success:function(data){
          $(_id).addClass('fa fa-check');//addclass when succeed
          console.log(data);//debug
        },//success
    });//$.ajax
  });

我计划在提交成功时在每个输入中显示检查图标。因此,我们的想法是从每个输入中获取idval。并通过ajax将其发送到db。在响应之后,该输入将使用具有特定id的图标进行更新。

2 个答案:

答案 0 :(得分:1)

您不需要使用元素的IEnumerable<Team> teams = Matches.GroupBy(m => new { m.AwayTeam, m.HomeTeam, m.Country }) .Select( g => new[] { new Team {Country = g.Key.Country, Name = g.Key.AwayTeam}, new Team {Country = g.Key.Country, Name = g.Key.HomeTeam} }) .SelectMany(x => x) .GroupBy(t => new { t.Name, t.Country }) .Select(g => new Team { Name = g.Key.Name, Country = g.Key.Country }); - 您可以将对该函数运行的id的引用存储起来,并在this成功处理程序中使用它。试试这个:

$.ajax

答案 1 :(得分:0)

最后,经过一番大尝试。我找到了解决方案。感谢@RoryMcCrossan,他给了我最初的想法。

<强>的Javascript ...

    success: function(resp) {
        $this.closest('.form-line').find('i').removeClass('fa fa-check').addClass('fa fa-check');               
        $this.closest('.form-group div.form-line').addClass('success has-success');
        console.log(resp); //debug
    },

唯一不同的是成功后的过程。看起来很乱,但工作。如果您有任何较短的图案,将不胜感激。