【发布时间】：2020-04-02 18:09:08
【问题描述】：
我有一个接受输入的表单，当单击添加按钮时，我使用脚本来复制我的表单。我的表单中有一个单选按钮，其中包含一个隐藏的文本区域。每当我选择 value="uygunDegil" 时，该文本区域都会变为可见。问题是当我附加我的复制表单时，我将无法使用我的功能访问我的复制单选按钮，假设我在我的第 5 个复制字段上选择value="uygunDegil"，我的第一个隐藏文本区域变为可见而不是第 5 个。我需要添加某种 id 并将其动态地迭代到我的表单或我的单选按钮，但我不知道该怎么做。我是 JS 新手，所以任何帮助或建议将不胜感激。
Form.php
<form method="post">
<div class="form-group row">
<div class="col-auto">
<label for="ad">Ad</label>
<input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
<label for="soyad">Soyad</label>
<input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
<label for="no">No</label>
<input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
<label for="course">Bölümü</label>
<input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
<label for="alKredi">Almak İstediği Kredi</label>
<input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
<label for="verKredi">Alabileceği Kredi</label>
<input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
<label for="evetKontrol">Evet</label>
<input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol">Hayır</label>
<input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo" style="visibility:hidden">
<strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
</div>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
我附加的表单副本
<div class="form-group rowCopy" style="display: none;">
<div class="col-auto">
<label for="ad">Ad</label>
<input type="text" name="ad[]" class="form-control" id="ad" placeholder="Öğrencinin Adı"/>
<label for="soyad">Soyad</label>
<input type="text" name="soyad[]" class="form-control" id="soyad" placeholder="Öğrencinin Soyadı"/>
<label for="no">No</label>
<input type="text" name="numara[]" class="form-control" id="no" placeholder="Öğrencinin Numarası">
<label for="course">Bölümü</label>
<input type="text" name="bolum[]" class="form-control" id="course" placeholder="Öğrencinin Bölümü">
<label for="alKredi">Almak İstediği Kredi</label>
<input type="text" name="alKredi[]" class="form-control" id="alKredi" placeholder="Almak İstediği Kredi">
<label for="verKredi">Alabileceği Kredi</label>
<input type="text" name="verKredi[]" class="form-control" id="verKredi" placeholder="Alabileceği Kredi">
<?php echo '<strong>Uygun mu?</strong><br><br>'; ?>
<label for="evetKontrol">Evet</label>
<input type="radio" id="evetKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygun" checked>
<label for="hayirKontrol">Hayır</label>
<input type="radio" id="hayirKontrol" name="uygun" onclick="javascript:yesnoCheck();" value="uygunDegil">
<div id="ifNo" style="visibility:hidden">
<strong>Uygun Olmama Sebebi:</strong> <input type="textarea" id="hayirSebep" name="hayirSebep" style="height: 75px"><br>
</div>
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</a>
</div>
</div>
</div>
fields.js
$(document).ready(function() {
//group add limit
var maxGroup = 25;
//add more fields group
$(".addMore").click(function() {
if ($('body').find('.row').length < maxGroup) {
var fieldHTML = '<div class="form-group row">' + $(".rowCopy").html() + '</div>';
$('body').find('.row:last').after(fieldHTML);
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".row").remove();
});
});
function yesnoCheck() {
if (document.getElementById('evetKontrol').checked) {
document.getElementById('ifNo').style.visibility = 'hidden';
} else document.getElementById('ifNo').style.visibility = 'visible';
}
【问题讨论】：
-
使用
data-id之类的属性并使用.data("id")获取它 -
在 HTML 中，IDs 必须是 unique to the document，复制它们可能会导致问题。我建议改用类。
-
@showdev 这就是为什么我正在寻找一种方法来添加和迭代它们。如果不可能，我也可以上课。我的问题是我不知道是否可以在迭代时将一些属性与我的 js 代码添加到我的 html 表单中（buttonOne、buttonTwo、buttonThree 等）
-
这真的是一个php问题吗？
标签： javascript jquery html function