使用单独的提交按钮呈现多个表单，但仅提交第一个实例的表单变量答案

【问题标题】：Rendering multiple forms with individual submit buttons but only form variables of first instance is being submitted使用单独的提交按钮呈现多个表单，但仅提交第一个实例的表单变量
【发布时间】：2017-06-20 19:03:41
【问题描述】：

除了标题我不知道还能说什么。在 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>

最后我可以通过使用cleaner id函数参数访问表单名称来访问相应的cleaner详细信息。

 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;

。 . .

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

【问题讨论】：

for 的名称重复，因为您正在使用循环。表单名称应该是唯一的，这里表单名称是empEditForm。您可以使用唯一编号创建唯一名称，然后单击提交按钮获取表单名称并使用它来获取值
@PankajMakwana 我认为这也是问题所在。你能把我链接到任何来源吗？
在表单中更改名称：<form name="empEditForm<%=somecounter%>" class="toggle-field" style="display: none;" > 并在提交按钮上使用类并在类名上使用点击事件，按钮应在<form> 标签内

标签： javascript jquery ruby-on-rails

【解决方案1】：

请检查下面提到的解决方案。我希望这会对你有所帮助。

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

【讨论】：