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>
