I have small form with checkbox. When I fill the form and save data to database and try to fill it with another data to save it to database my checkbox doesn't work. It works only when I refresh page. here is code.
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast" style="display: none">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0"
style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"
id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
$('#is_free_breakfast').change(function(){
getIsFree = $('#is_free_breakfast').is(':checked');
if(getIsFree){
$('#price_breakfast').hide();
}else{
$('#price_breakfast').show();
}
});
You will need to explicit reset the form if you are using js handler for form submit (action="").
Something like:
function saveNewBreakfast() {
// submit handler code
// reset the form to initial values
$('#breakfast_validate')[0].reset();
// show/hide the input based on checkbox's initial values
$('#is_free_breakfast').change();
}
NOTE: reset is a HTML DOM Element method (i.e. plain js function), and not
a jQuery one, so $('selector')[0] is used to convert jquery object to DOM element. Or you can use plain js
document.getElementById('breakfast_validate').reset();
Here's a demo:
function saveNewBreakfast() {
// submit hanlder code
alert('saved with price: ' + ($('#breakfast_price').val() || 'free'));
$('#breakfast_validate')[0].reset();
$('#is_free_breakfast').change();
}
$('#is_free_breakfast').change(function() {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').hide();
} else {
$('#price_breakfast').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate" id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline"><input
id="is_free_breakfast" type="checkbox" checked>Is
free ? </label>
</div>
<div class="control-group" id="price_breakfast" style="display: none">
<label class="control-label">Price</label>
<div class="controls">
<input type="number" min="0" style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;" id="breakfast_price"> EUR
</div>
</div>
<div class="control-group">
<button type="submit" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
$(document).ready(function () {
var html_content = '<label class="control-label">Price</label>' +
'<div class="controls">' +
'<input type="number" min="0"' +
'style="border-radius: 5pc; height: 30px; width: 280px; margin-bottom: 0px;"' +
'name="breakfast_price" id="breakfast_price"> EUR' +
'</div> ';
$('#is_free_breakfast').change(function () {
getIsFree = $('#is_free_breakfast').is(':checked');
if (getIsFree) {
$('#price_breakfast').empty();
} else {
$('#price_breakfast').html(html_content);
}
});
});
function form_submit(){
var queryString = $('#breakfast_validate').serialize();
console.log(queryString);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:saveNewBreakfast();" name="basic_validate"
id="breakfast_validate" novalidate="novalidate">
<div class="control-group" id="add_breakfast">
<div class="control-group">
<label class="control-label">Select new one</label>
<div class="controls">
<select name="required" id="breakfast_select">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
</div>
</div>
<div class="control-group">
<label class="checkbox-inline">
<input
id="is_free_breakfast" type="checkbox" checked>Is free ?
</label>
</div>
<div class="control-group" id="price_breakfast">
</div>
<div class="control-group">
<button type="button" onclick="form_submit()" class="btn btn-mini; btn-success">Save</button>
</div>
</div>
</form>
Related
I am trying to add validation to a html form that looks like this:
<div id="container">
<header>
<h1>Production Form</h1>
</header>
</br>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<br><br>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="url" id="link" class="form-control" name="output[link]">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</section>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
However the code is not picking validation when I use the required attribute, how can I add validation for this within a js script that will check against the values in this html form before submitting
I think maybe you get the errors because the HTML tags were not opened and closed in the correct order, and you had an opened div that needed to be closed. Try validating the HTML code. I think it can cause problems if your html is not valid.
I added these attributes to your HTML (and validated it), and also some CSS to see the validation result.
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
and
:invalid {
border: 1px solid red;
}
This works and validates as expected.
:invalid {
border: 1px solid red;
}
input {
margin: 1em
}
<div id="container">
<header>
<h1>Production Form</h1>
</header>
<div class="content">
<div class="row">
<article class="col-xs-12">
<form id="cf-task-form">
<section>
<div class="row form-group">
<div class="col-xs-3">
<label for="link">Link</label>
<input type="text" id="link" class="form-control" name="output[link]" required="true" pattern="^http.*">
</div>
<div class="col-xs-3">
<label for="address">Address</label>
<input id="address" class="form-control" name="output[address]" required="true" pattern=".*street.*">
</div>
<div class="col-xs-3">
<label for="research">Research</label>
<select id="research" name="output[research]">
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
<div class="col-xs-offset-6 col-xs-6">
<input type="button" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
</div>
</div>
</section>
</form>
</article>
</div>
<div class="clear"></div>
</div>
</div>
Note that the validation patterns are only for testing and not real patterns that should be used!
I used this page as reference: https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
If you want the required attribute to work, I think you need to change your last input type to "submit" :
<input type="submit" class="btn sub-btn pull-right" id="submit-btn" value="Submit" tabindex="10">
But I agree that it would be great to add some JS if you want to do proper form validation. I see some people shared useful links on the subject.
<form id="cf-task-form" onsubmit="return validateForm()">
const link = document.querySelector("#link").value
const Address = document.querySelector("#Address").value
const research = document.querySelector("#research").value
function validateForm() {
if (link == '') {
alert("filled out url");
return false;
}
else if (Address == '') {
alert("filled out Address");
return false;
}
else if (research == '') {
alert("filled out research");
return false;
}
}
I am trying to calculate multiple values based on multiple selections from a and then have the data add up and display in an on the same form. I tried some jquery stuff but didn't really work at all. I've tried using some Javascript to do the calcultions but nothing seems to be happening.
Blade:
#extends('layout.layouts')
#section('content')
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NCIC - Reports</title>
</head>
<body>
<br>
<h1>New Report</h1>
<br>
<form action="{{ 'storereport' }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="author">Reporting Officer</label>
<input type="text" class="form-control" name="author" value="{{ Auth::user()->name }}">
</div>
<div class="form-group">
<label for="profileid">SSN</label>
<input type="text" class="form-control" name="profileid">
</div>
<div class="form-group">
<label for="report">Report</label>
<textarea class="form-control" name="report" rows="10"></textarea>
</div>
<div class="form-group">
<label for="selectpicker">Select Offences</label>
<select class="selectpicker" id="lawspicker" name="laws[]" data-width="100%" data-live-search="true" multiple>
#foreach($laws as $law)
<option value="{{ $law->name }} {{ $law->fine }} {{ $law->months }}">Offence: {{ $law->name }} </option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment">
</div>
<hr style="background-color:white;">
<button type="submit" class="btn btn-success">Submit</button>
<a class="btn btn-info float-right" href="{{ route('reports') }}">Main menu</a>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#lawspicker").keyup(function(){
$("#punishment").val(parseFloat($("{{ $law->months }}").val()) + parseFloat($('{{ $law->fine }}').val()));
})
$("#lawspicker").change(function(){
$("#punishment").val(parseInt($("#lawspicker").val());
})
</script>
<style>
body{
background-color: #353b48;
color:white;
}
</style>
</html>
#endsection
To clarify, I want {{ $law->months }} & {{ $law->fine }} to add up and then display in #punishment <input>
Thanks for looking!
You can do some thing like this.
Update <option> tag to this
<option data-fine="{{$law['fine']}}" data-months="{{$law['months']}}" value="{{ $law['name'] }} {{ $law['fine'] }} {{ $law['months'] }}">Offence: {{ $law['name'] }} </option>
and you can get data attribute of the selected <option> tag in your script like this.
`$("#lawspicker").change(function() {
var fine = $(this).find(':selected').data('fine');
let months = $(this).find(':selected').data('months');
$("#punishment").val(parseInt(fine+months));
});`
Thanks.
I would be tempted to replace your select element with checkboxes personally.
An example below using jquery to calculate the fine and months when a button is clicked but could be an event of your choosing. I stripped it back from your example so it was easier to see what is going on.
Checkbox example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-a" data-fine="100" data-months="12" class="custom-control-input offence">
<label for="law-a" class="custom-control-label">Law A</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-b" data-fine="999" data-months="6.5" class="custom-control-input offence">
<label for="law-b" class="custom-control-label">Law B</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-c" data-fine="123.5" data-months="8" class="custom-control-input offence">
<label for="law-c" class="custom-control-label">Law C</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Then some javascript (jquery)
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$(".offence").each(function(index, obj) {
if (obj.checked) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
When you click submit, the javascript will loop through each element with the offence class and then read the value of the data-fine and calculate the totals.
An example fiddle: https://jsfiddle.net/dbtas60w/
Multiselect example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<select class="selectpicker" id="lawspicker" name="laws[]" multiple>
<option data-fine="100" data-months="12">Law A</option>
<option data-fine="999" data-months="6.5">Law B</option>
<option data-fine="123.5" data-months="8">Law C</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
javascript
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$("#lawspicker>option").each(function(index, obj) {
if (obj.selected) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
Example fiddle: https://jsfiddle.net/dbtas60w/1/
I have a bootstrap html page that contains already 2 auto update text field functions for its needs. Along with that I added another fields in a modal to complete the page and requires another auto calculation to be populated on a certain text field.
Base form for first and 2nd instance of auto update
<form role="form" id="myForm" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<div class="form-group">
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Item</label>
<select onchange="GenPrice(this)" id="items" name="items" class="form-control" required>
<option value="" selected disabled>Select Item</option>
<?php
//some sql function for fetch
echo '<option value="'.$row['sup_eaprice'].'|'.$row['sup_name'].'" required>'.$row['sup_name'].'</option>';
}
}
?>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//FIRST INSTANCE AUTO UPDATING TEXT FIELD
<label for="exampleInputEmail1">Price (ea)</label>
<input type="text" class="form-control" id="eaprice" placeholder="No Item Selected" required disabled>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Quantity</label>
<input type="text" class="form-control calculate" onchange="GenTot(this)" name="quantity" id="quantity" placeholder="How many?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="3" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//2ND INSTANCE AUTO UPDATING TEXTFIELD
<label for="exampleInputEmail1">Total</label>
<input type="text" class="form-control" id="ztotal" name="ztotal" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group" align="right">
<button id="submit" type="submit" class="btn btn-primary" name="addcart">Add Cart</button>
</div>
</div>
</form>
Modal window 3rd instance
<!--create confirmation modal window-->
<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<b>Final Check</b>
</div>
<div class="modal-body">
<div class="row">
<form role="form" id="purchformx" action="cashier.php?submit=yes" method="post" data-toggle="validator">
<!-- hidden for purpose of change auto calc -->
<input type="hidden" name="thetotal" class="calchange" id="thetotal" value="<?php echo $overall; ?>">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="exampleInputEmail1">Received</label>
<input type="text" class="form-control calchange" name="received" id="received" placeholder="How much given?" pattern="^[0-9]*[1-9][0-9]*$" maxlength="4" data-minlength="1" required>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
//3RD INSTANCE AUTO UPDATE NOT WORKING
<label for="exampleInputEmail1">Change</label>
<input type="text" class="form-control" id="thechange" name="thechange" readonly>
<div class="help-block with-errors"></div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Submit
</div>
</div>
</div>
</div>
<!--end modal-->
JQUERIES
For first instance (working)
<script type="text/javascript">
function GenPrice(data) {
var xprice = data.value;
var zprice = xprice.split("|");
document.getElementById ("eaprice").value = zprice[0];
document.myForm.eaprice.value = zprice[0];
}
</script>
For second instance (working) based from Calculate total value inline form
<script type="text/javascript">
/* total value calculator */
$(document).ready(function () {
//Calculate both inputs value on the fly
$('.calculate').keyup(function () {
var Tot = parseFloat($('#eaprice').val()) * parseInt($('#quantity').val());
if(isNaN(Tot)) Tot = "";
$('#ztotal').val(Tot);
});
//Clear both inputs first time when user focus on each inputs and clear value 00
$('.calculate').focus(function (event) {
$(this).val("").unbind(event);
});
});
</script>
For third instance (not working) based from auto calculate total value
<script type="text/javascript">
$(document).ready(function(){
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '')
{
total = parseFloat($(this).val()) - parseFloat($('#thetotal').val());
}
});
$('#thechange').html(total);
});
})(jQuery);
</script>
I'm not sure why the 3rd instance which is inside a modal window doesn't auto update at all given ive just made a separate jquery class for it. Thanks in advance for further suggestions.
$('.calchange').change(function(){
var total = 0;
$('.calchange').each(function(){
if($(this).val() != '') {
total += parseFloat($(this).val());
}
});
var totalFinal = total - parseFloat($('#thetotal').val());
$('#thechange').val(totalFinal);
});
I have a checkbox with ID GlandularFever and on click (which checks it) I can get it to show another DIV with data-field name="GlandularDetails". Though on un-check, how do I get it to hide that div again? If data-field name="GlandularDetails hidden = true then show, else if data-field name="GlandularDetails hidden = false then hide.
<script>
$(document).ready(function(){
$("#GlandularFever").click(function(){
$(document.querySelectorAll('[data-field name="GlandularDetails"]')).show(100);
hidden = false;
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Thank you
Try this:
$(document).ready(function () {
$('#GlandularFever').click(function () {
if ($(this).prop('checked')) {
$('[data-field name="GlandularDetails"]').show(100);
} else {
$('[data-field name="GlandularDetails"]').hide(100);
}
});
});
You can use the JQuery method .toggle( [duration ] [, complete ] )
var glandularDetails = $('[data-field-name="GlandularDetails"]');
glandularDetails.hide();
$("#GlandularFever").click(function() {
glandularDetails.toggle(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
Use toggle to alternate between hidden and visible.
Also, avoid document.querySelectorAll when using jQuery. jQuery automatically handles that:
$("#GlandularFever").click(function() {
$('[data-field-name="GlandularDetails"]').toggle(100);
});
div.form-group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever" />
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
check this code and run
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("div[data-field-name=GlandularDetails]").hide();
$("#GlandularFever").click(function(){
if($(this).is(':checked'))
{
$("div[data-field-name=GlandularDetails]").show();
}
else
{
$("div[data-field-name=GlandularDetails]").hide();
}
});
});
</script>
<div class="col-md-12">
<div class="funkyradio">
<div class="funkyradio-primary col-md-4">
<input value="Yes" type="checkbox" name="GlandularFever" id="GlandularFever"/>
<label for="GlandularFever">Glandular Fever</label>
</div>
</div>
</div>
<div class="form-group col-md-12" data-field-name="GlandularDetails">
<label class="control-label">Details</label>
<textarea rows="3" id="GlandularDetails" name="GlandularDetails" maxlength="100" class="form-control" placeholder=""></textarea>
</div>
.
I am trying to load a simple full calender plugin and on click of each date i am trying to show a sample modal dialog that shows the user the option of selelcting the organization and branch which are fetched from the database , but the angular module is not getting loaded and the variables are not evaluated it stays as {{org.orgname}} and {{branch.branchName}}
Here is my javascript
<script type="text/javascript">
$(function()
{
var ScheduleApp = angular.module('ScheduleApp', ['ui.calendar','ui.bootstrap']);
ScheduleApp.controller('ScheduleAppContoller', function($scope,$http) {
$scope.organizations = [];
$scope.organization = "";
$scope.branches = [];
$scope.branch = "";
//$scope.managedEntities = [];
var getOrganization = "getOrganizations";
$http.post(getOrganization).success(function(data) {
$scope.organizations = data;
});
$scope.selectBranch = function() {
var orgId = $scope.organization;
var action = "getBranchByOrgId?";
var param = "orgId=" + orgId;
$http.post(action + param).success(function(data) {
$scope.branches = data;
});
}
});
});
</script>
and my html
<body ng-app="ScheduleApp">
<div id='calendar' style="Width: 90%; padding-left: 10%"></div>
<div id="createEventModal" class="well modal fade" tabindex="-1" style="Width: 40%; height: 550px; margin-left: 30%; margin-top: 20px;" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true" ng-controller="ScheduleAppContoller">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel1">Create a new Schedule</h3>
</div>
<div class="modal-body">
<form id="createAppointmentForm" class="form-horizontal">
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Title</label>
<div class="col-sm-6">
<input type="text" name="scheduleTitle" id="scheduleTitle"
class="form-control" data-provide="typeahead"> <input
type="hidden" id="apptStartTime" /> <input type="hidden"
id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Managed
Entity Group:</label>
<div class="col-sm-6">
<input type="text" name="patientName" id="patientName"
class="form-control" style="margin: 0 auto;"
data-provide="typeahead" data-items="4"> <input
type="hidden" id="apptStartTime" /> <input type="hidden"
id="apptEndTime" /> <input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Organization
:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="organization"
ng-change="selectBranch()" id="organizationId"
name="organizationId">
<option value="">Please select Organization</option>
<option
ng-repeat="organization in organizations|orderBy:'orgName'"
value="{{organization.orgId}}">{{organization.orgName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Branch:</label>
<div class="col-sm-6">
<select class="form-control" ng-model="branch" name="branchId"
id="branchId" name="branchId" style="width: auto;">
<option value="">Please Select Branch</option>
<option value="{{br.id}}"
ng-repeat="br in branches | orderBy:branchName">{{br.branchName}}</option>
</select>
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Checklist
Type:</label>
<div class="col-sm-6">
<input type="text" name="patientName" id="patientName"
style="margin: 0 auto;" data-provide="typeahead" data-items="4"
class="form-control"> <input type="hidden"
id="apptStartTime" /> <input type="hidden" id="apptEndTime" />
<input type="hidden" id="apptAllDay" />
</div>
</div>
<div class="form-group">
<label for="branch " class="col-sm-5 control-label2">Add
Recurrence Rule</label>
<div>
<input type="checkbox" name="isRecurrencePresent"
id="isRecurrencePresent" style="margin: 0 auto;"
data-provide="typeahead" data-items="4" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
The calender is loaded properly and so is the modal dialog but im not able to load the drop down within this modal
ok I've change your import, because some of them were wrong (wrong order), so now we got a fullcalendar working with no errors on a console in this plunker if I understand this correct you want to call $scope.selectBranch = function() {...} and get all you brunches from $http ? when ng-change="selectBranch()" is trigger?! but selectBrunch is never trigger as there is nothing changing in that dropdown. You will need to load your 'Organization' before to use ng-change.
If you want to use $http to populate your you can check Typeahead, hope it helps, please let me know if you need some help.