我试图制作一个带有按钮的表单来添加来自多人的信息并删除他们，但我有 2 个问题，我认为可以一起解决。我只是不知道该怎么做，或者什么是实现我的目标的最佳方式。
当一个人点击添加信息时，它会复制相同的 html。所以当我制作 phpmailer 时，它会有 3 次相同的名称 (name="radio1") 我需要在有人按下按钮时计算它的数量 (name="radio1",name="radio2",name="radio3")
第二个问题是，男性/女性按钮不会相互独立地工作，点击按钮 3 次，然后点击其中一个男性按钮，只有最上面的一个会被选中。现在我假设我可以使用相同类型的脚本来解决这两个问题，方法是计算 div 的 id 或类，因为它们是纯 css (section class="plan cf1",section class="plan cf2",section class= "plan cf3") 然后为最多 10 套 div 制作 css 并制作 10 套 php。
但是我不确定这是实现我的目标的最佳方法，甚至不确定。关于如何最好地解决我的问题的任何见解将不胜感激？ 代码未清理，所以请原谅乱七八糟的
@KenoClayton 是的，当有人点击添加信息按钮时，它会增加 name IE name="radio1"和 id 或 class IE 中的数字，这样我就可以让它们单独发布，并且男性/女性按钮可以独立操作。我为你做的男性/女性，所以你可以明白我的意思，只需点击最后 2 个男性/女性事物中的任何一个。无论他们通过单击添加/删除按钮添加和删除 formwrap div 多少次，我都需要将它带到哪里，它会不断计算数字，以便它们正确显示和发布。通过添加一个数字是我能想到的让它工作的唯一方法..有更好的方法吗？ https://jsfiddle.net/8frqx97h/26/
$radio1 = $_POST['radio1'] ;
$radio2 = $_POST['radio2'] ;
$radio3 = $_POST['radio3'] ;
/* CSS Document */
html,body{
font-family: 'Montserrat', sans-serif;
padding:0px;
margin:0px;
height:100%;
width:100%;
background-color:#F5F5F5;
}
/****adding a driver****/
#addingdriver{
margin-top:10px;
margin-bottom:50px;
border: 1px solid blue;
width:100%;
display:table;
}
#driverinfo{
border: 1px solid red;
width:60%;
margin-bottom:20px;
margin-left:10px;
}
#test1{
height:50px;
width:150px;
border: 1px solid green;
float:left;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
}
#test2{
float:right;
height:25px;
border: px solid red;
margin :0 auto;
cursor: pointer;
background-color:#3E9DC5;
width:100px;
font-size: 10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
/*form styles*/
#msform {
border:none; display: table;
width: 780px;
position: relative;
margin :0 auto;
}
fieldset{border:none;}
#lefttxt{
width: 100%;
margin-bottom:15px;
}
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98%;
text-align: center;
line-height: 30px;
height: 30px;
}
#ftx2{
border: px solid black;
border-radius: 2px 2px 0px 0px;
width: 40%;
text-align: center;
line-height: 30px;
height: 30px;
}
#formwrap{
vertical-align:top;
padding:5px;
width: 45%;
border: 1px solid green;
display: inline-block;
}
#formwrap2{
padding:5px;
width: 45%;
border: px solid red;
float:right;
}
date,input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
box-sizing:initial;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
text-align: center;
text-align-last: center;
}
input,textarea{
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
select{ border: 1px solid green;
width: 98%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
option {
text-align: left;
/* reset to left*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 97.5%;
text-align: center;
line-height: 30px;
height: 30px;
}
select{ border: 1px solid green;
width: 97.5%;
line-height: 46px;
height: 30px;
margin-bottom:15px;
text-align: center;
background-color: #FFF;
text-align: center;
text-align-last: center;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
-webkit-box-sizing:content-box;
border-color: #CECBCB;
border-style: solid;
border-width: 1px 2px 2px 2px;
}
input[type=date]{
line-height: 46px;
height: 30px;
width:97.1%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------mozilla ----------------*/
@-moz-document url-prefix() {
#ftx1{
background-color:#FFFFFF;
border-color: #CECBCB;
border-style: solid;
border-width: 2px 2px 0px 2px;
width: 98.1%;
text-align: center;
line-height: 30px;
height: 30px;
}
input[type=date]{
line-height: 30px;
height: 30px;
width:97.3%;
text-align: center;
text-align-last: center;
}
}
/* ------------------------radio buttons ----------------*/
/* CONTAINERS */
.container {max-width: 850px; width: 100%; margin: 0 auto;border: 1px solid black;}
.four { width: 49%; max-width: 49%;border: 1px solid red;}
/* COLUMNS */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-of-type { margin-left: 0; }
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* FORM */
#msform .plan input, #msform .payment-plan input, #msform .payment-type input{
display: none;
}
#msform label{
position: relative;
color: #fff;
background-color: #aaa;
font-size: 26px;
text-align: center;
height: ;
line-height: ;
display: block;
cursor: pointer;
border: 2px solid transparent;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#msform .plan input:checked + label, #msform .payment-plan input:checked + label, #msform .payment-type input:checked + label{
border: 2px solid #333;
background-color: #2fcc71;
}
#msform .plan input:checked + label:after, msform .payment-plan input:checked + label:after, #msform .payment-type input:checked + label:after{
content: "\2713";
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 100%;
border: 2px solid #333;
background-color: #2fcc71;
z-index: 999;
position: absolute;
top: -10px;
right: -10px;
}
#submit{
font-weight:bold;
margin :0 auto;
width:90%;
height:40px;
line-height:40px;
cursor: pointer;
background-color:#3E9DC5;
}
.submit:hover{
cursor: pointer;
transform: rotateX(360deg);
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<html lang="en" class="no-js">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="SHORTCUT ICON" href="images/favicon.ico"/>
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="canonical" href="" />
<title>title</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta property="og:url" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/quick.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<form id="msform" method="post" action="inc/test.php"/>
<h2 class="fs-title">Personal Info</h2>
<div id="formwrap">
<div id="ftx1">GENDER:</div>
<section class="plan cf">
<input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label>
<input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label>
</section>
</div>
<div id="addingdriver">
<table class="table table-bordered" id="item_table">
<tr>
<th><button type="button" name="add" id="test1" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus">Click to Add info</span></button></th>
</tr>
</table>
</div>
<input id="submit" class="button_text" type="submit" name="submit" value="SUBMIT" />
</form>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><br><div id="ddd"><div id="driverinfo">Info<button type="button" name="remove" id="test2" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus">Remove info</span></button></div><div id="formwrap"><div id="ftx1">FIRST NAME</div><input type="text" name="fname" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">LAST NAME</div><input type="text" name="lastn" class="box" maxlength="40" min="9" max="40"placeholder=""/></div><div id="formwrap"><div id="ftx1">DATE OF BIRTH</div><input type="date" name="dob" class="element text" size="" maxlength="15" value="" type="text" placeholder="" required></div><div id="formwrap"><div id="ftx1">input#:</div><input id="element_1" name="ddn" class="element text medium" type="text" maxlength="40" value="" placeholder=""></div><div id="formwrap"><div id="ftx1">MARITAL STATUS:</div><select id="status" name="drop" onChange="showDiv(this)"><option value="">Select One</option><option value="Single">Single</option><option value="married">Married</option></select></div><div id="formwrap"><div id="ftx1">GENDER:</div><section class="plan cf"><input type="radio" name="radio1" id="Male" value="Male"><label class="free-label four col" for="Male">Male</label><input type="radio" name="radio1" id="Female" value="Female" checked><label class="basic-label four col" for="Female">Female</label></section></div></div><br><br><br></td>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
});
</script>
</body>
</html>最佳答案
<script>
$(document).ready(function(){
var count = 0;
$(document).on('click', '.add', function(){
var html = '<div id="formwrap2" class="test'+count+'" name="test'+count+'">content goes here</div>';
count++;
$('#item_table').append(html);
$(document).on('click', '.remove', function(){
$(this).closest('#formwrap2').remove();
});
});
});
</script>
关于javascript - 复制 html 但计算 css 和 html 代码的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51897857/