How to make div appear on button click using Javascript - javascript

I'm trying to make a div appear on button click which I've not succeeded from the below code.Please let me know if I've done any thing wrong in the code.
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

change getElementByid to getElementById (i to I)
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

Its Simple
<script>
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
</script>

getElementById() is a function and its case sensitive . You need to write getElementByid() as getElementById().
Note:- i in getElementById() should be capital .

You have typed wrong document.getElementByid it should be capital I document.getElementById
function showDiv() {
document.getElementById('sign-in').style.display = "block";
}
<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>
<div id="sign-in" class="login" style="display: none;">
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group inline-form">
<input type="email" class="form-control" id="email" Placeholder="email">
</div>
</div>
<div class="col-md-3">
<div class="form-group inline-form">
<input type="password" class="form-control" id="pwd">
</div>
</div>
<div class="col-md-3">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-default ">Submit</button>
</div>
</div>
</form>
</div>

Can I strongly, strongly suggest that you use jQuery to do this - it makes this task trivial on all browsers. To do this with jQuery, perform the following steps.
Include the jQuery script library in your web page <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>.
Add an id property to your button <a class="btn btn-default log-bar" href="#" id="loginButton" role="button" onclick = "showDiv()" >Login</a>.
Add the following Javascript to your page:
<script>
$(function() {
$("#loginButton").click(function() {
$("#sign-in").show();
});
});
</script>

Related

Admin login panel page keep refreshing

i have a problem when i want to login into my admin login panel i use username and password and the page refresh and stays the same without going to Settings.php path that i want to go in . if i can even try to add another script can give me permission to access that Settings.php file witout having to go trought that login.php file that causes the problem
*first code : Login.php file
*Second code : Settings.php file
<br/><br/><br/>
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-lock"></i> login</h4>
</div>
<div class="panel-body">
<?php echo form_open('/auth/login');?>
<input type="text" placeholder="username" class="form-control " name="_name" />
<br/>
<input type="password" placeholder="password" class="form-control " name="_pass" />
<br/>
<input type="submit" name="login" class="btn btn-success" value="login" />
<?php echo form_close();?>
</div>
</div>
</div>
<div class="col-md-4"></div>
------------------------------------------------------------------------------
------------------------------------------------------------------------------
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa fa-gear"></i> General Settings </h4>
</div>
<!--<form method="post" action="{site_url}/dashboard/save_settings" >-->
<?php echo form_open('/dashboard/save_settings');?>
<div class="panel-body">
<div class="form-group">
<label for="site_name">Site Name</label>
<input name="site_name" class="form-control" id="site_name" value="{site_name}" type="text">
</div>
<div class="form-group">
<label for="site_mail">Email</label>
<input name="site_mail" class="form-control" id="site_mail" value="{site_mail}" type="text">
</div>
<div class="form-group">
<label for="site_desc">SEO description</label>
<textarea name="site_desc" class="form-control" id="site_desc" rows="3">{site_desc}</textarea>
</div>
<div class="form-group">
<label for="site_keys">SEO Keywords</label>
<textarea name="site_keys" class="form-control" id="site_keys" rows="3">{site_keys}</textarea>
</div>
<div class="form-group">
<label for="ad_code">Ad Code <small>(add ad code here like google adsense code or html code.)</small> </label>
<textarea name="ad_code" class="form-control" id="ad_code" rows="3">{ad}</textarea>
</div>
<!-- Social Media -->
<h5><b>Social Media</b></h5>
<div class="input-group">
<span class="input-group-addon" id="facebook"><i class="fa fa-facebook"></i></span>
<input name="facebook" type="text" value="{facebook}" class="form-control" aria-describedby="facebook">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="twitter"><i class="fa fa-twitter"></i></span>
<input name="twitter" type="text" value="{twitter}" class="form-control" aria-describedby="twitter">
</div>
<br/>
<div class="input-group">
<span class="input-group-addon" id="googleplus"><i class="fa fa-google-plus"></i></span>
<input name="googleplus" type="text" value="{googlep}" class="form-control" aria-describedby="googleplus">
</div>
<!-- END / Social Media -->
</div>
<div class="panel-footer">
<!--<input class="btn btn-success" type="submit" name="update" value="save" />-->
<button class="btn btn-success" type="submit" name="update"><i class="fa fa-save"></i> save</button>
</div>
<!--</form>-->
<?php echo form_close();?>
</div>
</div>
<div class="col-md-3"></div>

