I place this form using modal.In order to do so I use this helper library like this:
BootstrapDialog.show({
message:formHtml
,cssClass:'.form-dialog'
});
I use this css:
#ma-form-container{
width:600px;
height:100%;
}
#ma-form label
{
display:inline-block;
text-align:right;
}
I find that the form is much larger than the modal,I also tried using the css:
#ma-form-container{
width:100%;
height:100%;
}
y
I find that $("#ma-form") and $("#ma-form-container") are empty when the modal is open.
EDIT:
I have changed the template and removed the plugin:
<div id="openModal" style="display: block;"><div class="modal fade form-dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<form class="form form-horizontal" role="form" id="ma-form">
<div class="form-group">
<span style="color:">
<label for="AUTHGRP" class="col-xs-3 control-label">AuthorizGroup</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="AUTHGRP" id="AUTHGRP" placeholder="AuthorizGroup">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="DESCRIPT" class="col-xs-3 control-label">Description</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="DESCRIPT" id="DESCRIPT" placeholder="Description">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="OBJECTTYPE" class="col-xs-3 control-label">Object type</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="OBJECTTYPE" id="OBJECTTYPE" placeholder="Object type">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="PLANGROUP" class="col-xs-3 control-label">Planner group</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="PLANGROUP" id="PLANGROUP" placeholder="Planner group">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="PLANPLANT" class="col-xs-3 control-label">Planning plant</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="PLANPLANT" id="PLANPLANT" placeholder="Planning plant">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="EQUICATGRY" class="col-xs-3 control-label">EquipCategory</label>
</span>
<div class="col-xs-6">
<input type="text" class="form-control" name="EQUICATGRY" id="EQUICATGRY" placeholder="EquipCategory">
</div>
</div>
<div class="form-group">
<span style="color:">
<label for="" class="col-xs-3 control-label"></label>
</span>
<div class="col-xs-6">
<input type="" class="form-control" name="" id="" placeholder="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="formSubmit">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal --></div>
With this I am using this to open the dialog:
$("#map-actions a").on("click",function(e){
event.preventDefault();
$("#openModal").html(formHtml);
$("#openModal").css("display","block");
});
in your form you are using a wrong syntax for set an id attribute
change
id="#ma-form"
to
id="ma-form"
and it will work, dont forget to fix this recursively to all occurences of your fault
alert($('#ma-form').html())
will output the content instead of "undefined"
cheers
Related
<!-- Custom Modals -->
<div class="row">
<div class="col-md-12">
<div id="con-close-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="con-close-modalLabel">Tambah Jadwal Shift</h4>
</div>
<div class="modal-body">
<form action="tjadwal.php" method="post" id="insert_form">
<div class="row">
<div class="col-md-6">
<input type="hidden" name="nomor_shift" value="<?php echo $d['nomor_shift']; ?>">
<div class="form-group">
<label for="nama" class="control-label">Nama</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="Nama" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="jabatan" class="control-label">Jabatan</label>
<select class="form-control" id="jabatan" name="jabatan">
<option>SNOC</option>
<option>Control Center</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="tanggal" class="control-label">Tanggal</label>
<input type="date" class="form-control" id="tanggal" name="tanggal" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="shift_mulai" class="control-label">Jam mulai shift</label>
<input type="time" class="form-control" id="shift_mulai" name="shift_mulai" required="">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="shift_selesai" class="control-label">Jam selesai shift</label>
<input type="time" class="form-control" id="shift_selesai" name="shift_selesai" required="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group no-margin">
<label for="keterangan_shift" class="control-label">Keterangan</label>
<textarea class="form-control autogrow" id="keterangan_shift" name="keterangan_shift" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 104px;" required=""></textarea>
</div>
</div>
</div>
</div>
<div class="row">
<strong class="col-form-label col-sm-2 pt-0">Status</strong>
<div class="col-sm-10">
<div class="form-group row">
<div class="col-sm-10">
<input type="radio" class="form-check-input" id="status" name="status" value="BELUM JAM SHIFT">
Belum jam shift
</div>
<div class="col-sm-10">
<input type="radio" class="form-check-input" id="status" name="status" value="SEDANG JAM SHIFT">
Sedang jam shift
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Batal</button>
<button type="submit" class="btn btn-info waves-effect waves-light">Tambah Jadwal</button>
</form>
</div>
</div>
</div>
</div><!-- /.modal -->
JQUERY
$(document).ready(function() {
$('.tombolTambahJadwal').on('click', function() {
$('#con-close-modalLabel').html('Tambah Jadwal Shift');
$('.modal-footer button[type=submit]').html('Tambah Jadwal');
$('#insert_form')[0].reset();
});
$(document).on('click', '.tampilModalUbah', function() {
$('#con-close-modalLabel').html('Ubah Jadwal Shift');
$('.modal-footer button[type=submit]').html('Ubah Jadwal');
$('.modal-body form').attr('action', 'ubahJadwal.php');
var nomor_shift = $(this).data("id");
$.ajax({
url: "idJadwal.php",
method: "POST",
data: { nomor_shift : nomor_shift},
dataType: "json",
success: function(data){
console.log(data);
$('#nama').val(data.nama);
$('#jabatan').val(data.jabatan);
$('#tanggal').val(data.tanggal);
$('#shift_mulai').val(data.shift_mulai);
$('#shift_selesai').val(data.shift_selesai);
$('#keterangan_shift').val(data.keterangan_shift);
$('#status').val(data.status);
$('#nomor_shift').val(data.nomor_shift);
}
});
});
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
I have created Web Application using Angular Js, PHP and mySql. There are many insert form are there in the application.
All inserts into the database are working pretty much fine.
My problem is: I'm not able to update my form using update mySql query.
I think problem is with form, but I'm not able to figure out what is actual issue.
Please check where is the bug
This my Html markup:-
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="dhmsEditSection">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" ng-repeat="u in details.requirement_detail track by $index">
<div class="">
<div class="page-content">
<form class="form-horizontal ng-pristine ng-valid">
<fieldset>
<legend>New Project Requirement</legend>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Requirement No.</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" disabled ng-model="reqID" value="{{u.id}}" placeholder="Req. No. {{u.id}}">
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Client Name</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" value="{{u.rClientName}}" ng-model="{{u.rClientName}}" ng-model="rClientName" >
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Contact No.</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" name="rContactNumber" value="{{u.rContactNumber}}" ng-model="{{u.rContactNumber}}" >
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Company Name</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" value="{{u.rCompanyName}}" ng-model="rClientName">
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Email Address</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<input type="text" class="form-control" ng-model="rEmail" value="{{u.rEmail}}" >
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label no-padding-right">Requirement Information</label>
<div class="col-sm-7">
<span class="block input-icon input-icon-right">
<textarea class="form-control" ng-model="rRequirement" >{{u.rRequirement}}</textarea>
</span>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="updatedata()">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
Controller:
dhmsApp.controller('dhmsEditSection',function($scope,$http){
$scope.updatedata=function(){
$http.post("include/editSectionBg.php",{'rClientName':$scope.rClientName,'rContactNumber':$scope.rContactNumber,'rCompanyName':$scope.rCompanyName,'rEmail':$scope.rEmail,'rRequirement':$scope.rRequirement})
.success(function(data,status,headers,config){
alert("Data inserted successfully");
});
}
});
editSectionBg.php
<?php
$data = json_decode(file_get_contents("php://input"));
$reqID = $data->reqID;
$rClientName = $data->rClientName; // mysql_real_escape_string Escapes special characters in a string for use in an SQL statement
$rContactNumber = $data->rContactNumber;
$rCompanyName = $data->rCompanyName;
$rEmail = $data->rEmail;
$rRequirement = $data->rRequirement;
// syntax for mysql connect == "mysql_connect(host,username,password);"
include("connection_string.php");
include("connectionStringFetch.php");
mysqli_query($db, "update dhms_requirement set `rClientName`='".$rClientName."', `rContactNumber`='".$rContactNumber."', `rCompanyName`='".$rCompanyName."', `rEmail`='".$rEmail."', `rRequirement`='".$rRequirement."' where id='".$reqID."'");
?>
i think you are missing to add reqID in your post data
$reqID = $data->reqID;
I tried to use bootstrap modal class to make a popup signup form and when i press the signup button window just fade and reload that's it. popup doesn't work. I'm using bootstrap 3.3.6. please help.
this is the sign up button code:
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
I am using the signup button inside a nav (navbar-inverse).
this is the popup form code:
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I coded this popup form code below the signup button code and that means it's inside the navbar
Please check this:
I have created a JS Fiddle and it is working fine here.
---- https://jsfiddle.net/DTcHh/19115/
You must include Bootstrap js and css file to your project in order to make it work.
Here your working code
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default navbar-btn sign" data-toggle="modal" data-target="#signupForm">Sign up</button>
</form>
<div class="modal fade" id="signupForm" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="">
<span>×</span>
</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">User Name :</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Email :</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">Confirm Password :</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
I fixed the problem. I find out the cause is that button type should be button not submit. I changed the button type to button then it worked.
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>