So I've been trying to make a calendar for a church system where they can add reservations with the use of the calendar and I'm having a hard time making the data I add "stick" to the calendar itself.
Any help would be greatly appreciated.
<?php
include ('config1.php');
if(isset($_SESSION['username'])) {
$message = "Login First!";
echo "<script type='text/javascript'>alert('$message');</script>";
}
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>San Isidro Labrador Parish </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<!-- Custom styling plus plugins -->
<link href="css/custom.css" rel="stylesheet">
<link href="css/icheck/flat/green.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.css" rel="stylesheet">
<link href="css/calendar/fullcalendar.print.css" rel="stylesheet" media="print">
<script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<!-- page content -->
<div class="right_col" role="main">
<div class="">
<div class="page-title">
<div class="title_left">
<h3>
Calender
<small>
Click to add/edit events
</small>
</h3>
</div>
<div class="title_right">
<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_title">
<h2>Calender Events <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
<li class="dropdown">
<i class="fa fa-wrench"></i>
<ul class="dropdown-menu" role="menu">
<li>Settings 1
</li>
<li>Settings 2
</li>
</ul>
</li>
<li><a class="close-link"><i class="fa fa-close"></i></a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div id='calendar'></div>
</div>
</div>
</div>
</div>
</div>
<!-- footer content -->
<footer>
</footer>
<!-- /footer content -->
</div>
<!-- Start Calender modal -->
<div id="CalenderModalNew" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">New Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="Venue_idVenue" id ="Venue_idVenue" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Bulding" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament" id ="Sacrament_idSacrament" class = "form_control">
<option value="1" name ="Baptsim" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose" data-dismiss="modal">Close</button>
<input type="submit" name="submit" class="btn btn-primary antosubmit"value="Save changes" onClick="validinfo()"></input>
</div>
</div>
</div>
</div>
<div id="CalenderModalEdit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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="myModalLabel2">Edit Calender Entry</h4>
</div>
<div class="modal-body">
<div id="testmodal" style="padding: 5px 20px;">
<form id="antoform" class="form-horizontal calender" role="form">
<input type = "hidden" name = "submitted" value = "true"/>
<div class="form-group">
<label class="col-sm-3 control-label">Venue</label>
<div class="col-sm-9">
</div>
<select name="idVenue2" id ="idVenue2" required = "required">
<option value="1" name ="Garden" style ="height:55px;">Garden</option>
<option value="2" name ="Chapel" style ="height:55px;">Chapel</option>
<option value="3" name ="Church" style ="height:55px;">Church</option>
<option value="4" name ="New Building" style ="height:55px;">New Building</option>
<option value="5" name ="Seminar Hall" style ="height:55px;">Seminar Hall</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Sacrament</label>
<div class="col-sm-9">
</div>
<select name="Sacrament_idSacrament2" id ="Sacrament_idSacrament2" class = "form_control">
<option value="1" name ="Baptism" style ="height:55px;">Baptism</option>
<option value="2" name ="Confirmation" style ="height:55px;">Confirmation</option>
<option value="3" name ="Marriage" style ="height:55px;">Marriage</option>
</select>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Date</label>
<div class="col-sm-9">
<input id="reservation_date2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_date2" placeholder="Reservation Date" required="required" type="date"/>
<!-- <textarea class="form-control" style="height:55px;" id="reservation_date" name="reservation_date"></textarea> -->
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Reservation Time</label>
<div class="col-sm-9">
<input id="reservation_time2" class="datepicker form-control col-md-7 col-xs-12" name="reservation_time2" placeholder="Reservation Time" required="required" type="time"/>
<!--<textarea class="form-control" style="height:55px;" id="reservation_time" name="reservation_time"></textarea> -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default antoclose2" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary antosubmit2">Save changes</button>
</div>
</div>
</div>
</div>
<div id="fc_create" data-toggle="modal" data-target="#CalenderModalNew"></div>
<div id="fc_edit" data-toggle="modal" data-target="#CalenderModalEdit"></div>
<!-- End Calender modal -->
<!-- /page content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group">
</ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/nprogress.js"></script>
<!-- chart js -->
<script src="js/chartjs/chart.min.js"></script>
<!-- bootstrap progress js -->
<script src="js/progressbar/bootstrap-progressbar.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.min.js"></script>
<!-- icheck -->
<script src="js/icheck/icheck.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/calendar/fullcalendar.min.js"></script>
<script>
$(window).load(function () {
var date = new Date();
var d = date.getDate('Y-m-d');
var m = date.getMonth();
var y = date.getFullYear();
var started;
var categoryClass;
var calendar = $('#calendar').fullCalendar({
editable: true,
header: {
left: 'prev,next, today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '<?php echo date('Y-M-d'); ?>',
editable: true,
timeFormat: 'h:mmA',
selectable: true,
selectHelper: true,
eventLimit: true,
select: function (start, end, allDay) {
$('#fc_create').click();
started = start;
ended = end
$(".antosubmit").on("click", function () {
var venue = $("#title").val();
if (end) {
ended = end
}
categoryClass = $("#event_type").val();
if (venue) {
calendar.fullCalendar('renderEvent', {
title: title,
start: started,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
$('#title').val('');
calendar.fullCalendar('unselect');
$('.antoclose').click();
return false;
});
},
eventClick: function (calEvent, jsEvent, view) {
//alert(calEvent.title, jsEvent, view);
$('#fc_edit').click();
$('#title2').val(calEvent.venue);
categoryClass = $("#event_type").val();
$(".antosubmit2").on("click", function () {
calEvent.title = $("#title2").val();
calendar.fullCalendar('updateEvent', calEvent);
$('.antoclose2').click();
});
calendar.fullCalendar('unselect');
},
editable: true,
events: [
<?php
include('config1.php');
$select = mysqli_query($conn, "select venue.venue_type, reservation.reservation_date, reservation.reservation_time from venue, reservation where venue.idVenue = reservation.idReservation;");
$number = mysqli_num_rows($select);
$row = mysqli_fetch_assoc($select);
$venue_type = $row['venue_type'];
$reservation_date = $row['reservation_date'];
$reservation_time = $row['reservation_time'];
$i = 1;
while($row = mysqli_fetch_array($select))
{
if($i <= $number) {
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
},
<?php
}
else
{
?>
{
title: '<?php echo $row['venue_type']; ?>',
start: '<?php echo $row['reservation_date'].'T'.$row['reservation_time']; ?>'
}
<?php
}
$i = $i + 1;
}
?>
<?php
if(!empty($_POST['submit']))
{
global $conn;
$reservation_date1 = $_POST["reservation_date"];
$reservation_time1 = $_POST["reservation_time"];
$Seminar_sched_idSeminar_sched1 = $_POST['Seminar_sched_idSeminar_sched'];
//$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
$insertRes = mysqli_query($conn, "INSERT INTO reservation (Venue_idVenue, Sacrament_idSacrament, reservation_date, reservation_time) VALUES ('".$_POST[venue_id]."', '".$_POST[sacrament_id]."', '$reservation_date1','$reservation_time1')");
echo'<script language="java script">';
echo'alert("Data Saved!")';
echo'</script>';
if($insertRes)
{
printf("Error: %s\n", mysqli_error(conn));
exit();
}
}
mysqli_close($conn);
?>
]
});
});
</script>
</body>
</html>
Related
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me.I have tried numerous times, it works with a single field data, but with multiple fields it fails. Thank you
first you created model popup add new button add submit so it submit form.
i have used for adding option into select something like.
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
option.text = "your text";
option.value = "your value"
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
var option = document.createElement("option");
var data = getFormData();
var text = data.address + data.street + " " + data.route + " " +data.city + " " +data.postcode
option.text = text;
option.value = "address"
select.add(option);
$('#myModal').modal('hide');
}
function getFormData(){
debugger;
var obj = new Object();
obj.address = document.getElementById("autocomplete").value;
obj.street = document.getElementById("street_number").value;
obj.route = document.getElementById("route").value;
obj.city = document.getElementById("locality").value;
obj.state = document.getElementById("administrative_area_level_1").value;
obj.postcode = document.getElementById("postal_code").value;
return obj;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
First thing, your are using button type="submit" it is going to post back, Just use <button onclick="addOption()">Add NEW</button>
Secondly the <form> either you remove model from <form> tag or use return false in addOption() function
Third use jquery map() function to collect all fields value in side addOption()
Check this code :
function getOption() {
var select = document.getElementById("dynamic-select");
if (select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption() {
var select = document.getElementById("dynamic-select");
var newListItem = $("#myModal input").map(function () { return $(this).val(); }).get();
select.options[select.options.length] = new Option(newListItem, '0', false, false);
$('#myModal').modal('toggle');
return false;
}
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *
</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="button" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Here is the new entered address in select :
function getOption(){
var select = document.getElementById("dynamic-select");
if(select.options.length > 0) {
var option = select.options[select.selectedIndex];
alert("Text: " + option.text + "\nValue: " + option.value);
} else {
window.alert("Select box is empty");
}
}
function addOption(){
var select = document.getElementById("dynamic-select");
select.options[select.options.length] = new Option('New Element', '0', false, false);
}
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.pac-container {
z-index: 10000 !important;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Shipping Method</h2>
<form>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="optradio" checked>Deliver To *</label>
</div>
</div>
<div class="form-group">
<select id="dynamic-select">
<option value="None">Select Shipping</option>
</select>
</div>
<div class="form-group">
<a data-toggle="modal" data-target="#myModal">Add Delivery Address</a>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Add your Delivery Details</h4>
</div>
<div class="modal-body">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Address</h3>
</div>
<div class="panel-body">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text" class="form-control">
<br>
<div id="address">
<div class="row">
<div class="col-md-6">
<label class="control-label">Street address</label>
<input class="form-control" id="street_number">
</div>
<div class="col-md-6">
<label class="control-label">Route</label>
<input class="form-control" id="route">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">City</label>
<input class="form-control field" id="locality">
</div>
<div class="col-md-6">
<label class="control-label">State</label>
<input class="form-control" id="administrative_area_level_1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label">Zip code</label>
<input class="form-control" id="postal_code">
</div>
<div class="col-md-6">
<label class="control-label">Country</label>
<input class="form-control" id="country">
</div>
</div>
</div>
<button type="submit" onclick="addOption()">Add NEW</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
I'm new to Javascript and in this example, basically I have created a Shipping Method Page. In the "ADD Delivery Address" link, on clicking there is a address form which needs to be filled out and after pressing the ADD NEW button, all the address form data should appear in the select menu option like in the picture below. But I'm unable to do so. Can someone please enlighten me on his. It would be a immense help to me. Thank you
This is line bug, id newopt don't exist in html.
var newopt = $('#newopt').val();
I have a contact form linked with form-to-email.php to send emails.
What happen is when you click submit it will redirect you to another page (new one) what I would like to have is to show/display the success message within the modal right after clicking the botton.
<div class="modal fade" id="modal-register" tabindex="-1" role="dialog" aria-labelledby="modal-register-label" aria-hidden="true">
<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" id="modal-register-label">اشتراك</h4>
</div>
<div class="modal-body">
<form method="post" name="myemailform" action="form-to-email.php">
<div class="row">
<div class="col-xs-12 input-group">
<input type="radio" name="form-busnisstype" value="company" id="company">
<label for="company">شركة</label>
<input type="radio" name="form-busnisstype" value="freelaancer" id="freelancer">
<label for="freelancer">مستقل</label>
</div>
<div class="col-xs-12 input-group">
<input type="text" name="form-name" id="name" placeholder="الاسم الكريم" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="email" name="form-email" id="email" placeholder="البريد الالكتروني" required="required">
</div>
<div class="col-xs-12 input-group">
<input type="tel" pattern="^[0-9]*$" name="form-phone" id="phone" placeholder="05xxxxxxxx" required="required">
</div>
<div class="col-xs-12 input-group">
<select name="form-officetype" id="officetype" required="required">
<option value="" disabled selected hidden="" >اختر مكتبك</option>
<option value="Gold">individual</option>
<option value="Silver">room</option>
<option value="Bronze">meeting</option>
<option value="Basic">orgonization</option>
</select>
</div>
<div class="col-xs-12 input-group">
<select name="form-membership" id="membership" required="required">
<option value="" disabled selected hidden="" >اختر باقتك</option>
<option value="Gold">Gold</option>
<option value="Silver">Silver</option>
<option value="Bronze">Bronze</option>
<option value="Basic">Basic</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-12 input-group input-group-icon">
<input placeholder="بداية الاشتراك" type="text" onfocus="(this.type='date')" id="booking" name="form-booking" required="required">
</div>
<div class="col-xs-12 input-group input-group-icon">
<select name="form-person" id="person" required="required">
<option value="" disabled selected hidden="" >كم عدد الاشخاص</option>
<option value="1">1 Person</option>
<option value="2">2 People</option><option value="3">3 People</option><option value="4">4 People</option><option value="5">5 People</option>
</select>
</div>
<textarea id="mep_msg" name="form-message" rows="" Placeholder="Comment" required="required"></textarea>
<input class="send_btn" type="submit" name='submit' value="submit">
</div>
</form>
<script language="JavaScript">
var frmvalidator = new Validator("myemailform");
frmvalidator.addValidation("name","req","Please provide your name");
frmvalidator.addValidation("email","req","Please provide your email");
frmvalidator.addValidation("tel","tel","Please enter a valid email address");
frmvalidator.addValidation("email","email","Please enter a valid email address");
</script>
</div>
</div>
</div>
</div>
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
and the form-to-email.php is the following:
<?php
/* Configuration */
$subject = 'Membership Enquiry'; // Set email subject line here
$mailto = 'email here'; // Email address to send form submission to
/* END Configuration */
$name = $_POST['form-name'];
$visitor_email = $_POST['form-email'];
$message = $_POST['form-message'];
$phone = $_POST['form-phone'];
$busnisstype = $_POST['form-busnisstype'];
$officetype = $_POST['form-officetype'];
$membership = $_POST['form-membership'];
$person = $_POST['form-person'];
$booking = $_POST['form-booking'];
// HTML for email to send submission details
$body = "
<br>
<p>The following information was submitted through the contact form on your website:</p>
<p><b>الاسم</b>: $name<br>
<b>الايميل</b>: $visitor_email<br>
<b>رقم الجوال</b>: $phone<br>
<b>نوع المشأة</b>: $busnisstype<br>
<b>المكتب المرغوب</b>: $officetype<br>
<b>العضوية</b>: $membership<br>
<b>عدد الاشخاص</b>: $person<br>
<b>التاريخ المتوقع لبدء الاشتراك</b>: $booking<br>
<p>ملاحضات اخرى: <b>$message</b></p>
";
$headers = "From: $name <$visitor_email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";
if (mail($mailto, $subject, $message, $headers)) {
header('Location: thank-you.html');
} else {
echo 'Form submission failed. Please try again...'; // failure
}
?>
You're redirecting to thank-you.html. Add there the code (with the success message) and if you want it to be a modal just add the modal code:
<!--Success pop up Starts-->
<div class="modal fade" id="success_msg" role="dialog" tabindex="-1">
<div class="success">
<div class="modal-dialog-success">
<div class="col-xs-12 pade_none">
<button type="button" class="close" onClick="closeConfirm();" data-dismiss="modal">×</button>
<div class="col-xs-12 pade_none">
<h2>Success!</h2>
<p>Your message has been sent.</p>
</div>
<div class="col-xs-12 pad_none">
</div>
</div>
</div>
</div>
</div>
<!--Success pop up ends-->
And launch a javascript when entering:
<body onload="myOnloadFunc();">
Your function should show modal:
function myOnloadFunc() {
$('#success_msg').modal('show');
}
You do two things either use AJAX to send request to form-to-email.php script or create hidden iframe with id="email" name="email" and use target="email" in form tag, it will open your php script in iframe and execute it but it will not redirect to that page, then you can use
document.getElementById('email').addEventListener('load', function() {
alert('Email Send Successfully');
});
instead of alert you can add toaster (green bar) to your modal.
PHP CODE
<?php session_start();
include('config/connect_database.php');
$Username = '';
if(isset($_POST['Login'])) {
$Username = mysqli_real_escape_string($conn, $_POST['Username']);
$Password = mysqli_real_escape_string($conn, $_POST['Password']);
$sql = "SELECT Username, Password, Authority FROM user WHERE Username LIKE '$Username' AND Status LIKE 'Active'";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0) {
$username = mysqli_fetch_assoc($result);
mysqli_free_result($result);
mysqli_close($conn);
if(($Username === $username['Username']) && (password_verify($Password, $username['Password']))) {
$_SESSION['Username'] = $_POST['Username'];
$_SESSION['Authority'] = $username['Authority'];
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
} else {
echo "<script>alert('Invalid Username or Password');</script>";
}
}
?>
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Management System</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
<?php if(isset($_SESSION['username'])){?>$('#modalNotification').modal();<?php } ?>
$('div.modal button').click(function(){ location.href='home.php'; });
});
</script>
</head>
<body>
<nav>
<a class="navbar-brand" href="#">
<img src="Source/pms_logo_blue.png" alt="Logo" style="width:50px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="register.php">Register</a>
</li>
</ul>
</div>
</nav>
<div class="modal fade" id="modalNotification" tabindex="-1" role="dialog" aria-labelledby="modalNotificationTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalNotificationTitle">NOTIFICATION</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>CONTENT</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center py-5">
<div class="col" style="max-width: 400px;">
<h3 style="text-align: center;">Flinken Production Management System</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col" style="max-width:400px;">
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="POST">
<div class="form-group">
<label>Enter Email</label>
<input type="email" name="Username" value="<?php echo htmlspecialchars($Username); ?>" class="form-control" required>
</div>
<div class="form-group">
<label>Enter Passsword</label>
<input type="password" name="Password" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" name="Login" value="True" class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
</div>
</div>
<footer class="section">
<div class="text py-5" style="text-align: center">Copyright </div>
</footer>
</body>
</html>
I'm new to angularJS and currently struggling to add an object from a form to an array. When I click the "Add New Product" it triggers the "newItemModal", I enter the new product information but submit button doesn't work. I need the new product to be added to my items array when I click on submit.
Also, when I fill out the new product under the "newItemModal" modal and I close the form to open the "editItemModal" using the button under the "Item Number" column, the form displays the same information I had entered under the "Add New Product" form.
HTML CODE
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Bodega Ilusion</title>
<!-- Bootstrap Core CSS -->
<link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../vendor/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8">
<h1 class="page-header">Inventario</h1>
</div>
</div>
<div class="row">
<div ng-controller="InventoryController as inventoryCtrl">
<div class="container">
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newItemModal">Add New Product</button>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-9"><br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-8">
<div class="dataTables_length" id="dataTables-example_length">
<label>Show
<select ng-model="rowLimit" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
</select> entries
</label>
</div>
</div>
<div class="col-sm-4">
<div id="dataTables-example_filter" class="dataTables_filter">
<label>Search:
<input ng-model="search" type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
<thead>
<tr role="row">
<th style="width: 50px;" ng-click="sortData('index')">Item Number</th>
<th style="width: 50px;" ng-click="sortData('code')">Code</th>
<th style="width: 250px;" ng-click="sortData('description')">Description</th>
<th style="width: 50px;" ng-click="sortData('in')">In</th>
<th style="width: 50px;" ng-click="sortData('out')">Out</th>
<th style="width: 50px;" ng-click="sortData('total')">Total</th>
</tr>
</thead>
<tbody>
<tr class="gradeA odd" role="row" ng-repeat="product in items | limitTo: rowLimit | filter: search">
<td class="text-center">
<i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="edit(product)"
data-toggle="modal" data-target="#editItemModal"></i>
<i class="fa fa-trash-o" aria-hidden="true" ng-click="delete(product)"></i>{{1+$index}}</td>
<td class="text-center">{{product.code}}</td>
<td class="text-left">{{product.description}}</td>
<td class="text-center">{{product.in}}</td>
<td class="text-center">{{product.out}}</td>
<td class="text-center">{{product.total}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editItemModal" 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">{{1+$index}}</h4>
</div>
<div class="modal-body">
<form name="myForm" novalidate>
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="inventoryCtrl.item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="inventoryCtrl.item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>
<div class="form-group">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="type" value="out">Out</label>
</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">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newItemModal" 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">Add New Product</h4>
</div>
<div class="modal-body">
<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="inventoryCtrl.item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="inventoryCtrl.item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<!-- <div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>-->
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- jQuery -->
<script src="../vendor/angular/angular.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../vendor/raphael/raphael.min.js"></script>
<script src="../vendor/morrisjs/morris.min.js"></script>
<script src="../data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- My AngularJS App -->
<script src="../js/app.js"></script>
</body>
</html>
AngularJS CODE
(function(){
var app = angular.module("inventory", []);
app.controller("InventoryController", function($scope){
$scope.product = {};
$scope.addProduct = function(product){
console.log("it worked")
$scope.product.createdOn = Date.now();
product.push($scope.product);
$scope.product = {};
};
$scope.items = [
{
code:"FD1",
description: "Happy valentines",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
},
{
code:"FD2",
description: "Happy Mothers Day",
in: 70,
out: 20,
total: 50,
createdOn: 1397490980837
},
{
code:"FD3",
description: "I Love You",
in: 100,
out: 30,
total: 70,
createdOn: 1397490980837
},
{
code:"FD4",
description: "Get Well",
in: 20,
out: 5,
total: 15,
createdOn: 1397490980837
},
{
code:"FD5",
description: "Happy Birthday",
in: 200,
out: 35,
total: 165,
createdOn: 1397490980837
},
{
code:"FD6",
description: "It's a Boy",
in: 50,
out: 10,
total: 40,
createdOn: 1397490980837
},
{
code:"FD7",
description: "It's a Girl",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
}
];
});
})();
Here you are pushing new product object in to product array, But you should push it into your $scope.items array
Try this one
$scope.addProduct = function(product){
console.log("it worked")
$scope.product.createdOn = Date.now();
$scope.items.push($scope.product);
$scope.product = {};
};
Make following changes and try,
<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(item)">
to
<form name="myForm" novalidate ng-submit="inventoryCtrl.addProduct(inventoryCtrl.item)">
in your controller,
after this line $scope.product = {}; add $scope.item= {};
change the function addProduct to
$scope.addProduct = function(product){
console.log("it worked")
product.createdOn = Date.now();
$scope.items.push(product);
};
I think there is no need of $scope.product in controller now.
currently i am trying to to a calendar using the full calendar plugin. Here is my code,
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='fullcalendar.css' rel='stylesheet' />
<link href='fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='moment.min.js'></script>
<script src='jquery.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
selectHelper: true,
select: function(start, end, jsEvent, view){
window.location = "testing.php";
},
});
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Currently, when i click on a date, the calendar redirect me to the test.php (which is what i wanted). Here nows the tricky part. How do i code it in a way that, For example, when the user pressed on january 10th, the details( which is in the database) will be echo out to that php. (testing.php).
Any suggestion on how my testing.php file should be done? sorry in advance if i happen to ask a stupid question.
To add on , it is somehow a feature which is similar to this http://www.w3schools.com/php/php_ajax_database.asp thank you in advance for any helpful tips.
You would probably need to append the start date as a url parameter in your window.location
...
select: function(start, end, jsEvent, ){
window.location = "testing.php?start=" + start;
},
Then on the php side you'd $_GET['start']
On the other hand, you could make an ajax post request in the select function.
I used a modal to pop-up when selecting a date from the calendar from which I supplied required values.
Script
select: function (start, end, allDay) {
$('#eventTitle').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#eventDescription').val('');
$('#eventType').val('');
$('#eventStart').val('');
$('#eventEnd').val('');
$('#myModal').modal();
$('#eventStart').val(moment(start).format('YYYY-MM-DD, HH:mm:ss'));
$('#eventEnd').val(moment(end).format('YYYY-MM-DD, HH:mm:ss'));
HTML
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create Event</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Title</label> <input type="text" name="eventTitle" id="eventTitle" class="form-control" />
</div>
</div>
<div class="form-group"><div class="col-sm-12">
<label class="label bg-primary">Description</label> <textarea name="eventDescription" id="eventDescription" class="form-control" rows="5"></textarea>
</div>
</div>
<div class="form-group"><div class="col-sm-6">
<label class="label bg-primary">Event Reason</label> <select id="eventType" class="form-control" name="event_type">
<option value="">---Select One---</option>
<option value="meeting">Meeting</option>
<option value="reminder">Reminder</option>
<option value="holiday">Holiday</option>
<option value="vacation">Vacation</option>
<option value="anniversary">Anniversary</option>
<option value="unsched">Unscheduled Leave</option>
<option value="sickleave">Sick Leave</option>
</select>
</div>
</div>
<label class="label bg-primary">Event Type</label>
<div class="form-group"><div class="col-sm-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active" >
<input type="radio" id="optionsRadio" name="quality[25]" checked="checked" value="false" /> Timed
</label>
<label class="btn btn-default" >
<input type="radio" id="optionsRadio" name="quality[25]" value="true" /> All Day
</label>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6">
<div class="form-group"><label class="label bg-primary">Start Date</label>
<div class="input-group date" id="datetimepicker1" >
<input type="text" class="form-control" id="eventStart"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-pull-2">
<div class="col-sm-6"><input type="text" class="form-control hidden" id="eventHide"/>
<div class="form-group"><label class="label bg-primary">End Date</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" id="eventEnd"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer"><button type="Submit" class="btn bg-primary" id="event_submit" onClick="addEvent()"><span><i class="glyphicon glyphicon-check"></i></span> Submit</button>
<button type="Reset" class="btn btn-default" data-dismiss="modal"><span><i class="glyphicon glyphicon-erase"></i></span> Close</button>
</div>
</div>
</div>
</div>
Note : Above code using Modal require bootstrap plug-ins