How to show/hide a model in form?

In my project page load model popup will appear if any of projects can be available for login user it can be show other wise not show in that model I have two anchor tags
My Projects
Add New Projects
My Projects Menu Click one form1 will be display?
Add New Projects Menu Click second form2 will be display?
Here my model code:
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
My jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#mp").hide();
});
});
$(document).ready(function() {
$("#addnewprojects").hide();
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#anp").hide();
});
});
</script>
my intention is which menu I will click that form will display in the model
Now need to add add $(document).ready twice and adding couple of hide and show for working snippet. Run snippet for working example.
$("#myprojects").hide();
$("#mp").click(function(e) {
$("#myprojects").show();
$("#addnewprojects").hide();
// $(this).hide();
$("#anp").show();
});
$("#anp").click(function(e) {
$("#addnewprojects").show();
$("#myprojects").hide();
//$(this).hide();
$("#mp").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
<h2 class="text-uppercase text-center m-b-30">
<a href="index.html" class="text-success">
<span>All Projects</span>
</a>
</h2>
<i class="mdi mdi-account md-18"></i> My Projects
<i class="mdi mdi-plus md-18"></i> Add New Project
<form class="form-horizontal" action="#" id="myprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free1</button>
</div>
</div>
</form>
<form class="form-horizontal" action="#" id="addnewprojects">
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="username">Name1</label>
<input class="form-control" type="email" id="username" required="" placeholder="Michael Zenaty">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="emailaddress">Email address1</label>
<input class="form-control" type="email" id="emailaddress" required="" placeholder="john#deo.com">
</div>
</div>
<div class="form-group m-b-25">
<div class="col-xs-12">
<label for="password">Password</label>
<input class="form-control" type="password" required="" id="password" placeholder="Enter your password">
</div>
</div>
<div class="form-group m-b-20">
<div class="col-xs-12">
<div class="checkbox checkbox-custom">
<input id="checkbox11" type="checkbox" checked>
<label for="checkbox11">
I accept Terms and Conditions1
</label>
</div>
</div>
</div>
<div class="form-group account-btn text-center m-t-10">
<div class="col-xs-12">
<button class="btn w-lg btn-rounded btn-lg btn-primary waves-effect waves-light" type="submit">Sign Up Free [Add New Project]</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

How to hide form in modal in javascript

I have a modal containing two forms, I want to switch between them when one of the radio buttons is checked, so i need to hide one of them in modal load, i did the following code, but it doesn't hide, can anyone help me in that?
The Form need to be hidden on modal load is called LocateOnMap to hide all its content.
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly >
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly >
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
<script>
initModalfrmmap();
</script>
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
<script type="text/javascript">
$('#LocateOnMap').hide();
</script>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
You can't have <form></form> under <form></form>, so removed that instead used div. By default assign hidden class to LocateOnMap. Then on change event of radio you can use jquery toggleClass() method to toggle visibility of LocateOnMap & EnterAddress.
$("#modal-Frm").modal("show");
$('input[name=optradio]').change(function() {
$("#EnterAddress,#LocateOnMap").toggleClass("hidden");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input value="address" type="radio" name="optradio" checked>Enter Address</label>
<label class="radio-inline"><input value="location" type="radio" name="optradio">Locate on Map</label>
</div>
</div>
<div>
<div class="hidden" id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly>
</div><br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly>
</div>
</div>
</div><br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</div>
</div>
<div id="EnterAddress">
<label style="color:red;">Hiii</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
</div>
</div>
</div>
On show.bs.modal you can hide the form and set the radio button:
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
I'd suggest to add a data attribute to each name="optradio" like:
data-form-id="#EnterAddress"
and for the second one:
data-form-id="#LocateOnMap"
In this way, on radio change you can switch between the two forms:
$('[name="optradio"]').on('change', function(e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
$('#modal-Frm').on('show.bs.modal', function (e) {
$('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
$('[name="optradio"]').on('change', function (e) {
$('#modal-Frm').find('form[id]').hide();
$(this.dataset.formId).show();
})
function CancelModal() {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-Frm">
Launch modal
</button>
<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add New Farmer</h3>
</div>
<div class="modal-body">
<form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel">Address:</label>
</div>
<div class="col-sm-8">
<label class="radio-inline"><input type="radio" name="optradio"
data-form-id="#EnterAddress">Enter Address</label>
<label class="radio-inline"><input type="radio" name="optradio" data-form-id="#LocateOnMap">Locate
on Map</label>
</div>
</div>
</form>
<form id="LocateOnMap">
<div class="row">
<div class="col-sm-4">
<label class="Modallabel"></label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
<div class="col-sm-4">
<label class="Modallabel">Latitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Latitude" type="text" class="form-control ModalInput" name="Latitude"
placeholder="Latitude" style="border-radius: 5px;" readonly>
</div>
<br>
</div>
<div class="col-sm-4">
<label class="Modallabel">Longitude:</label>
</div>
<div class="col-sm-8">
<div class="input-group input-group-sm" style="margin-top: -5px;">
<input id="Longitude" type="text" class="form-control ModalInput"
name="Longitude" placeholder="Longitude" style="border-radius: 5px;"
readonly>
</div>
</div>
</div>
<br>
</div>
</div>
<div class="row" style="padding: 10px;">
<div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
</div>
</div>
</form>
<form id="EnterAddress">
<label style="color:red;">Hiii</label>
</form>
</div>
<div class="modal-footer">
<button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add
</button>
<button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()"
style="font-weight: bold;">Cancel
</button>
</div>
</div>
</div>
</div>
<form id="LocateOnMap" hidden>
this will make the form hidden on load
document.getElementById("LocateOnMap").style.display="block";
this is to display it

Using the javascript function without repeating it

The following <div> section I am duplicating and below the JavaScript function, I want to use again and again. Share your ideas if this is possible.
<?php $new_material = ["a","b","c"]; //array to pass in foreach
foreach ($new_material as $mat) {
?>
<div class="row " id="row2">
<div class="row " id="row2.1">
<div class="col-xs-2">
<label>Material Name</label>
</div>
<div class="col-xs-3">
<label>Brand</label>
</div>
<div class="col-xs-2">
<label>Category</label>
</div>
</div>
<div class="row " id="row2.2">
<div class="col-xs-2">
<p id="material_select"><?=$mat?></p>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="brand" id="brand"/>
</div>
<div class="col-xs-2">
<input type="text" class="form-control" name="category" id="category"/>
</div>
<label class="col-xs-2">Total Quantity:</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="totalquantity" id="totalquantity"/>
<br>
</div>
</div>
<div class="row " id="row2.3">
<label class="col-xs-1">Specification</label>
<label class="col-xs-1">Quantity</label>
<label class="col-xs-2">Unit</label>
<button type="button" onclick="duplicate()" class="btn btn-info col-xs-3" >Add Specification</button>
<label class="col-xs-2">Unit:</label>
<span id="units_div">
<p class="" name="units"/>
</span>
</div>
<div class="row " id="duplicater" >
<div class="col-xs-1">
<input type="text" id="specification" class="form-control" name="specification[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="quantity" class="form-control" name="quantity[]"/>
</div>
<div class="col-xs-2" id="units1_div">
<p id="unit" name="unit[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn"type="button" onClick="removeduplicate(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<br>
<div>
<div class="row " id="row2.4">
<label class="col-xs-1">Tax</label>
<label class="col-xs-1">Tax%</label>
<label class="col-xs-2">Tax Amount</label>
<button type="button" onClick="duplicate1()" class="btn btn-info col-xs-3" >Add Tax</button>
<label class="col-xs-2">Rate</label>
<div class="col-xs-2">
<input type="text" class="form-control" name="rate" id="rate"/><br>
</div>
</div>
<div class="row " id="duplicater1" >
<div>
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/> </div>
<div class="col-xs-1" id="tax_div">
<p id="unit" name="taxper[]"/>
</div>
<div class="col-xs-1">
<input type="text" id="taxamt" class="form-control" name="taxamount[]"/>
</div>
<div class="col-xs-2" id="delete">
<button id="delete_btn1" type="button" onClick="removeduplicate1(this)" class="btn btn-xs btn-danger" style="visibility:hidden;">Delete</button>
</div>
</div>
</div>
<div class="row" id="row 2.5">
<div class="col-xs-7">
</div>
<label class="col-xs-2">Total Amount</label>
<div class="col-xs-2">
<p id="totalamount" name="totalamount"></p>
<input type="hidden" value="" name="totalamount" id="totalamount" readonly/><br>
</div>
</div>
<?php
}
?>
JavaScript code: This is the JavaScript function, I want use whenever I'm duplicating the above code as I'm passing the material name in foreach() loop, so it is duplicating based on every material name.
function duplicate() {
document.getElementById('delete_btn').style.visibility = "visible";
var original = document.getElementById('duplicater');
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicetor" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
document.getElementById('delete_btn').style.visibility = "hidden";
document.getElementById('specification').value="";
document.getElementById('quantity').value="";
document.getElementById('unit').value="";
}
function removeduplicate(element){
element=element.parentNode.parentNode;//gets the id of the parent
element.parentNode.removeChild(element);
}
Natural place of javascript files/code loading is in the head so just place it there. Since you do not want your head to be duplicated anyways (invalid html).

Angular UI Bootstrap Input-Group-Button - darn floating button

I have a form that i have just added a bootstrap datepicker to and using an input-group-button.
The problem I have is that the button floats off to the right at the extent of the containing div.
The button in question is the button to the right of TargetDate.
I have been following instructs at TutorialsPoint
JSFiddle here JSFiddle
<section class="mainbar">
<section class="matter">
<div class="container">
<div class="row">
<div class="widget wviolet">
<div ht-widget-header title="{{vm.title}}"></div>
<div class="widget-content user">
<form name="submitjobform" novalidate class="form-horizontal" id="submitjobform" ng-submit="vm.processForm()">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input ng-model="formData.name" type="text" class="form-control" name="name" ng-required="true"> <span class="error" ng-show="submitjobform.name.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-2 control-label">Description</label>
<div class="col-sm-10">
<textarea ng-model="formData.description" class="form-control" name="description" ng-required="true"></textarea> <span class="error" ng-show="submitjobform.description.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">Category</label>
<div class="col-sm-10">
<select ng-model="formData.category" class="form-control" name="category" ng-required="true" ng-options="name.name for name in vm.categories"></select> <span class="error" ng-show="submitjobform.category.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="assignee" class="col-sm-2 control-label">Assignee</label>
<div class="col-sm-10">
<select ng-model="formData.assignee" class="form-control" name="assignee" ng-required="true" ng-options="name.name for name in vm.names"></select> <span class="error" ng-show="submitjobform.assignee.$error.required">
Required!</span>
</div>
</div>
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="col-sm-10">
<div class="input-group">
<input name="targetDate" type="text" class="form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /col-sm-10 -->
</div>
<!-- form group -->
<div class="form-group">
<div class="col-sm-2">
<input type="submit" ng-disabled="submitjobform.$invalid" value="Submit" id="submitjobform_submit" class="btn btn-danger">
</div>
</div>
</form>
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
</section>
Any assistance gratefully appreciated
Simon
There's a couple things that can help you here:
Columns are meant to be wrapped by rows. The default bootstrap grid is a grid of 12 columns.
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
So with that in mind, you can see how you can control the placement PER row of your elements.
As it stands your last div is set to a col-sm-10. This column is holding your input for your target date as well as the button that's misbehaving.
Below is a modification of your troubled area with a fiddle. You had a span tag open too long as well as missing a "form-control" class.
http://jsfiddle.net/Levy0k2f/
<div class="form-group">
<label for="targetDate" class="col-sm-2 control-label">Target Date</label>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input name="targetDate" type="text" class="form-control form-control-date" datepicker-popup="{{vm.format}}" ng-model="formData.targetDate" is-open="vm.opened" min-date="vm.minDate" max-date="'2015-06-22'" datepicker-options="vm.dateOptions" date-disabled="vm.disabled(date, mode)" ng-required="true" close-text="Close"> <span class="input-group-btn"></span>
</div>
</div>
<div class="col-sm-3">
<button type="button" class="btn btn-default" ng-click="vm.open($event)"> <i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
Update for fixing of button, the button was outside the span class.
http://jsfiddle.net/k0f598hr/
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="vm.open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>

Categories