使用一个按钮同时编辑字段

时间:2016-04-18 17:43:54

标签: javascript jquery ajax twig

当前情景:

我几天都感到沮丧,现在我不知道该怎么做了基本上我有一个表单,你可以在其中编辑和保存输入字段的每个记录。即firstName,lastName等。我没有得到任何错误,一切正常。

要求:

现在我要保存什么&编辑firstName和lastName输入字段,而不是单独编辑和保存firstName和lastName输入字段。现在他们都是不同的输入ID。

问题:

如果我想用按钮同时编辑firstName和lastName,我怎么能通过调用firstName和lastName来实现这个目的呢?

我怎样才能实现这一目标?感谢...

代码:

{{ form_start(form,{'multipart':'true','attr':{'class':'myform'}}) }}
  <label>First Name</label><br/>
  {{ form_widget(form.userinfo.firstName,{'id':'inputName','attr':{'class':'form-control inputName','placeholder':'name','disabled':'disabled'}}) }}
  {{ form_errors(form.userinfo.firstName) }}
  <input type="button" value="Edit" id="inputName-edit" class="btn btn-game link-btn" data="inputName"/>
  <input type="button" value="Done" id="inputName-save" class="btn btn-game link-btn-save" data="inputName"/>

  <label>Last Name</label><br/>
  {{ form_widget(form.userinfo.lastName,{'id':'lastName','attr':{'class':'form-control lastName','placeholder':'Last name','disabled':'disabled'}}) }}
  {{ form_errors(form.userinfo.lastName) }}
  <input type="button" value="Edit" id="lastName-edit" class="btn btn-game link-btn" data="lastName"/>
  <input type="button" value="Done" id="lastName-save" class="btn btn-game link-btn-save" data="lastName"/>
{{ form_end(form) }}

JS

$("#inputName,#lastName").on('keypress',function(e){
        if(e.which == 13) {
            var field = $(this).attr("id");
            var data = {};
            data['ajax']=true;
            data[$('#'+field).attr('name')]=$('#'+field).val();
            $.ajax({
                    method: "POST",
                    url: this.form.action,
                    data: data
                })
                .done(function( msg ) {
                    if(msg['status']=='fail'){
                        $('#errormsg span').html(msg['msg']);
                        $('#errormsg').show();
                    }
                    if($('#'+field).attr('name')=='game_user_profile[userinfo][firstName]')  {
                        $('#userfirstname').text($('#'+field).val());
                    }
                    if($('#'+field).attr('name')=='game_user_profile[userinfo][lastName]')  {
                        $('#userlastname').text($('#'+field).val());
                    }

                });

            $('#'+field+'-edit').show();
            $('#'+field+'-save').hide()
            $('#'+field).attr('disabled',true);
        }
});




//input enable and disable
$('.link-btn').click(function(){
        var field = $(this).attr("data");
        $('#'+field).attr('disabled',false).focus();
        $('#'+field+'-save').show();
        $(this).hide();

});

$(".link-btn-save").click(function(){
        var field = $(this).attr("data");
        var data = {};
        data['ajax']=true;
        data[$('#'+field).attr('name')]=$('#'+field).val();
        $.ajax({
                  method: "POST",
                  url: this.form.action,
                  data: data
                })
                  .done(function( msg ) {
                    if(msg['status']=='fail'){
                      $('#errormsg span').html(msg['msg']);
                      $('#errormsg').show();
                    }
                      if($('#'+field).attr('name')=='game_user_profile[userinfo][firstName]')  {
                          $('#userfirstname').text($('#'+field).val());
                      }
                      if($('#'+field).attr('name')=='game_user_profile[userinfo][lastName]')  {
                          $('#userlastname').text($('#'+field).val());
                      }
              });

        $('#'+field+'-edit').show();
        $(this).hide()
        $('#'+field).attr('disabled',true);
});

我想要这样

{{ form_start(form,{'multipart':'true','attr':{'class':'myform'}}) }}
  <label>First Name</label><br/>
  {{ form_widget(form.userinfo.firstName,{'id':'inputName','attr':{'class':'form-control inputName','placeholder':'name','disabled':'disabled'}}) }}
  {{ form_errors(form.userinfo.firstName) }}


  <label>Last Name</label><br/>
  {{ form_widget(form.userinfo.lastName,{'id':'lastName','attr':{'class':'form-control lastName','placeholder':'Last name','disabled':'disabled'}}) }}
  {{ form_errors(form.userinfo.lastName) }}

  <input type="button" value="Edit" id="inputName-edit" class="btn btn-game link-btn" data="inputName"/>
  <input type="button" value="Done" id="inputName-save" class="btn btn-game link-btn-save" data="inputName"/>

{{ form_end(form) }}

0 个答案:

没有答案