Javascript jQuery-如何获取父表单ID(当有多个表单时)并将字段插入到正确的表单中
我有一个Rails应用程序,它通过jQuery将字段插入表单。当页面上有一个表单时,这非常有效,但当有两个表单时,脚本不会将字段插入正确的表单中。如何获取表单ID并将字段插入适当的表单Javascript jQuery-如何获取父表单ID(当有多个表单时)并将字段插入到正确的表单中,javascript,jquery,ruby-on-rails,Javascript,Jquery,Ruby On Rails,我有一个Rails应用程序,它通过jQuery将字段插入表单。当页面上有一个表单时,这非常有效,但当有两个表单时,脚本不会将字段插入正确的表单中。如何获取表单ID并将字段插入适当的表单 $(function() { $('form').on('click', '.remove_fields', function(event) { $(this).prev('input[type=hidden]').val('1'); $(this).closest('fieldset').h
$(function() {
$('form').on('click', '.remove_fields', function(event) {
$(this).prev('input[type=hidden]').val('1');
$(this).closest('fieldset').hide();
return event.preventDefault();
});
return $('form').on('click', '.add_fields', function(event) {
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$(this).before($(this).data('fields').replace(regexp, time));
return event.preventDefault();
});
});
供参考;以下是触发插入字段的链接:
<a class="add_fields" data-id="70151989617000" data-fields="<fieldset class="marginBottom20"> <div class="row col-lg-8 padAll20 ghostBG locationDetails form"> <div class="col-lg-3 colMarginRight"> <label>First Name <em>*</em></label> <input class="wide" placeholder="First Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][first_name]" id="courselocation_courseinstructors_attributes_70151989617000_first_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Last Night <em>*</em></label> <input class="wide" placeholder="Last Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][last_name]" id="courselocation_courseinstructors_attributes_70151989617000_last_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Title <em>*</em></label> <input class="wide" placeholder="Current Title" type="text" name="courselocation[courseinstructors_attributes][70151989617000][title]" id="courselocation_courseinstructors_attributes_70151989617000_title" /> </div> <div class="col-lg-3"> <label>Company <em>*</em></label> <input class="wide" placeholder="Current Company" type="text" name="courselocation[courseinstructors_attributes][70151989617000][company]" id="courselocation_courseinstructors_attributes_70151989617000_company" /> </div> <div class="col-lg-12 padTop10"> <label>Profile Image <em>*</em></label> <div class="imageUpload"> <input placeholder="Image" class="wide" type="file" name="courselocation[courseinstructors_attributes][70151989617000][image]" id="courselocation_courseinstructors_attributes_70151989617000_image" /> </div> </div> </div></fieldset>" href="#">Add Another Instructor</a>
第一格式HTML
<form class="edit_course" id="edit_course_7" enctype="multipart/form-data" action="/admin/courses/become-a-web-developer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓">
<div class="marginTop40">
<a class="add_fields" data-id="70152053053520" data-fields="<fieldset class="marginBottom20"> <div class="row col-lg-12 padAll20 ghostBG locationDetails form"> <div class="col-lg-3 colMarginRight"> <label>Name <em>*</em></label> <input class="wide" placeholder="Name of Location" type="text" name="course[courselocations_attributes][70152053053520][name]" id="course_courselocations_attributes_70152053053520_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Address <em>*</em></label> <input class="wide" placeholder="Address" type="text" name="course[courselocations_attributes][70152053053520][address]" id="course_courselocations_attributes_70152053053520_address" /> </div> <div class="col-lg-2 colMarginRight"> <label>City <em>*</em></label> <input class="wide" placeholder="City" type="text" name="course[courselocations_attributes][70152053053520][city]" id="course_courselocations_attributes_70152053053520_city" /> </div> <div class="col-lg-1 colMarginRight"> <label>State <em>*</em></label> <input class="wide" placeholder="XX" pattern="[A-Za-z]{2}" type="text" name="course[courselocations_attributes][70152053053520][state]" id="course_courselocations_attributes_70152053053520_state" /> </div> <div class="col-lg-2"> <label>Zipcode <em>*</em></label> <input class="wide" placeholder="12345" type="text" name="course[courselocations_attributes][70152053053520][zipcode]" id="course_courselocations_attributes_70152053053520_zipcode" /> </div> <div class="col-lg-12 padTop10"> <input type="hidden" value="false" name="course[courselocations_attributes][70152053053520][_destroy]" id="course_courselocations_attributes_70152053053520__destroy" /><a class="remove_fields" href="#">Remove</a> </div> </div></fieldset>" href="#">Add a new location</a>
</div>
</form>
<form class="edit_courselocation" id="edit_courselocation_55" enctype="multipart/form-data" action="/admin/courselocations/austin-wework-austin-tx" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
<div class="marginTop20 marginBottom40">
<a class="add_fields" data-id="70151989617000" data-fields="<fieldset class="marginBottom20"> <div class="row col-lg-8 padAll20 ghostBG locationDetails form"> <div class="col-lg-3 colMarginRight"> <label>First Name <em>*</em></label> <input class="wide" placeholder="First Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][first_name]" id="courselocation_courseinstructors_attributes_70151989617000_first_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Last Night <em>*</em></label> <input class="wide" placeholder="Last Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][last_name]" id="courselocation_courseinstructors_attributes_70151989617000_last_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Title <em>*</em></label> <input class="wide" placeholder="Current Title" type="text" name="courselocation[courseinstructors_attributes][70151989617000][title]" id="courselocation_courseinstructors_attributes_70151989617000_title" /> </div> <div class="col-lg-3"> <label>Company <em>*</em></label> <input class="wide" placeholder="Current Company" type="text" name="courselocation[courseinstructors_attributes][70151989617000][company]" id="courselocation_courseinstructors_attributes_70151989617000_company" /> </div> <div class="col-lg-12 padTop10"> <label>Profile Image <em>*</em></label> <div class="imageUpload"> <input placeholder="Image" class="wide" type="file" name="courselocation[courseinstructors_attributes][70151989617000][image]" id="courselocation_courseinstructors_attributes_70151989617000_image" /> </div> </div> </div></fieldset>" href="#">Add Another Instructor</a>
</div>
</form>
“href=”#“>添加新位置
第二格式HTML
<form class="edit_course" id="edit_course_7" enctype="multipart/form-data" action="/admin/courses/become-a-web-developer" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓">
<div class="marginTop40">
<a class="add_fields" data-id="70152053053520" data-fields="<fieldset class="marginBottom20"> <div class="row col-lg-12 padAll20 ghostBG locationDetails form"> <div class="col-lg-3 colMarginRight"> <label>Name <em>*</em></label> <input class="wide" placeholder="Name of Location" type="text" name="course[courselocations_attributes][70152053053520][name]" id="course_courselocations_attributes_70152053053520_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Address <em>*</em></label> <input class="wide" placeholder="Address" type="text" name="course[courselocations_attributes][70152053053520][address]" id="course_courselocations_attributes_70152053053520_address" /> </div> <div class="col-lg-2 colMarginRight"> <label>City <em>*</em></label> <input class="wide" placeholder="City" type="text" name="course[courselocations_attributes][70152053053520][city]" id="course_courselocations_attributes_70152053053520_city" /> </div> <div class="col-lg-1 colMarginRight"> <label>State <em>*</em></label> <input class="wide" placeholder="XX" pattern="[A-Za-z]{2}" type="text" name="course[courselocations_attributes][70152053053520][state]" id="course_courselocations_attributes_70152053053520_state" /> </div> <div class="col-lg-2"> <label>Zipcode <em>*</em></label> <input class="wide" placeholder="12345" type="text" name="course[courselocations_attributes][70152053053520][zipcode]" id="course_courselocations_attributes_70152053053520_zipcode" /> </div> <div class="col-lg-12 padTop10"> <input type="hidden" value="false" name="course[courselocations_attributes][70152053053520][_destroy]" id="course_courselocations_attributes_70152053053520__destroy" /><a class="remove_fields" href="#">Remove</a> </div> </div></fieldset>" href="#">Add a new location</a>
</div>
</form>
<form class="edit_courselocation" id="edit_courselocation_55" enctype="multipart/form-data" action="/admin/courselocations/austin-wework-austin-tx" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">
<div class="marginTop20 marginBottom40">
<a class="add_fields" data-id="70151989617000" data-fields="<fieldset class="marginBottom20"> <div class="row col-lg-8 padAll20 ghostBG locationDetails form"> <div class="col-lg-3 colMarginRight"> <label>First Name <em>*</em></label> <input class="wide" placeholder="First Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][first_name]" id="courselocation_courseinstructors_attributes_70151989617000_first_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Last Night <em>*</em></label> <input class="wide" placeholder="Last Name" type="text" name="courselocation[courseinstructors_attributes][70151989617000][last_name]" id="courselocation_courseinstructors_attributes_70151989617000_last_name" /> </div> <div class="col-lg-3 colMarginRight"> <label>Title <em>*</em></label> <input class="wide" placeholder="Current Title" type="text" name="courselocation[courseinstructors_attributes][70151989617000][title]" id="courselocation_courseinstructors_attributes_70151989617000_title" /> </div> <div class="col-lg-3"> <label>Company <em>*</em></label> <input class="wide" placeholder="Current Company" type="text" name="courselocation[courseinstructors_attributes][70151989617000][company]" id="courselocation_courseinstructors_attributes_70151989617000_company" /> </div> <div class="col-lg-12 padTop10"> <label>Profile Image <em>*</em></label> <div class="imageUpload"> <input placeholder="Image" class="wide" type="file" name="courselocation[courseinstructors_attributes][70151989617000][image]" id="courselocation_courseinstructors_attributes_70151989617000_image" /> </div> </div> </div></fieldset>" href="#">Add Another Instructor</a>
</div>
</form>
经过一番尝试,我意识到在Rails中发出AJAX请求时,不会重新加载JS
function initialise(){
$(function() {
$('form').on('click', '.remove_fields', function(event) {
$(this).prev('input[type=hidden]').val('1');
$(this).closest('fieldset').hide();
return event.preventDefault();
});
return $('form').on('click', '.add_fields', function(event) {
var linkID = $(this).attr("data-id")
alert(linkID)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$(this).before($(this).data('fields').replace(regexp, time));
return event.preventDefault();
});
});
};
$(document).ready(function(){
initialise();
});
然后在AJAX请求上调用以下命令以加载第二个表单:
$(document).ajaxComplete(function () {
initialise();
});
在仔细研究了一下之后,我意识到在Rails中发出AJAX请求时,不会重新加载JS
function initialise(){
$(function() {
$('form').on('click', '.remove_fields', function(event) {
$(this).prev('input[type=hidden]').val('1');
$(this).closest('fieldset').hide();
return event.preventDefault();
});
return $('form').on('click', '.add_fields', function(event) {
var linkID = $(this).attr("data-id")
alert(linkID)
var regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$(this).before($(this).data('fields').replace(regexp, time));
return event.preventDefault();
});
});
};
$(document).ready(function(){
initialise();
});
然后在AJAX请求上调用以下命令以加载第二个表单:
$(document).ajaxComplete(function () {
initialise();
});
你可以发布表单的HTML代码吗?也许你应该包括生成的HTML的结构,你只需使用f12检查页面并包含代码,这样我们就可以设计出最佳的解决方案,发布两个表单的HTML可以删除不相关的部分吗?这是很多代码。是的,对不起,我以为我复制了错误的版本n、 你可以发布表单的HTML代码吗?也许你应该包括生成的HTML的结构,你只需使用f12检查页面并包含代码,这样我们就可以设计出最佳解决方案,发布两个表单的HTML扫描你删除不相关的部分?这是很多代码。是的,对不起,我想我复制了错误的版本离子。