Dynamic form with multi select option box option - javascript

I have this dynamic form that lets me add more form inputs if user selects the + button or remove it if they select the - button. In this form I have a drop down selector I wanted to take this selector and make it so the user can select multiple options in the select box. I have included the select2 API however I am not able to select multiple options. Is there anything I can do to make this work?
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Dynamic Form Fields - Add & Remove Multiple fields - Bootsnipp.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- select2 boxes-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
</head>
<div class="panel panel-default">
<div class="panel-heading">Dynamic Form Fields - Add & Remove Multiple fields</div>
<div class="panel-heading">Education Experience</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Major" name="Major[]" value="" placeholder="Major">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Degree" name="Degree[]" value="" placeholder="Degree">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select multiple="multiple" class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Next</button>
<div class="clear"></div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another form field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove form field :)</small></div>
</div>
<script type="text/javascript">
// select2 place holder text
$('#educationDate').select2({
placeholder: 'Pick An Option'
});
</script>


Select2 adopts to standard HTML attributes.
https://select2.org/configuration/options-api
You need to add multiple to your select
<select multiple

Related

How to change a custom bootstrap input onchange

I have this form below:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="post">
<div class="form-group">
<label for="model">Offer Model / Type</label>
<select name="model" id="model" class="form-control" required>
<option value="1">Set Rate</option>
<option value="2">Percentage</option>
</select>
</div>
<div class="form-group">
<label for="price">Price:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</span>
</div>
<input type="text" id="price" name="price" class="form-control" required>
</div>
</div>
<button type="submit">Update Product Price</button>
</form>
I am trying to make it so where when someone selects the percentage in the select input, it changes the price input below it, from the $ prepending the input to a % sign at the end of the input and of course reverse back if they change back to set rate.
I am not completely familiar with Java Script. Can anyone please help me figure out the correct way to achieve this?

