Menu
This is part of an application form which should be modified:
I need to add something like + button in below of this row, after clicking this button It should add 1 more row (like above). Should be something like:
As you see in image above, after clicking red + button added new row. There should be ability to click + button (add new rows) as many times as user needs.
I know the way to play with visibility, but in this case I'll need to create like 100+ duplicates rows and hide them. Maybe there is any way to generate It via Javascript dynamically?
This is simplified part of an application form:
<div class="container">
<form class="form-style-9">
<ul id="personal-details">
<li>
<ul class="column">
<li>
<label for="NameOfVessel">Name of Vessel</label>
<input id="NameOfVessel" type="text" name="NameOfVessel" class="field-style field-split25 align-left" placeholder="Name of Vessel" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="TypeOfVessel">Type of Vessel</label>
<input id="TypeOfVessel" type="text" name="TypeOfVessel" class="field-style field-split25 align-left" placeholder="Type of Vessel" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="Flag">Flag</label>
<input id="Flag" type="text" name="Flag" class="field-style field-split25 align-left" placeholder="Flag" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="DWT">DWT</label>
<input id="DWT" type="text" name="DWT" class="field-style field-split25 align-left" placeholder="DWT" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="TypeOfMEkW">Type of ME/kW</label>
<input id="TypeOfMEkW" type="text" name="TypeOfMEkW" class="field-style field-split25 align-left" placeholder="Type of ME/kW" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="Rank">Position</label>
<select id='Rank' name="Rank" class="field-style field-split25 align-left">
<option selected disabled value="0">Select position</option>
<option value="1">Master</option>
<option value="91">Ch. Officer Junior</option>
<option value="2">Ch.Officer</option>
</select>
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="SignOn">Sign on</label>
<input id="SignOn" type="date" name="SignOn" class="field-style field-split25 align-left" placeholder="Sign on" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="SignOff">Sign off</label>
<input id="SignOff" type="date" name="SignOff" class="field-style field-split25 align-left" placeholder="Sign off" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" name="CompanyName" class="field-style field-split25 align-left" placeholder="Company Name" />
</li>
</ul>
</li>
</ul>
</form>
</div>
I've created JS FIDDLE
596
You can use jQuery .clone() function. Change the id of your ul "personal-details" into class and clone it into your form when you click the add button.
$(document).ready(function(){
$( ".add-row" ).click(function(){
var $clone = $( "ul.personal-details" ).first().clone();
$clone.append( "<button type='button' class='remove-row'>-</button>" );
$clone.insertBefore( ".add-row" );
});
$( ".form-style-9" ).on("click", ".remove-row", function(){
$(this).parent().remove();
});
});<style type="text/css">
.form-style-9{
max-width: 450px;
background: #FAFAFA;
padding: 30px;
margin: 50px auto;
box-shadow: 1px 1px 25px rgba(0, 0, 0, 0.35);
border-radius: 10px;
border: 6px solid #305A72;
}
body {
background-color: #F7FDFF;
}
.form-style-9 ul{
padding:0;
margin:0;
list-style:none;
}
.form-style-9 ul li{
display: block;
margin-bottom: 1.25%;
/* min-height: 58px;*/
}
.form-style-9 ul li .field-style{
box-sizing: border-box;
padding: 8px;
outline: none;
border: 1px solid #B0CFE0;
}
.form-style-9 ul li .field-style:focus{
box-shadow: 0 0 5px #B0CFE0;
border:1px solid #B0CFE0;
}
.form-style-9 ul li .field-split{
width: 49%;
}
.form-style-9 ul li .field-split25{
/* float: left;
width: 24%;
margin-right: 1.25%;*/
height: 40px;
}
.form-style-9 ul li .field-split25-4{
/*float: left;
width: 24%;
margin-right: 0;*/
height: 40px;
}
.form-style-9 ul li .field-full{
width: 100%;
}
.form-style-9 ul li input.align-left{
/*float:left;*/
}
.form-style-9 ul li input.align-right{
float:right;
}
.form-style-9 ul li textarea{
width: 100%;
height: 100px;
}
.form-style-9 ul li input[type="button"],
.form-style-9 ul li input[type="submit"] {
box-shadow: inset 0px 1px 0px 0px #3985B1;
background-color: #216288;
border: 1px solid #17445E;
display: block;
cursor: pointer;
color: #FFFFFF;
padding: 8px 18px;
text-decoration: none;
font: 12px Arial, Helvetica, sans-serif;
}
.submit-div {
width: 100%;
height: 32px;
margin-top: 6%;
padding-top: 6%;
bottom:0;
left:0;
}
.submit-btn {
padding-top: 5%;
display: block;
bottom:0;
left:0;
width: 10%;
}
.form-style-9 ul li input[type="button"]:hover,
.form-style-9 ul li input[type="submit"]:hover {
background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
background-color: #28739E;
}
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.test {
float:left;
width: 25%;
margin-bottom: 1.25%;
}
.test-select-label {
float:left;
width: 25%;
margin-bottom: 1.25%;
}
.image-div {
float:right;
width: 200px;
height: 200px;
margin-bottom:1.25%;
}
.image-upload {
float:right;
width: 100%;
margin-right: 1.25%;
margin-bottom: 1.25%;
}
.image-preview {
float:right;
width: 150px;
height: 150px;
margin-right: 1.25%;
margin-bottom: 1.25%;
position:relative;
border: 1px solid #B0CFE0;
}
.test4 {
float:left;
width: 23%;
margin-right: 0;
margin-bottom: 1.25%;
}
.test-label {
width: 30%;
margin-right: 1.25%;
margin-bottom: 1.25%;
padding:0px;
font-weight: bold;
}
.test-label:first-child {
padding-left: 1.25%;
}
.test-label1 {
width: 23.2%;
margin-right: 1.25%;
margin-bottom: 1.25%;
padding:0px;
}
.removeRow{
height:auto;
width:auto;
max-width:12px;
max-height:12px;
}
.div-format-30 {
width: 90%;
margin-right: 1.25%;
margin-bottom: 0;
margin-top: 1.25%;
border: 1px solid #B0CFE0;
}
.div-format-30 td{
margin-top:20px;
float:left;
width: 90%;
margin-right: 1.25%;
margin-bottom: 0;
margin-top: 1.25%;
border: 1px solid #B0CFE0;
}
.split33 {
float:left;
width: 28%;
margin-right: 1.25%;
margin-bottom: 1.25%;
}
.split33-2 {
float:left;
width: 32.75%;
margin-right: 1.25%;
margin-bottom: 1.25%;
}
.split33right {
float:right;
width: 23%;
margin-right: 0;
margin-bottom: 1.25%;
}
.div-format {
font-size:12px;
float:left;
width: 24%;
margin-right: 0.9%;
margin-bottom: 1.25%;
border: 1px solid #90C3D4;
padding-top: 0.5%;
padding-bottom: 0.5%;
}
.div-format:nth-child(odd){
background-color: #F2FCFF;
}
.div-format:nth-child(even){
background-color: #FAFEFF;
}
.div-format:nth-child(4) {
width: 24%;
margin-right: 0px;
}
.test4 {
float:left;
width: 23%;
margin-right: 0;
margin-bottom: 1.25%;
}
.header {
float:left;
width: 100%;
margin-right: 1.25%;
margin-bottom: .25%;
}
label {
display: block;
text-align: center;
font-weight: bold;
}
input {
width: 100%;
}
#english {
width:100%;
}
.resume-title {
color: black;
width: 20%;
margin-top: 2%;
position:absolute;
}
.container {
margin-left: 2%;
margin-right: 2%;
}
.personal-details {
padding-bottom:1.25%;
}
.container {
margin-left: 2%;
margin-right: 2%;
}
ul{
list-style: none;
}
h2 {
margin: 0;
padding: 0;
left: 0;
right: 0;
text-align:center;
}
.application-form {
position: absolute;
}
.personal-details{
width:100%;
margin: auto;
display: flex;
justify-content: space-between;
}
#personal-details2{
width:60%;
margin-left: 20%;
margin-top: 3.5%;
display: flex;
justify-content: space-between;
position: absolute;
}
.personal-details > li{
padding: 20px;
width: 25%;
border-top: 1px solid #90C3D4;
border-right: 1px solid #90C3D4;
border-bottom: 1px solid #90C3D4;
border-left: 0px solid #90C3D4;
}
.personal-details > li:first-child{
padding: 20px;
width: 25%;
border-left: 1px solid #90C3D4;
}
.personal-details > li:nth-child(odd){
background-color: #F2FCFF;
}
.personal-details > li:nth-child(even){
background-color: #FAFEFF;
}
.column{
padding: 0;
}
.min-height {
min-height: 40px;
text-align:right;
font-weight: bold;
}
.label-min-height {
min-height: 40px;
font-weight: bold;
}
p {
font-weight: bold;
}
hr.style18:before {
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: #90C3D4;
border-width: 0 0 1px 0;
border-radius: 20px;
width: 100%;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<form class="form-style-9">
<ul class="personal-details">
<li>
<ul class="column">
<li>
<label for="NameOfVessel">Name of Vessel</label>
<input id="NameOfVessel" type="text" name="NameOfVessel" class="field-style field-split25 align-left" placeholder="Name of Vessel" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="TypeOfVessel">Type of Vessel</label>
<input id="TypeOfVessel" type="text" name="TypeOfVessel" class="field-style field-split25 align-left" placeholder="Type of Vessel" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="Flag">Flag</label>
<input id="Flag" type="text" name="Flag" class="field-style field-split25 align-left" placeholder="Flag" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="DWT">DWT</label>
<input id="DWT" type="text" name="DWT" class="field-style field-split25 align-left" placeholder="DWT" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="TypeOfMEkW">Type of ME/kW</label>
<input id="TypeOfMEkW" type="text" name="TypeOfMEkW" class="field-style field-split25 align-left" placeholder="Type of ME/kW" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="Rank">Position</label>
<select id='Rank' name="Rank" class="field-style field-split25 align-left">
<option selected disabled value="0">Select position</option>
<option value="1">Master</option>
<option value="91">Ch. Officer Junior</option>
<option value="2">Ch.Officer</option>
</select>
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="SignOn">Sign on</label>
<input id="SignOn" type="date" name="SignOn" class="field-style field-split25 align-left" placeholder="Sign on" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="SignOff">Sign off</label>
<input id="SignOff" type="date" name="SignOff" class="field-style field-split25 align-left" placeholder="Sign off" />
</li>
</ul>
</li>
<li>
<ul class="column">
<li>
<label for="CompanyName">Company Name</label>
<input id="CompanyName" type="text" name="CompanyName" class="field-style field-split25 align-left" placeholder="Company Name" />
</li>
</ul>
</li>
</ul>
<button type="button" class="add-row">+</button>
<div class="submit-div">
<ul>
<li>
<input type="submit" value="Submit" class="submit-btn" />
</li>
</ul>
</div>
</form>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
