I have the following HTML:
<html>
<head>
<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>
<script src="http://gregpike.net/demos/bootstrap-file-input/bootstrap.file-input.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post" > <input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' /> <div id="div_id_clustering_method_param" class="form-group"> <label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select> </div> </div> <div id="div_id_distance_method_param" class="form-group"> <label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label> <div class="controls col-lg-8"> <select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select> </div> </div> <div class="form-group"> <div class="aab controls col-lg-2"></div> <div class="controls col-lg-8"> <input type="submit"
name="submit"
value="Submit"
class="btn btn-primary"
id="submit-id-submit"
/> </div> </div> </form>
<!--- END FORM DISPLAY-->
</body>
<html>
What I want to do is to set the condition. Namely the clustering method ward can only be applied with distance measure euclidean. If the user pass all other distance measure to ward it should return error message.
How can I do it using JavaScript?
To disable some of the menu options based on which option is selected, you can hook into the "on change" event for the first select element. Every time the first select element is changed, a bit of JavaScript then determines which options should be available in the second menu.
The following code uses an if-else block to show the general idea of how you can enable/disable the option elements in the second box. To make this solution more elegant, I would use a JavaScript object to keep track of which options in the second menu should be available when a certain option is selected in the first select element. Then whenever the first element is changed you can do a lookup and set the options in the second menu to be enabled or disabled as needed.
Live Demo:
var method = $("#id_clustering_method_param");
var dist = $("#id_distance_method_param");
function refreshOptions() {
// The following can be refactored to use a
// lookup instead if more option rules are needed.
if (method.find(':selected').text() === "Ward") {
dist.find("option[value='manhattan']").attr("disabled", true);
dist.find("option[value='pearsond']").prop("disabled", true);
} else {
dist.find("option").prop("disabled", false)
};
}
refreshOptions();
method.on("change", refreshOptions);
<html>
<head>
<link rel="stylesheet" href="https://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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<form id="id-method1Form" class="form-horizontal" method="post">
<input type='hidden' name='csrfmiddlewaretoken' value='vr5MftcSxGGUeIOwKioeUlalXJdXNgkl' />
<div id="div_id_clustering_method_param" class="form-group">
<label for="id_clustering_method_param" class="control-label col-lg-2">
Clustering method
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_clustering_method_param" name="clustering_method_param">
<option value="complete">Complete linkage</option>
<option value="average">Average linkage</option>
<option value="ward" selected="selected">Ward</option>
</select>
</div>
</div>
<div id="div_id_distance_method_param" class="form-group">
<label for="id_distance_method_param" class="control-label col-lg-2">
Distance measure
</label>
<div class="controls col-lg-8">
<select class="select form-control" id="id_distance_method_param" name="distance_method_param">
<option value="euclidean" selected="selected">Euclidean</option>
<option value="manhattan">Manhattan</option>
<option value="pearsond">Pearson Correlation</option>
</select>
</div>
</div>
<div class="form-group">
<div class="aab controls col-lg-2"></div>
<div class="controls col-lg-8">
<input type="submit" name="submit" value="Submit" class="btn btn-primary" id="submit-id-submit" />
</div>
</div>
</form>
<!--- END FORM DISPLAY-->
</body>
<html>
Related
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>
While editing a podcast, I am getting an option being selected through the PHP code and now I want to write a j-query if the option is selected from the select field.
I am gone through many question and answer give in the Stack Overflow but all of them seems to output the effect in click even or in change event.
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1" >Audio</option>
<option id="video1" name="video1" value="video1" >Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
I have already written j-query if the user is trying to add a post but when editing post my j-query code does not work like expected.
Following is the code I have written while adding a podcast.
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
} else {
$('#input-upload').hide();
$('#input-file').hide();
}
});
$('#podcast_type').change(function(){
if($('#podcast_type').val() == 'video1') {
$('#input-upload-file').show();
} else {
$('#input-upload-file').hide();
}
});
You can combine the 2 events in one.
$('#podcast_type').change(function() {
var val = $('#podcast_type').val(); //Get value of the select
if (val == 'audio1') { //If audio, hide 1 input. Show 2
$('#input-upload').show();
$('#input-file').show();
$('#input-upload-file').hide();
} else if (val == 'video1') { //If video, hide 2 input. Show 1
$('#input-upload').hide();
$('#input-file').hide();
$('#input-upload-file').show();
} else {
$('#input-upload').hide(); //Hide all intially
$('#input-file').hide();
$('#input-upload-file').hide();
}
}).change(); //Trigger change on load.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option selected disabled hidden>-- Select Any One --</option>
<option id="audio1" name="audio1" value="audio1">Audio</option>
<option id="video1" name="video1" value="video1">Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
Before listening to change event, you need to Initialize inputs state on page load
<?php
$podcast_type = 'audio1';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="form-group pt-2 input-upload">
<label for="EditedBy">Podcast Type : </label>
<select class="form-control" name="podcast_type" id="podcast_type">
<option disabled>-- Select Any One --</option>
<option id="audio1" value="audio1" <?= ($podcast_type == 'audio1') ? 'selected' : '' ?>>Audio</option>
<option id="video1" value="video1" <?= ($podcast_type == 'video1') ? 'selected' : '' ?>>Video</option>
</select>
</div>
<div class="form-group" id="input-upload">
<label for="avatar">Upload Audio:</label><br>
<input type="file" class="upload" id="fileUp" name="audio">
</div>
<div class="form-group" style="width:30%" id="input-file">
<label for="Filename">Audio Duration: </label>
<input id="infos" class="form-control" name="duration">
</div>
<div class="form-group" id="input-upload-file">
<label for="avatar">Video url:</label><br>
<input type="url" name="link" id="link" class="form-control" placeholder="link" value="">
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
var podcast = $('#podcast_type');
var podcast_type = podcast.val();
// Initialize input state on page load
setPodcastType(podcast_type);
podcast.change(function() {
setPodcastType($(this).val());
});
function setPodcastType(podcast_type)
{
if (podcast_type == 'audio1') {
$('#input-upload').show();
$('#input-file').show();
// Hide video input
$('#input-upload-file').hide();
return true;
}
$('#input-upload-file').show();
// Hide audio input
$('#input-upload').hide();
$('#input-file').hide();
}
});
</script>
</body>
</html>
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
Problem: The search box does not change size when resizing the page. I also need to make it wider, but I really can't seem how to do it, I have tried adding styles to the box such as width: 100%; Nothing seems to work
Also, you can see in the image linked below, that the select drop down box is slightly clipped off on the right hand side. I don't know what is causing this, so I don't know how to go about fixing it.
I also need to make the form fill the width of the row. Any help would be highly appreciated. Thank you!
Image of Form
How i want it too look
Code:
<header>
<div class="container">
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="row">
<h2>Enter a username and choose a category to search in</h2>
<div class="input-group">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
</div>
<div class="input-group">
<div class="form-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<button type="submit" class="btn btn-default">Search</button>
</div><!-- /form-group -->
</div><!-- /input-group -->
</div> <!-- /row-group -->
</form><!-- /form-group -->
</div><!-- /container-group -->
</header>
Don't mix with other components
Do not mix form groups or grid column classes directly with input groups. Instead, nest the input
group inside of the form group or grid-related element.
See input-groups docs. Input-groups should be nested within form-groups and you haven't fully applied the correct markup for your button. It should be within <span class="input-group-btn">.
Note: from the docs,
Avoid using <select> elements here as they cannot be fully styled in WebKit browsers.
Working Example: Open using FullPage
header {
background-color: #42f4c2;
padding: 100px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container text-center">
<h2>Enter a username and choose a category to search in</h2>
<form action="search.php" method="get" data-toggle="validator" role="form" class="form-inline">
<div class="form-group">
<input name="search" type="text" class="form-control" aria-label="..." placeholder="Search a username here" required>
</div>
<div class="form-group">
<div class="input-group">
<select class="selectpicker form-control" required>
<option value="">Catagory</option>
<option value="volvo">Minecraft username</option>
<option value="saab">Minecraft UUID</option>
<option value="mercedes">Mc-Market username</option>
<option value="audi">Skype username</option>
</select>
<span class="input-group-btn">
<button type="submit" class="btn btn-default btn-search">Search</button>
</span>
</div>
</div>
</form>
</div>
</header>
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>