复制html但计算css和html代码的按钮

Im trying to make a form with a button to add info from multiple people and delete them but I have 2 issues that I believe can be fixed together. I just don't have any idea how to do it or what would be the best way to achieve my goal.

When a person clicks on adding info it replicates the same html. So when I make the phpmailer it would have the same name 3 times (name="radio1") I need to make it when the person presses the button it will count up the number (name="radio1",name="radio2",name="radio3")

The second problem is that the male/female buttons wont work independent of each other click the button 3 times and click on one of the male buttons and only the top one would select. Now im assuming I can use the same type of script to fix both problems by counting up the id or class of the div as they are pure css (section class="plan cf1",section class="plan cf2",section class="plan cf3") and then making css for up to 10 sets of divs and make 10 sets of php.

However im not sure this is the best method to achieve my goal or even possible. Any insight would be appreciated on how to best go about fixing my problem? Code is not cleaned up so please forgive the mess

@KenoClayton yes when Someone clicks the add info button it increases the number inside of name IE name="radio1" and id or class IE so this way I can make them post separately and the male/female buttons to operate independently. The male/female I did for you so u can see what I mean just click around on any of the last 2 male/female things. I need to make it to where no matter how many times they add and remove the formwrap div by clicking on the add/remove buttons it keeps counting up the numbers so they will display and post properly. and by adding a number is the only way I can think of to make it work.. Is there a better way? 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>

</div>
doufuhao0566
doufuhao0566 我在帖子中为你添加了回复
接近 2 年之前 回复
doulan8152
doulan8152 我还建议使用document.createElement()或insertAdjacentHTML而不是直接粘贴html代码供浏览器解析。它更易读,更容易排除故障。
接近 2 年之前 回复
doukan4039
doukan4039 你可以在你的名字中添加方括号,如radio1[]。这将在提交时发送类似数据的数组。当你在php中阅读发布数据时,你也会得到一个数组。
接近 2 年之前 回复
doujianchao7446
doujianchao7446 我试图完全理解这个问题,所以请耐心等待。首先,您希望每个发送的单选按钮的名称增加1吗?其次按钮不能独立工作,只选择最顶层的按钮?
接近 2 年之前 回复

1个回答

<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>
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