Days in current view into select control (DHTMLX Scheduler) - html

I"m trying to list the days shown in the current view as options inside a select tag (for example if the current view has Sun Aug 13th through Sat Aug 19th, then each of those days would appear as part of the select dropdown).
On the client-side I can get the min and max days of the current view via scheduler.getState().min_date and scheduler.getState().max_datebut I'm not sure how to get this same information inside my EJS tempalte below and iterate over the days:
<!doctype html>
<head>
<title>MealMate</title>
<script src="codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.11/semantic.min.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.first_hour = 7;
scheduler.config.last_hour = 19;
scheduler.config.start_on_monday = false;
scheduler.init('scheduler_here',"","week");
scheduler.templates.xml_date = function(value) { return new Date(value); };
scheduler.load("/calendar/data", "json");
var dp = new dataProcessor("/calendar/data");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div class="ui form" id="addForm">
<div class="inline field">
<label for="date">Date:</label>
<select class="ui dropdown" name="date" id="date">
<option selected disabled hidden>Choose one</option>
//ITERATION OF DAYS IN CURRENT VIEW HERE//
</select>
</div>
<div class="inline fields">
<input type="button" name="save" value="Save" id="save" style='width:100px;' onclick="save_form()">
<input type="button" name="close" value="Close" id="close" style='width:100px;' onclick="close_form()">
<input type="button" name="delete" value="Delete" id="delete" style='width:100px;' onclick="delete_event()">
</div>
</div>
<div id="scheduler_here" class="dhx_cal_container">
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
<div class="dhx_cal_tab ui blue button" id="addButton" name="add"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
<script src="/calendarLogic.js"></script>
</body>
if I try to do something like this <%= scheduler.getState().min_date %> I get scheduler is undefined.


I'm not sure if you can do it at the template level. I think the simplest solution would be to have an empty element in the template and populate it with options using client-side JS.
Try capturing onViewChange or onBeforeViewChange events of scheduler - they fire when the user changes scheduler view or date. Inside the handler, you can get the displayed date range and generate options for your dropdown.
You can use scheduler.date helper in order to iterate over days, here is a demo (see HTML tab):
http://snippet.dhtmlx.com/afbdc33fb
related API:
https://docs.dhtmlx.com/scheduler/api__scheduler_onviewchange_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforeviewchange_event.html
https://docs.dhtmlx.com/scheduler/api__scheduler_date_other.html

Related

Saving the value of a checkbox in an array when clicked (jQuery)

I'm trying to make a joke generator. The user can choose between Programming, Miscellaneous and Dark jokes (or two / all of them but cannot choose none). Right now, for my Javascript and HTML, I have this:
$("#first-input").val("Programming");
$("#middle-input").val("Miscellaneous");
$("#bottom-input").val("Dark");
let checkboxes = $(".content-top input[type=checkbox]");
let submitButton = $("button[type=submit]");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
The HTML I have right now are three checkboxes with the same name attribute, but with different values set (values were set in Javascript above). How do I use jQuery to make it so that once the submit button is clicked, there is an array, and the items in the array are the ones the user checked?
So for example:
If the user selects the "Programming", "Miscellaneous" and "Dark" check boxes, the array would have the 3 items (the three items would be "Programming", "Miscellaneous" and "Dark"). Then if the user proceeds to uncheck the "Dark" checkbox (so now only the "Programming" and "Miscellaneous" checkboxes are checked), the array would also remove the "Dark" item and would now only have 2 items.
I've been trying a lot of things and searching on Google, and tried using "input:checked", is(), etc. but I couldn't figure out how to get it to work.
Question:
How do I get an array, and the items in the array are the values of the checkboxes the user checked (e.g. "Programming", "Dark", etc.) with no repeats, and if the user, for example, initially selected all three checkboxes, and then proceeds to uncheck the "Dark" checkbox, the array should also remove "Dark" as one of it's items.
I've been stuck on this for hours and would really appreciate any help, thanks!

