2017-06-20 80 views
0

我不知道该说些什么除了标题。在rails视图中,通过div循环呈现多个员工配置文件,并随同编辑按钮一起切换配置文件并编辑表单,填充所显示内容的输入字段值。但是在点击“保存”时,只会显示第一个实例,这些表单域将作为参数发送。当我点击其他配置文件上的“保存”时没有任何反应。尽管字段和表单正在为所有员工呈现。渲染个别多种形式提交按钮,但一审的唯一形式变量正在提交

<div class="container team-inner"> 
     <%cleaners.each do |cleaner| %> 
      <div id="employee-div" class="row"> 
       <div class="col-md-12 team-container"> 
        <div class="row"> 
         <div class="col-md-3 "> 
          <div class="img-container"> 
           <%= image_tag('asset_emp2.png', class: '') %> 
          </div> 
         </div> 
         <div class="col-md-6 team-details"> 
          <div class="toggle-field"> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>First Name:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["first_name"]%></p> 
             <input type="hidden" id="emp-id" value=<%=cleaner["id"]%>> 
            </div> 
           </div> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>Last Name:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["last_name"]%></p> 
            </div> 
           </div> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>Employee ID:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["employee_id"]%></p> 
            </div> 
           </div> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>Date of Join:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["date_of_join"]%></p> 
            </div> 
           </div> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>E-mail ID: </p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["email"]%></p> 
            </div> 
           </div> 
           <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>Phone Number:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p><%=cleaner["phone_number"]%></p> 
            </div> 
           </div> 
           <!-- <div class="row grid"> 
            <div class="col-md-6 left-grid"> 
             <p>Number of jobs done:</p> 
            </div> 
            <div class="col-md-6 right-grid"> 
             <p></p> 
            </div> 
           </div> --> 
          </div> 
          <form name="empEditForm" class="toggle-field" style="display: none;" > 

           <div class="form-group"> 
            <label class="col-md-6">First Name:</label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-first-name" id="emp-edit-first-name" 
             class="form-control" value=<%=cleaner["first_name"]%>> 
             <input type="hidden" id="emp-id" value=<%=cleaner["id"]%>> 
            </div> 
           </div> 

           <div class="form-group"> 
            <label class="col-md-6">Last Name:</label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-last-name" id="emp-edit-last-name" class="form-control" value=<%=cleaner["last_name"]%>> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-md-6">Employee ID:</label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-employee-id" id="emp-edit-employee-id" class="form-control" value=<%=cleaner["employee_id"]%>> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-md-6">Date of Join:</label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-date-of-join" id="emp-edit-date-of-join" class="form-control" value=<%=cleaner["date_of_join"]%>> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-md-6">Email ID: </label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-email" id="emp-edit-first_name" class="form-control" value=<%=cleaner["email"]%>> 
            </div> 
           </div> 
           <div class="form-group"> 
            <label class="col-md-6">Phone Number: </label> 
            <div class="col-md-6"> 
             <input type="text" name="emp-edit-phone-number" id="emp-edit-phone-number" class="form-control" value=<%=cleaner["phone_number"]%>> 
            </div> 
           </div> 

          <!-- <div class="form-group"> 
            <label class="col-md-6">Number of jobs done:</label> 
            <div class="col-md-6"> 
             <input type="text" class="form-control" value="43"> 
            </div> 
           </div> --> 


          </form> 
         <!-- <div class="row grid"> 
           <div class="col-md-6 left-grid"> 
            <p>Rating:</p> 
           </div> 
           <div class="col-md-6 right-grid"> 
            <p>Rating: <span>4.8</span></p> 
            <p class="rating"><i class="glyphicon glyphicon-star rate"></i><i class="glyphicon glyphicon-star rate"></i><i class="glyphicon glyphicon-star rate"></i><i class="glyphicon glyphicon-star rate"></i><i class="glyphicon glyphicon-star"></i></p> 
           </div> 
          </div> --> 
         </div> 
         <div class="col-md-3 edit-link"> 
          <a href="#" class="btn save toggle-field toggle-btn">Edit</a> 
          <a href="#" id="save-btn" style="display:none;" class="btn save toggle-field" >Save</a> 
          <a href="#" style="display:none;" class="btn cancel toggle-field toggle-btn">CANCEL</a> 
         </div> 
        </div> 
       </div> 
      </div> 
     <%end%> 

这是我调用保存按钮的脚本。