You can do it using onchange event on the model select, then based on the selected option we show either the percentage or dollar.
If you are planning to use jquery this could be helpfull instead of the js code bellow:
$( "#model" ).change(function() {
$('#percent').toggleClass('d-none');
$('#dollar').toggleClass('d-none');
});
document.getElementById("model").addEventListener("change", myFunction);
function myFunction() {
var model = document.getElementById("model").value;
var dollar = document.getElementById("dollar");
var percent = document.getElementById("percent");
if (model == 1) {
percent.classList.add('d-none');
dollar.classList.remove('d-none');
} else {
dollar.classList.add('d-none');
percent.classList.remove('d-none');
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<form method="post">
<div class="form-group">
<label for="model">Offer Model / Type</label>
<select name="model" id="model" class="form-control" required>
<option value="1">Set Rate</option>
<option value="2">Percentage</option>
</select>
</div>
<div class="form-group">
<label for="price">Price:</label>
<div class="input-group">
<div class="input-group-prepend" id="dollar">
<span class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</span>
</div>
<input type="text" id="price" name="price" class="form-control" required>
<div class="input-group-prepend d-none" id="percent">
<span class="input-group-text">
<i class="fas fa-percent"></i>
</span>
</div>
</div>
</div>
<button type="submit">Update Product Price</button>
</form>

Dynamically adding input fields JavaScript

I would like to enter two input fields and one button dynamically adding them from the button click function.
They should look like this:
https://i.stack.imgur.com/iRnDu.png
On click of the button add, I would like to disable the button, add a new row of items (2 input boxes and the clickable button again). I would also like to store the 2 values from the text-boxes in an array.
add() {
let row = document.createElement('div');
row.className = 'row';
row.innerHTML += `
<br>
<input type="text" id="text1"> <input type="text" id="text2"> <button id="button">ADD</button> `;
document.querySelector('.showInputField').appendChild(row);
document.getElementById("button").addEventListener('click',this.input,false);}input(){
let inputValue = (document.getElementById("text1") as HTMLInputElement).value;
console.log(inputValue);
this.user.push(inputValue);
this.users.push(this.user);
this.user = [];
}
And this is the HTML:
<div>
CLICK ON BUTTON TO ADD NEW FIELD
<div class="showInputField">
<button (click)="add()">ADD</button>
</div>
<!-- The add() function is called -->
</div>

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="panel panel-default">
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value=""
placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span
class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script>
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass' + rid).remove();
}
</script>

How to get dynamically appended options without using on change or onclick event?

I am adding options dynamically in country select box.Options appears in select box and become selected on click but i want to get them in js as they are appended. If I console select box html in after they are appended. I only got option that is added in html not all other options that are append by js. I am not sure whats going wrong. Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
/>
<title>login</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css" />
<link rel="stylesheet" href="assets/css/style1.css" />
</head>
<body>
<div class="dashboard" style="text-align: center;">
<div class="wrapper">
<section id="nav-tabs">
<div class="container">
<div class="row justify-content-between">
<div class="col-8 p-0">
<nav>
<div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
<a class="nav-item nav-link active p-11" id="nav-profil1-tab" data-toggle="tab" href="#nav-profil1" role="tab" aria-controls="nav-home" aria-selected="true"><span class="word-profile hide">Profile</span> 1</a>
</div>
</nav>
</div>
<div class="col-2 align-self-center">
<i class="fa fa-plus plus" aria-hidden="true"></i>
</div>
<div class="col-xs-2">
<i class="fa fa-cog text-white setting" aria-hidden="true"></i>
</div>
</div>
</div>
</section>
<section id="tabs">
<div class="container">
<div class="row" style="background-color: #013e77;">
<div class="col-xs-12 ">
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-profil1" role="tabpanel" aria-labelledby="nav-profil1-tab">
<form class="text-center profile" style="color: #757575;" action="#!">
<div class="form-row">
<div class="form-group col-12">
<select class="form-control prefer" id="exampleFormControlSelect1" name="preferred">
<option>Preferred Profile</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
<div class="form-group col-6">
<input type="text" class="form-control fname" id="inputfname" placeholder="First Name" name="first_name" required>
<p class="fname-error text-danger hide"></p>
</div>
<div class="form-group col-6">
<input type="text" class="form-control lname" id="inputlname" placeholder="Last Name" name="last_name" required>
<p class="lname-error text-danger hide"></p>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control address" id="inputAddress" placeholder="Address" name="address" required>
<p class="address-error text-danger hide"></p>
</div>
<div class="form-group">
<input type="text" class="form-control apartment" id="inputAddress2" placeholder="Apartment, suite, etc. (optional)" name="apartment">
</div>
<div class="form-row">
<div class="form-group col-12">
<input type="text" class="form-control city" id="inputCity" placeholder="City" name="city" required>
<p class="city-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<select id="inputCountry" class="form-control country" name="country">
<option>--Select Country--</option>
</select>
</div>
<div class="form-group col-4">
<select id="inputState" class="form-control states" name="state">
<option>--Select State --</option>
</select>
</div>
<div class="form-group col-4">
<input type="text" class="form-control zip" id="inputZip" placeholder="Zip code" name="zip" required>
<p class="zip-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control phone" id="inputAddress" placeholder="Phone" name="phone" required>
<p class="phone-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_num" id="inputAddress" placeholder="Card Number" name="card_num" required>
<p class="card_num-error text-danger hide"></p>
</div>
<div class="form-group col-12">
<input type="text" class="form-control card_name" id="inputAddress" placeholder="Name on Card" name="card_name" required>
<p class="card_name-error text-danger hide"></p>
</div>
<div class="form-group col-5">
<input type="date" class="form-control expiry" id="inputAddress" placeholder="Expiration Date" name="expiry" required>
<p class="expiry-error text-danger hide"></p>
</div>
<div class="form-group col-4">
<input type="text" class="form-control cvv" id="inputAddress" placeholder="CVV" name="cvv" required>
<p class="cvv-error text-danger hide"></p>
</div>
<div class="form-group col-3">
<button type="submit" class="btn btn-primary save">Save</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-danger delete" data-id="">Delete</button>
</div>
<div class="form-group col-4">
<button type="submit" class="btn btn-primary update" data-id="">Update</button>
</div>
<div class="form-group col-4">
<button type="button" class="activate"><i class="fa fa-bolt" aria-hidden="true"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./Tabs -->
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="popup.js"></script>
</body>
</html>
Here is js:
/*----- Dashboard -----*/
appendCountries();
console.log($(".country").html());
/*------get countries from json-----*/
function appendCountries(){
$.getJSON('countries.json',function(result){
console.log(result.countries);
$.each(result.countries,function(index,country){
var option='<option value="'+country.id+"-"+country.name+'">'+country.name+'</option>';
$(".country").append(option);
});
});
}
Thanks in Advance!
I am stuck here please guide me what is the way to get options without adding any event on select box

This happens, because here is some asynchronously actions. If you call $('.country').html() after inserting options - it will show you generated html code. It is possible by two ways minimum:
Call $('.country').html() in the callback of $.getJSON after $.each(...).
As in my snippet - in processing of Promise of appendCountries, but firstly we should return it by adding return before $.getJSON.
appendCountries().then(() => {
console.log($(".country").html());
});
/*------get countries from json-----*/
function appendCountries(){
return $.getJSON('https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-name.json',
function(result){
// console.log(result);
$.each(result, function(index, country){
var option='<option value="'+index+"-"+country.country+'">'+country.country+'</option>';
$(".country").append(option);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="countries" id="countriesSelect" class="country">
<option> -- select country -- </option>
</select>

Multiple two inputs and the inputs generated dynamically by jQuery

I have this form and this is my layout:
I want when the user enters the quantity the total input = qty*price.
My view
<?php $form=array('id'=>'myform');?>
<?php echo form_open('Order/submit',$form);?>
<div class="panel panel-default">
<div class="panel-heading">Customer Details</div>
<div class="panel-body">
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
<?php foreach ($customerdata as $c):
echo "<option value ='$c->c_id'>" . $c->c_name . "</option>";
endforeach;
?>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_number" placeholder="Invoice Number"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="branch" placeholder="Branch"/>
</div>
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term"">
<option value="cash">Cash</option>
<option value="bank">Bank</option>
<option value="other">Other</option>
</select>
</div>
</div><!--customer panel-Body-->
<div class="panel-heading">Invoice Details
</div>
<div class="panel-body">
<div id="education_fields">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option></option>
<?php
foreach($order as $row):
echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control total" name="total[]" value="" placeholder="Total">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div>
</div>
<button type="submit" class="btn btn-primary center-block">Checkout</button>
<?php echo form_close();?>
This is my first jQuery and that used to generate a new row by + button
<script>
var room = 0;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>" value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
divtest.innerHTML = medo;
objTo.appendChild(divtest);
$('select').selectpicker();
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input.
<script>
function set_price( slc ) {
var price = slc.find(':selected').attr('data-price');
slc.parent().parent().next().next().find('.price').val(price);
}
$('#education_fields').on('change','select.selectpicker',function(){
set_price( $(this) );
});
</script>

var sample = $('#sample').html();
$('#sample').on('click', '.generate', function() {
$('#sample').append(sample);
});
$('#sample').on('change', 'select.selectpicker', function () {
// keyword this is your current select element
var select = $(this);
// each group of inputs share a common .form element, so use that to
// look up for closest parent .form, then down for input[name="price[]"]
// and set the input's value
select.closest('.form').find('[name^=price]').val(
select.find('option:selected').data('price')
// trigger input's keyup event (*)
).keyup();
});
// (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead
// create onkeyup event on the qty and price fields
$('#sample').on('keyup', '[name^=qty], [name^=price]', function() {
// get related form
var form = $(this).closest('.form');
// get its related values
var qty = parseInt(form.find('[name^=qty]').val(), 10),
price = parseInt(form.find('[name^=price]').val(), 10);
// ensure only numbers are given
if (!isNaN(qty) && !isNaN(price)) {
// set the total
form.find('[name^=total]').val(qty * price);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<!-- group all related blocks into a div .form -->
<!-- it makes it easier to reference in your JS -->
<div class="form">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option data-price=200 value=1>tes1</option>
<option data-price=218 value=2>tes2</option>
<option data-price=80 value=3>tes3</option>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly>
</div>
</div>
</div>
<button class="generate" type="button">Generate New Form</button>
</div>
Note, that I am lazy instead of doing [name="price[]"], I simply did [name^=price].
Edit changed onchange to keyup.

Why these dynamically inserted HTML elements aren't display with proper alignment

I add few input fields & labels in bootstrap.
Then i add jQuery/javascript code to add & remove dynamically features.The script works fine.
But these dynamically inserted HTML elements are not displaying with proper alignment.
Please check image given below
I think,i put some elements in wrong position.
please suggest me about bringing proper alignment back.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
please let me know if any further information is required.
Thanks :)

So here's the complete html with some style to fix the alignment:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
div.child_div:first-child {
margin-top: 0px;
padding-top: 0px;
}
div.child_div {
width: 615px;
}
div.job-position {
width: 220px;
}
div.job-type {
width: 180px;
}
div.job-amount {
width: 180px;
}
div.form-group {
padding-top: 25px;
}
input#create_button {
margin-top: 50px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="form-group" id="parent_div">
<div class="row form-group child_div">
<div class="col-xs-12 col-lg-3 job-position">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-date">
<label for="form-input-col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-xs-12 col-lg-3 job-amount">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="form-group ">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</form>
</div>
<script type="text/javascript">
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>
</body>
</html>
You still have two problems though:
The page allows you to delete the last item. The code should handle this situation. The problem is, if the last item is deleted, you can't create a new one from the first item.
Load the page, click add, remove the first item, then click add again, you get multiple green buttons. You should fix that.

Remove this line:
<label for="day" class="col-xs-2 control-label"></label>
It doesn't seem to have any purpose, yet it causes the mis-alignment.
Another issue you have is the red button is aligned to the top with the other divs. Add padding-top to that div should push it down to line up with the other fields and buttons.

You wrote:
$('#create_button').click(function() {
var html = $('.child_div:first').parent().html();
$(html).insertBefore(this);
});
That takes the contents of child-div's parent (i.e. the content of #parent-div) and appends it before this. In the case of the click handler - which is assigned to #create_button - this is the button itself. If you use insertBefore(this) in that context you are inserting your content between the label and the button.
<label for="day" class="col-xs-2 control-label"></label>
<!-- You just inserted a code block here! -->
<input class="btn btn-success " type="button" id="create_button" value="+" />
I'm pretty sure that's not what you intended to do.
P.S. be careful about copying code this way. The elements you're copying have IDs attached, but IDs should be unique across any given document.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Add/Remove</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<form class="form-inline" role="form">
<div class="col-lg-2">
<label for="day" class="col-xs-2 control-label"></label>
<input class="btn btn-success " type="button" id="create_button" value="+" />
</div>
<div class="col-lg-10">
<div class="form-group" id="parent_div ">
<div class="row child_div col-lg-12">
<div class="col-lg-4">
<label for="form-input-col-xs-2" class="wb-inv">Other Job Position:</label>
<div class="input-group" style="">
<select class="form-control " id="employeetype" onchange="updateText('')">
<option value="" disabled="" selected="">Select Job Type</option>
<option value="10">1</option>
<option value="10">2</option>
<option value="10">3</option>
</select>
</div>
</div>
<div class="col-lg-4">
<label for="form-input col-xs-3" class="wb-inv">Date:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder="DD/MM/YYYY" />
<span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
</div>
<div class="col-lg-3">
<label for="form-input-col-xs-3" class="wb-inv">Amount:</label>
<div class="input-group">
<input type="text" class="form-control" id="form-input-col-xs-3" placeholder=".00" />
<span class="input-group-addon"><i class="glyphicon glyphicon-usd"></i></span>
</div>
</div>
<div class="col-lg-1">
<div class="input-group">
<input class="btn btn-danger deleteButton" type="button" value="-" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
var html = $('.form-group').html();
$('#create_button').on("click", function() {
$('.form-group').append(html);
});
$(document).on("click", ".deleteButton", function() {
$(this).closest('.child_div').remove();
});
</script>

Categories

Resources