Javascript 使用单个提交按钮呈现多个表单，但仅提交第一个实例的表单变量
除了标题，我不知道还有什么要说。在rails视图中，im循环通过一个div来呈现多个员工配置文件，并使用编辑按钮将配置文件切换到并编辑表单，从显示的内容填充输入字段值。但单击“保存”（仅呈现第一个实例）时，这些表单字段将作为参数发送。当我在其他配置文件上单击“保存”时，不会发生任何事情。即使字段和表单是为所有员工呈现的Javascript 使用单个提交按钮呈现多个表单，但仅提交第一个实例的表单变量,javascript,jquery,ruby-on-rails,Javascript,Jquery,Ruby On Rails,除了标题，我不知道还有什么要说。在rails视图中，im循环通过一个div来呈现多个员工配置文件，并使用编辑按钮将配置文件切换到并编辑表单，从显示的内容填充输入字段值。但单击“保存”（仅呈现第一个实例）时，这些表单字段将作为参数发送。当我在其他配置文件上单击“保存”时，不会发生任何事情。即使字段和表单是为所有员工呈现的 <div class="container team-inner"> <%cleaners.each do |cleaner| %>
<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%>
name<form class="toggle-field" style="display: none;" name=<%=cleaner['id']%> >
希望它能帮助别人。谢谢您的帮助。请检查下面提到的解决方案。我希望这对你有帮助
$("#save-btn").click(function(e){
e.preventDefault();
console.log($('form').serialize());
});
for的名称重复，因为您正在使用循环。此处的表单名称应唯一，表单名称为
empEditForm<a href="#" style="display:none;" class="btn save toggle-field" onclick="return contractorEditEmployee('<%=cleaner['id']%>');" >SAVE</a>
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;
$("#save-btn").click(function(e){
e.preventDefault();
console.log($('form').serialize());
});