我试图使一个表单与一个按钮,以添加来自多个人的信息,并删除他们,但我有两个问题,我相信可以一起解决。我只是不知道该怎么做,也不知道什么是实现我目标的最佳方式。
当一个人点击添加信息时,它会复制相同的html。所以当我制作phpmailer时,它会有3次相同的名字(name="radio1")我需要让它在用户按下按钮时计数(name="radio1",name="radio2",name="radio3")
第二个问题是男性/女性按钮不能相互独立地工作,点击按钮3次,然后点击男性按钮中的一个,只有顶部的按钮才会被选中。现在我假设我可以使用相同类型的脚本来修复这两个问题,方法是将div的id或类计数为纯css (class=节“plan cf1",节class="plan cf2",节class="plan cf3"),然后为多达10组div和10组php制作css。
然而,我不确定这是不是实现我目标的最好方法,甚至是可能的。对于如何最好地解决我的问题,有什么见解将不胜感激?代码没有被清理,所以请原谅这里的混乱
@KenoClayton是的,当有人点击添加信息按钮时,它会增加名字IE name="radio1“和id或IE类中的数字,这样我就可以让他们单独发布,让男性/女性按钮独立操作。我为你做的男性/女性,所以你可以明白我的意思,只需点击最后两个男性/女性中的任何一个。我需要让它的地方,无论他们添加和删除了多少次,通过点击添加/删除按钮,它会不断计数的数字,以便他们将显示和正确发布的形式包装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>
发布于 2018-08-21 05:02:30
<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>
https://stackoverflow.com/questions/51897857
复制相似问题