$(document).ready(function(){ 
    $("#save-btn").click(function(){ 
     var token = localStorage.getItem("contractor_token").split(";"); 
     var first_name = document.forms["empEditForm"]["emp-edit-first-name"].value; 
     var last_name = document.forms["empEditForm"]["emp-edit-last-name"].value; 
     var emp_id = document.forms["empEditForm"]["emp-edit-employee-id"].value; 
     var date_of_join = document.forms["empEditForm"]["emp-edit-date-of-join"].value; 
     var phone_number = document.forms["empEditForm"]["emp-edit-phone-number"].value; 
     var email = document.forms["empEditForm"]["emp-edit-email"].value 
     var id = document.forms["empEditForm"]["emp-id"].value 

     var jquery_selector = $('#emp-edit-email').val(); 
     console.log("jquery_selector value shows undefined below"); 
     console.log(jquery_selector); 

     data["id"] = id; 
     data["email"] = email; 
     data["first_name"] = first_name; 
     data["last_name"] = last_name; 
     data["phone_number"] = phone_number; 
     data["employee_id"] = emp_id; 
     data["date_of_join"] = date_of_join; 
     console.log(data); 

     $.ajax({url: base_url + api_version + "/contractors/contractor_edit_employee", 
         type: "POST", 
         headers:{"Content-Type":"application/json", "Authorization":"bearer "+token[0]}, 
         data: JSON.stringify(data), 
       success: function(result){ 
        //console.log(result); 
        location.reload(); 
      } 
     }); 
    }); 
}); 

更新:修正了这个问题设置name场的形式,清洁ID本身的循环。

<form class="toggle-field" style="display: none;" name=<%=cleaner['id']%> > 

然后我发送清理器ID作为功能参数点击保存按钮。

<a href="#" style="display:none;" class="btn save toggle-field" onclick="return contractorEditEmployee('<%=cleaner['id']%>');" >SAVE</a> 

然后最后我能够通过访问带有清洁器id函数参数的表格名称来访问各个清洁器的细节。

function contractorEditEmployee(cleaner_id){ 
    var first_name = document.forms[cleaner_id]["emp-edit-first-name"].value; 
    var last_name = document.forms[cleaner_id]["emp-edit-last-name"].value; 

。 。 。

希望它可以帮助别人。感谢所有的帮助。

+0

for的名称因为使用循环而重复。表单名称应该是唯一的,表单名称是'empEditForm'。 您可以使用唯一的编号创建唯一的名称,然后点击提交按钮获取表单的名称并使用它获取值 –

+0

@PankajMakwana我认为这也是问题。你能链接我的任何来源? – Chet

+0

更改名称的格式如下: '

”class =“toggle-field”style =“display:none;” >' 在提交按钮上使用类,并在类名和按钮上使用点击事件应该在''标签内 –

回答

0

请检查下面提到的解决方案。我希望这能帮到您。

$("#save-btn").click(function(e){ 
    e.preventDefault(); 
    console.log($('form').serialize()); 
}); 
0

在你的html中有很多问题。

  1. 多个元素具有相同的ID。
  2. 缺少输入元素正在关闭 标记。
  3. 如果您使用的是ajax后,而不是使用form.submit为什么 直接使用$("#elem_id").val()获得价值?
  4. 名称值和Id值不正确。

喜欢的东西,

<div class="form-group"> 
     <label class="col-md-6">First Name:</label> 
     <div class="col-md-6"> 
      <input type="text" name="emp-edit-first-name" id="emp-edit-first-name" 
        class="form-control" value=><%=cleaner["first_name"]%> /> <!-- NOT CLOSE TAG--> 
      <input type="hidden" id="emp-id" value=><%=cleaner["id"]%> /> <!-- NOT CLOSE TAG--> 
     </div> 
    </div> 
<div class="col-md-3 edit-link"> 
     <a href="#" id="save-btn" style="display:none;" class="btn save toggle-field">Save</a> 
    </div> 
jQuery中

然后,

$(document).ready(function(){ 
    $("#save-btn").click(function(){ 
     var token = localStorage.getItem("contractor_token").split(";");  

     data["id"] = $("#emp-edit-first-name").val(); 
     data["first_name"] = $("#emp-id").val(); 
//etc.. 
     console.log(data); 

     $.ajax({url: base_url + api_version + "/contractors/contractor_edit_employee", 
         type: "POST", 
         headers:{"Content-Type":"application/json", "Authorization":"bearer "+token[0]}, 
         data: JSON.stringify(data), 
       success: function(result){ 
        console.log(result); 
      } 
     }); 
    }); 
}); 

$('#emp-edit-email').val()还正显示出未定义的,因为,emp-edit-email'name''id'。对于那个元素,你给id的值为'emp-edit-first_name'

+0

我不能使用jQuery选择器访问值。我得到他们未定义。 此外,感谢您指出电子邮件字段的重复ID。必须忘记改变它。现在修复它。 – Chet

+0

查看更新后的答案,应该提供$('#elemid')而不是元素名称。 – Matt

+0

我建议先修正html,然后用jquery。 – Matt