Angular JS not able to update php form - javascript

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;

Related

Showing Form Entry on Modal Window Bootstrap / jQuery

I'm creating a form confirmation window with Bootstrap Modal before user submission.
Here is the html part:
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<div class="form-group">
<label for="Email" class="col-sm-3 control-label">Email:</label>
<div class="col-sm-9">
<input type="text" name="Email" id="Email" size="50" maxlength="100" class="form-control" placeholder="Email">
</div>
</div>
<input type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">
</form>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
And here is the jQuery part:
$('#submitBtn').click(function() {
$('#mCompany').text($('#Company').val());
$('#mDepartment').text($('#Department').val());
$('#mUsername').text($('#Username').val());
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
$('#mEmail').text($('#Email').val());
});
You can see and try with this
link to JSFiddle.
Not all fields are required, and what I want to do is to show only the entry with data.
For example in the below image, I don't want the red bordered part to show up.
Example Screen Shot
The sample on JSFiddle has only 6 fields but my form has over 30 fields. I'm wondering if there's a way to show only the fields with data.
Remove below part from HTML
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTel"></div>
</div>
remove below part from jquery
$('#mAddress').text($('#Address').val());
$('#mTEL').text($('#TEL').val());
I make some improvents:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
//console.log(id);
//console.log("#m"+id);
$("#m"+id).text($(this).val());
all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="entryname col-xs-3 ">Company:</div>
<div class="entrydata col-xs-9" id="mCompany"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Department:</div>
<div class="entrydata col-xs-9" id="mDepartment"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Name:</div>
<div class="entrydata col-xs-9" id="mUsername"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Address:</div>
<div class="entrydata col-xs-9" id="mAddress"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">TEL:</div>
<div class="entrydata col-xs-9" id="mTEL"></div>
</div>
<div class="row">
<div class="entryname col-xs-3">Email:</div>
<div class="entrydata col-xs-9" id="mEmail"></div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->
You can add some classes to know what field did you want to show in the modal and what not to show.... I think could be add dynamical to the modal too...
Add inputs dynamical:
var all = "";
$('#submitBtn').click(function () {
/* when the button in the form,
display the entered values in the modal */
//console.log($("from input"));
all = "";
$("#modalBody").html('');
$.each($("form input"),function(i,v){
var id= $(this).attr('id');
if($(this).hasClass('add')){
all = all + $(this).val();
var input = '<div class="row">'
+ '<div class="entryname col-xs-3">' + id + ':</div>'
+ '<div class="entrydata col-xs-9" id="m' + id +'">' + $(this).val(); + '</div>'
+ ' </div>';
//console.log(input);
$("#modalBody").append(input);
}
//console.log(id);
//console.log("#m"+id);
//$("#m"+id).text($(this).val());
// all = all + $(this).val();
});
hideEmptyInputs();
});
$('#myModal').on('show.bs.modal', function (e) {
if(all == ""){
e.preventDefault();
}
})
function hideEmptyInputs(){
//console.log($("#myModal div"));
//console.log($("#myModal div[id^=m]"));
$.each($("#myModal div[id^=m]"),function(i,v){
//console.log($(this).text());
var value = $(this).text();
if(value == ""){
//Hide if empty
$(this).parent().css('display','none');
}else{
$(this).parent().css('display','block');
}
});
//console.log("algo");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form role="form">
<div class="form-group">
<label for="Company" class="col-sm-3 control-label">Company:</label>
<div class="col-sm-9">
<input type="text" name="Company" id="Company" size="50" maxlength="100" class="form-control add" placeholder="Companyt">
</div>
</div>
<div class="form-group">
<label for="Department" class="col-sm-3 control-label">Department:</label>
<div class="col-sm-9">
<input type="text" name="Department" id="Department" size="50" maxlength="100" class="form-control add" placeholder="Department">
</div>
</div>
<div class="form-group">
<label for="Username" class="col-sm-3 control-label">Name:</label>
<div class="col-sm-9">
<input type="text" name="Username" id="Username" size="50" maxlength="100" class="form-control add" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="Address" class="col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" name="Address" id="Address" size="50" maxlength="100" class="form-control" placeholder="Address">
</div>
</div>
<div class="form-group">
<label for="TEL" class="col-sm-3 control-label">TEL:</label>
<div class="col-sm-9">
<input type="text" name="TEL" id="TEL" size="50" maxlength="100" class="form-control add" placeholder="TEL">
</div>
</div>
<button type="button" class="btn btn-primary btn-block enduserinfobtn" id="submitBtn" data-toggle="modal" data-target="#myModal" value="Submit">Submit</button>
</form>
<!-- ########## Start Modal Section ########## -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm your entry</h4>
</div>
<div class="modal-body">
<div id="modalBody"></div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<div class="col-xs-6"><button class="btn btn-block btn-default" data-dismiss="modal">Cancel</button></div>
<div class="col-xs-6"><button class="btn btn-block btn-primary">Submit</button></div>
</div>
</div>
</div>
</div>
<!-- ########## End Modal Section ########## -->

How to Upload both file and data using ajax , jquery and spring mvc

I want to upload the data along with the file using ajax , query and Spring MVC Below is the my modal pop up . please can anyone help me with this out.
<!-- Modal -->
<div id="fileUpload" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="changeTitle">
<spring:message code="ulearn.summary.mastercourse.addreference" />
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" id="masterCourseItemForm" onsubmit="return false;">
<div class="form-group">
<label class="control-label col-sm-2" for="name"><spring:message code="ulearn.summary.name.label"/></label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" placeholder="" value="" autofocus="true">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd"><spring:message code="ulearn.summary.description.label"/></label>
<div class="col-sm-10">
<textarea type="text" class="form-control" id="description" placeholder="" value=""></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">File Type</label>
<div class="col-sm-10">
<select name="Select" class="selectpicker form-control" id="stateLst">
<option value="">Select</option>
<c:forEach items="${fileList}" var="option">
<option value="${option}">
<c:out value="${option}"></c:out>
</option>
</c:forEach>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Upload</label>
<div class="col-sm-10">
<div class="fileinput fileinput-new" data-provides="fileinput">
<span class="btn btn-default btn-file" style="width: 468px;"><span>Choose file</span><input type="file" multiple/></span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" id="submit" data- backdrop="static">
<spring:messagecode="ulearn.btn.upload.label"/>
</button>
<button type="button" class="btn btn-primary" data-dismiss="modal"> <spring:messagecode="ulearn.btn.cancel.label"/>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
You probably want to take a look at multipart/form-data posts.
Here is some additional info on the topic:
http://hmkcode.com/spring-mvc-upload-file-ajax-jquery-formdata/
Upload file + Form Data + Spring MVC + JQuery

Bootstrap modal open on clicking image

when i click menu-5_1.png the below model should pop up
<li class="men_5l" ><a id = "pop" href="#"><span><img src="images/menu_5_1.PNG" alt=""></span> <p>Mp3</p></a></li>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">
Don't Wait, Login now!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8" style="border-right: 1px dotted #C2C2C2;padding-right: 30px;">
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="active">Login</li>
<li>Registration</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="Login">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email1" placeholder="Email" />
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button1" class="btn btn-primary btn-sm" runat="server"
Text="log in" />
Forgot your password?
</div>
</div>
</form>
</div>
<div class="tab-pane" id="Registration">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-sm-2 control-label">
Name</label>
<div class="col-sm-10">
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>Mr.</option>
<option>Ms.</option>
<option>Mrs.</option>
</select>
</div>
<div class="col-md-9">
<asp:TextBox ID="txtPagingGoto" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="email" id="emailField" class="col-sm-2 control-label">
Email</label>
<div class="col-sm-10">
<asp:TextBox ID="txtEmail" class="form-control" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="mobile" class="col-sm-2 control-label">
Mobile</label>
<div class="col-sm-10">
<input type="text" id="txtPhoneNo" class="form-control" placeholder="Mobile" onkeypress="return isNumber(event)" />
</div>
</div>
<div class="form-group">
<label for="password" id="p1" class="col-sm-2 control-label">
Password</label>
<div class="col-sm-10">
<input type="password" id="pass1" class="form-control" placeholder="Password" />
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">
Re-Enter Password</label>
<div class="col-sm-10">
<input type="password" id="pass2" class="form-control" placeholder="Password" />
</div>
</div>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<asp:Button ID="Button2" class="btn btn-primary btn-sm" runat="server" Text="Register"/>
<button type="button" class="btn btn-default btn-sm">
Cancel</button>
</div>
</div>
</form>
</div>
</div>
<div id="OR" class="hidden-xs">
</div>
</div>
<div class="col-md-4">
<div class="row text-center sign-with">
<div class="col-md-12">
<h3 class="other-nw">
Sign in with</h3>
</div>
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<div style="height:20px;width:100%;"> Facebook</div><div style="margin-top: 35px; width: 100%;"> <a href="#" class="btn btn-danger">
Google +</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
</script>
Try:
$(document).ready(function () {
$("ul").on('click','#pop',function () {
$('#myModal').modal('show');
});
});
I think you have missed below reference libraries in your application.
https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js
$(document).ready(function () {
$("#pop").click(function () {
$('#myModal').modal('show');
});
});
Demo:
https://jsfiddle.net/zz9wqroc/

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>

How to style form inside modal with Bootstrap 3

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

Categories