First, change your checkboxes to declare their values in the HTML:
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
Add the following onclick attribute to your submit button:
<button type="submit" onclick="submit(event)">Generate Joke</button>
Then add the following script tag after your inclusion of jQuery:
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I added the event.preventDefault() thing so that the form doesn't actually send anything to the server. It seems like you'll need that if you want to do things in JS first.
The whole thing should look like this:
<form id="form" action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top">
<input type="checkbox" name="category" id="first-input" value="programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="dark">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit" onclick="submit(event)">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
window.submit = event => {
event.preventDefault();
let checkedValues = Array.from($('input:checked')).map(input => input.value);
// ... looks like, e.g., ["programming", "miscellaneous"]
// ... do stuff with checkedValues here...
console.log(checkedValues);
};
</script>
I don't think you need those few lines of JS at the top of your question.

Add the value attribute to your inputs then get all checkboxes iterate through them then push the values to the array, the elements in the array will be removed each time you click submit which means you will always get the new values checked by the user pushed to the result array
results = []
let submitButton = $("button[type=submit]");
submitButton.click(function(e) {
var $checkboxes = $('input[name=category]:checked');
e.preventDefault()
results.splice(0,results.length)
$checkboxes.each(function(){
results.push($(this).val())
});
console.log(results)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Joke</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form action="/joke" method="POST">
<div class="section">
<label><span>*</span> Select a category / categories:</label>
<div class="content content-top" id="checkb">
<input type="checkbox" name="category" id="first-input" value="Programming">
<h5>Programming</h5>
<br>
<input type="checkbox" name="category" id="middle-input" value="Miscellaneous">
<h5>Miscellaneous</h5>
<br>
<input type="checkbox" name="category" id="bottom-input" value="Dark Jokes">
<h5>Dark Jokes</h5>
</div>
</div>
<button type="submit">Generate Joke</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

I don't do jQuery for years, but if you want to sent an array you have to ending element's names with [] and set a value for each.
here it is in javascript
const DomParser = new DOMParser()
, myForm = document.getElementById('my-form')
;
function newCategory(val)
{
let elm = `<input type="hidden" name="category[]" value="${val}">`
return DomParser.parseFromString( elm, 'text/html').body.firstChild
}
myForm.oninput=()=>
{
while (el=myForm.querySelector('input[name="category[]"]')) el.remove();
myForm.querySelectorAll('input[data-category]:checked').forEach(el=>
{
myForm.appendChild( newCategory( el.dataset.category ) )
})
}
label, button {
display: block;
float: left;
clear: both;
}
button { margin-top: 1em;}
<form id="my-form" action="/joke" method="POST">
<label>
<input type="checkbox" data-category="Programming">
Programming
</label>
<label>
<input type="checkbox" data-category="Miscellaneous">
Miscellaneous
</label>
<label>
<input type="checkbox" data-category="Dark Jokes">
Dark Jokes
</label>
<button type="submit">Generate Joke</button>
</form>

HTML FORM- validate one field against another field value at browser (client) level

I have two DATE fields in a standard HTML form (startdate) and (enddate)
<form method="POST" action="processform.php" target="_top">
<span>▶</span><select class="selectdate" name="startdate" required>
<option value='2019-12-31'>Tue, 31-Dec-19</option><option value='2019-12-30'>Mon, 30-Dec-19</option><option value='2019-12-27'>Fri, 27-Dec-19</option><option value='2019-12-26'>Thu, 26-Dec-19</option><option value='2019-12-24'>Tue, 24-Dec-19</option><option value='2019-12-23'>Mon, 23-Dec-19</option><option value='2019-12-20'>Fri, 20-Dec-19</option><option value='2019-12-19'>Thu, 19-Dec-19</option><option value='2019-12-18'>Wed, 18-Dec-19</option><option value='2019-12-17'>Tue, 17-Dec-19</option><option value='2019-12-16'>Mon, 16-Dec-19</option><option value='2019-12-13'>Fri, 13-Dec-19</option><option value='2019-12-12'>Thu, 12-Dec-19</option><option value='2019-12-11'>Wed, 11-Dec-19</option><option value='2019-12-10'>Tue, 10-Dec-19</option><option value='2019-12-09'>Mon, 09-Dec-19</option><option value='2019-12-06'>Fri, 06-Dec-19</option><option value='2019-12-05'>Thu, 05-Dec-19</option><option value='2019-12-04'>Wed, 04-Dec-19</option><option value='2019-12-03'>Tue, 03-Dec-19</option><option value='2019-12-02'>Mon, 02-Dec-19</option><option value='2019-11-29'>Fri, 29-Nov-19</option> </select>
<span>▶</span><select name="enddate" required>
<option value='2020-01-03'>Fri, 03Jan20</option><option value='2020-01-10'>Fri, 10Jan20</option><option value='2020-01-17'>Fri, 17Jan20</option><option value='2020-01-24'>Fri, 24Jan20</option><option value='2020-01-31'>Fri, 31Jan20</option><option value='2020-02-07'>Fri, 07Feb20</option><option value='2020-03-13'>Fri, 13Mar20</option><option value='2020-03-20'>Fri, 20Mar20</option><option value='2020-03-27'>Fri, 27Mar20</option><option value='2020-04-03'>Fri, 03Apr20</option><option value='2020-04-09'>Thu, 09Apr20</option><option value='2020-06-12'>Fri, 12Jun20</option><option value='2020-06-19'>Fri, 19Jun20</option><option value='2020-06-26'>Fri, 26Jun20</option><option value='2020-07-02'>Thu, 02Jul20</option><option value='2020-07-09'>Thu, 09Jul20</option><option value='2020-12-11'>Fri, 11Dec20</option><option value='2020-12-18'>Fri, 18Dec20</option><option value='2020-12-24'>Thu, 24Dec20</option><option value='2020-12-30'>Wed, 30Dec20</option><option value='2021-01-07'>Thu, 07Jan21</option> </select>
<input type="submit" value="Submit">
</form>
All I wish is to check if the user selected startdate must be less than the selected enddate at the BROWSER level (not at the server).
If selected startdate is greater than or equal to the selected enddate, it should show an error without actually submitting the form. The form should be submitted only if the startdate is less than the enddate.
While I was able to get it working on the server side using PHP, I am unable to make it work at the browser level (possibly javascript which I am not very conversant with).
Any inputs on how this can be achieved?
This is the code I am trying but it is showing "valid date range" for all cases:
const first = document.getElementsByName('startdate')[0];
first.addEventListener('change', function() {
console.log(first.value);
});
const second = document.getElementsByName('enddate')[0];
second.addEventListener('change', function() {
console.log(second.value);
});
if (first.valueOf() > second.valueOf()) {
alert("date is not in valid range");
}else{
alert("date is in valid range");
return true;
}
Thanks

You'll have to use JavaScript for any client-side validations. You can make the PHP call from the JavaScript side.
You can validate date in JavaScript like:
(from here)
function validation(form) {
var v2 = document.getElementById('v2'),
date = new Date(v2.value),
d1 = date.getTime(),
d2 = new Date('12/12/2012').getTime(),
d3 = new Date('1/1/2013').getTime();
if (d1 > d2 || d1 < d3) {
return true;
}else{
alert("date is not in valid range")
}
}

It might seem like a complicated task, but you can actually divide it into more manageable chunks:
Listen to changes in the form fields' values.
Validate the new values, then either allow them or do something else (i.e. show an error message).
For (1) I'd suggest you use JS. For example:
const first = document.getElementsByName('startdate')[0];
first.addEventListener('change', function() {
console.log(first.value);
});
const second = document.getElementsByName('enddate')[0];
second.addEventListener('change', function() {
console.log(second.value);
});
<form method="POST" action="processform.php" target="_top">
<span>▶</span>
<select class="selectdate" name="startdate" required>
<option value='2019-12-31'>Tue, 31-Dec-19</option>
<option value='2019-12-30'>Mon, 30-Dec-19</option>
</select>
<span>▶</span>
<select name="enddate" required>
<option value='2020-01-03'>Fri, 03Jan20</option>
<option value='2020-01-10'>Fri, 10Jan20</option>
</select>
<input type="submit" value="Submit">
</form>
And then you can take it further and use the listeners' functions to actually compare the two dates.
As a side note, I also encourage you to use JS in order to produce those (too) similar <option> tags. Something like this:
const startDateElement = document.getElementsByName('startdate')[0];
const startDates = ['2019-12-31', '2019-12-30', '2019-12-27']; // etc.
startDates.forEach((date) => {
const newOption = document.createElement('option');
newOption.setAttribute('value', date);
newOption.innerHTML = date;
startDateElement.appendChild(newOption);
});
// And the same for end date
<form method="POST" action="processform.php" target="_top">
<span>▶</span>
<select class="selectdate" name="startdate" required>
</select>
</form>
Then your code will be much more generic, hence easier to read, maintain and update in the future.

The functionality helps to track the user selection from start date and time to the end date and time on the client side. PHP will evaluate on the server side (Not preferable)
The user may not be able to select the end date previous of the start date.
Here is the link given below with example
DEMO - https://jsfiddle.net/ssuryar/vr1zd8ep/
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
</head>
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker7'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
</html>

return a json from my html page

I have created a HTML code to build an user form that will contain information that people write inside the texts. This page also has a button that should take all the entered information and convert it into a json file.
I have never done this before, so I have no idea how I can do that. As far as I read, I understand that I need a local server to send the html code to it so it can return the json, but the process to do this is absolutely unclear for me.
My code in html is this:
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post">
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>
Then, when I click on the button "Get my data" it does nothing.
Can you give me the process to capture the json from this?
Many thanks!

As you did not mention any specific JSON structure I think below code will work for you. You will have to customize based on your needs.
I will recommend you to find and check different javascript libraries and see what suits you best for your client side application.(jQuery is easiest to learn)
Also check if it is a REST server. Based on that decide on your client side javascript framework. (Angular is good choice for REST based applications)
function onSubmitForm( myForm ){
var formjson = JSON.stringify( $(myForm).serializeArray() ); // <-----------
console.log( formjson );
return false;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<header>
<h1>My Promo</h1>
<h2>Get insights out of an endless see of data...</h2>
<link rel="stylesheet" href="mycss.css">
</header>
<form action="http://localhost/" method="post" class="myform" onsubmit='return onSubmitForm(this)'>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">What is your banner?*</label>
<input type="text" name="banner" />
</div>
<!-- Input label -->
<div class="formgroup" id="name-form">
<label for="name">Name of current promo*</label>
<p>(write a short name, e.g: "DPE17")</p>
<input type="text" name="CurrentPromo" />
</div>
<div class="submit">
<input type="submit" value="Get my data" />
</div>
</form>
</html>

Calculation result not displaying after user input HTML

I'm completing an assignment in HTML where we're supposed to create a page that uses at least one function to perform a mathematical calculation based on user input. I've got the code written below, but when I hit the "calculate" button I've coded in, nothing displays on the screen. Could someone tell me what I'm doing wrong? Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<Title>Goals Against Average Calculator</Title>
<body>
<script src="modernizr.custom.05819.js"></script><!--Links to file containing modernizer library-->
<!-- Navigation -->
<nav>
<ul class="w3-navbar w3-black">
<li>Home</li> <!--Link to Home Page-->
<li>NHL Teams</li><!--Link to Page of NHL Teams-->
<li>AHL Teams</li><!--Link to Page of AHL Teams-->
<li>WHL Teams</li><!--Link to Page of WHL Teams-->
<li>G.A.A. Calculator</li><!--Link to Page of WHL Teams-->
</ul>
</nav>
<header>
<h1 style="text-align:center;">Goals Against Average Calculator</h1><!--Title of Page-->
</header>
<article>
<form>
<fieldset>
<label for="GoalsAllowed">
Enter Number of Goals Allowed
</label>
<input type="Goals" id="GoalsAllowed" /><!--Input for Goals Allowed-->
</fieldset>
<fieldset>
<label for="MinutesPlayed">
Enter Minutes Played
</label>
<input type="MinPlayed" id="MPlayed" /><!--Input for Minutes Played-->
</fieldset>
<fieldset>
<label for="GameLength">
Regulation Game Length
</label>
<input type="Minutes" id="MinGame" /><!--Input for Length of Regulation Game-->
</fieldset>
<fieldset>
<button type="button" id="button">Calculate</button><!--Calculation Button-->
</fieldset>
<fieldset>
<p>Goals Against Average</p>
<p id="GAA"> </p>
</fieldset>
</form>
</article>
<script>
function convert() {
var Goals = document.getElementById("GoalsAllowed").value;
var Minutes = document.getElementById("MinutesPlayed").value;
var GameLength = document.getElementById("GameLength").value;
var GAA = (Goals * GameLength) / Minutes;
document.getElementById("GAA").innerHTML = GAA;
}
document.getElementById("button").
addEventListener("click", convert, false);
</script>
</body>
</html>

You do not have inputs with IDs MinutesPlayed and GameLength. There is an error that you cannot access property value of null.
Your JavaScript code should look as follow:
function convert() {
var Goals = document.getElementById("GoalsAllowed").value;
var Minutes = document.getElementById("MPlayed").value;
var GameLength = document.getElementById("MinGame").value;
var GAA = (Goals * GameLength) / Minutes;
document.getElementById("GAA").innerHTML = GAA;
}

you can have another alternative here using jQuery
you can include it locally by downloading the file or use google CDN as shown below
<!DOCTYPE html>
<html>
<head>
<title>Enjoy</title>
</head>
<body>
<article>
<form>
<fieldset>
<label for="GoalsAllowed">
Enter Number of Goals Allowed
</label>
<input type="Goals" id="GoalsAllowed" /><!--Input for Goals Allowed-->
</fieldset>
<fieldset>
<label for="MinutesPlayed">
Enter Minutes Played
</label>
<input type="MinPlayed" id="MPlayed" /><!--Input for Minutes Played-->
</fieldset>
<fieldset>
<label for="GameLength">
Regulation Game Length
</label>
<input type="Minutes" id="MinGame" /><!--Input for Length of Regulation Game-->
</fieldset>
<fieldset>
<button type="button" id="button">Calculate</button><!--Calculation Button-->
</fieldset>
<fieldset>
<p>Goals Against Average</p>
<h1 id="GAA"> </h1>
</fieldset>
</form>
</article>
<!--
include a jquery file am using jquery-2.1.1.min.js
you can find a later version
-->
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var number_of_goals, minutes_played, regulation_game_length, GAA = ""; //initialize all the variables that we are going to use
$(document).on('click','#button', function(e){ //this is to check if the button with id button has been clicked
e.preventDefault(); //here you prevent its default action so that it does not refresh the page
number_of_goals = $('#GoalsAllowed').val(); //get the value entered for the number of goals
minutes_played = $('#MPlayed').val(); //get the value entered for the minutes played
regulation_game_length = $('#MinGame').val(); //capture the regulation game length
GAA = (number_of_goals * regulation_game_length) / minutes_played; //compute using your formular based on the values you have captured
$('#GAA').html(GAA); //print the result in your h1 tag that has id GAA
});
</script>
</body>
</html>

$resource.save is not functioning

I am a novice developer of angularJs.
Working on some tutorials and facing the following problem now.
This is my view.
<!DOCTYPE html>
<html lang="en" ng-app="eventsApp">
<head>
<title>Event Registry</title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="css/app.css"/>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-cloak>
<div id="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li> Add Event
</ul>
</div>
</div>
<div ng-controller="EditEventController">
<div class="container">
<h1>New Event</h1>
<hr/>
<form name="editEventForm">
<fieldset>
<label for="eventname">Event Name :</label>
<input id="eventname" type="text" ng-model="event.name" placeholder="Enter your Event Name"/>
<label for="eventdate">Event Date :</label>
<input id="eventdate" type="text" ng-model="event.date" placeholder="format is (dd/mm/yy)..."/>
<label for="eventtime">Event Time : </label>
<input id="eventtime" type="text" ng-model="event.time" placeholder="Enter the start time and end time"/>
<label for="eventlocation">Event Location :</label>
<input id="eventlocation" type="text" ng-model="event.location.address" placeholder="Enter the location of the event"/>
<br/>
<input id="eventstate" type="text" class="input-small" ng-model="event.location.state" placeholder="Enter the state of the location of the event"/>
<input id="eventcountry" type="text" class="input-small" ng-model="event.location.country" placeholder="Enter the country of the location of the event"/>
<br/>
<label for="eventImageUrl">Image Url:</label>
<input id="eventImageUrl" type="url" class="input input-xlarge" ng-model="event.imageUrl" placeholder="enter the image url"/>
</fieldset>
<img ng-src="{{event.imageUrl}}" src=""/>
<br/>
<br/>
<button type="submit" class="btn btn-primary" ng-click="savestatus(event,editEventForm)">Save</button>
<button type="button" class="btn btn-default" ng-click="reset()">Cancel</button>
</form>
</div>
</div>
</div>
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery-ui.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/services/services.js"></script>
<script src="js/services/EventData.js"></script>
<script src="js/services/GravatarUrlBuilder.js"></script>
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/EventController.js"></script>
<script src="js/controllers/EditEventController.js"></script>
<script src="js/controllers/EditProfileController.js"></script>
<script src="js/app.js"></script>
<!--<script src="js/filters.js"></script>-->
</body>
</html>
and my controller is
angular.module('eventsApp.controllers').controller('EditEventController',function EditEventController($scope,eventData){
$scope.event={};
$scope.savestatus=function(event,form){
if(form.$valid){
eventData.save(event).
then(function(response){
console.log("success :",response);
},
function(response){
console.log("failure:",response);
});
};
} ;
$scope.reset=function(){
window.location='../app/EventList.html';
}
});
and the app.js file is
angular.module('eventsApp', [ 'ngSanitize' ,'eventsApp.controllers', 'eventsApp.services','ngResource'
])
and the services file i am using is:
angular.module('eventsApp.services').factory('eventData',function($resource,$q){
var resource= $resource('data/eventData/:id.json',{id:'#id'});
return{
getEventItem:function(){
var deferred=$q.defer();
resource.get({id:1},
function(eventItem){
deferred.resolve(eventItem);
},
function(response){
deferred.reject(response);
});
return deferred.promise;
} ,
save:function(event){
var deferred=$q.defer();
event.id=999;
resource.save(event,
function(response){
deferred.resolve(response);
},
function(response){
deferred.reject(response);
}
);
return deferred.promise;
}
};
}
) ;
When i am trying to save the input text details on click of the savestatus() button
I am unable to save them as a json file on the disk as shown in the tutorial I am referring to..
Whenever I have tried to save it I am getting the following error...
POST http://localhost:8000/app/data/eventData/999.json 501 (Not Implemented) angular.js:7073
failure: Object {data: "", status: 501, headers: function, config: Object}

I encountered this problem and solved my case. Here's how I did:
You have to modify your back-end (in my case: web-server.js
from angular-seed project, running with NodeJs) in order
to accept 'POST' method requests.
Then, when a POST request will be sent, you
must catch it (a simple 'if' would do the trick) and call a function
to handle it.
Finally, you have to write this function which will
catch the request data and do what you want with it (e.g. create a
JSON file and copy the data into it).
If you're also using NodeJs and maybe the web-server.js from angular-seed, here's what I've done : modified Web-server.js
Hope it will help you or someone else to avoid 501 errors!