My data is not getting posted to the server in AngularJS - javascript

I have added all the scripts required. The services are in asp.net, I have added as well the HTTP POST method in web.config file.
HTML form:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/InsertSession.js"></script>
</head>
<body ng-app="myModule1">
<div ng-controller="mycontroller1">
<form class="form-horizontal style-form" name="myform" >
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event Title </label>
<div class="col-sm-10">
<input type="text" id="title" name="title" class="form-control" ng-model="title1">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Date of Event </label>
<div class="col-md-4">
<input class="form-control" type="date" id="eventdate" name="eventdate" ng-model="eventdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Time of Event </label>
<div class="col-md-4">
<input class="form-control" type="time" id="eventtime" name="eventtime" ng-model="eventtime">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event Location</label>
<div class="col-sm-10">
<input type="text" id="location" name="location" class="form-control" ng-model="eventlocation1">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-sm-2 control-label">Event description</label>
<div class="col-sm-10">
<input type="text" id="description" name=" description" class="form-control" ng-model="description1">
</div>
</div>
<div>
<button class="btn btn-theme btn-block" value="Create Event" ng-click="registereventdata()"> Submit </button>
</div>
</form>
<!--ng-click="registereventdata()" , ng-click="Insert(formdata)" ,type="submit"-->
</div>
</body>
</html>
AngularJS code:
var myapp = angular.module('myModule1', []);
myapp.controller("mycontroller1", function ($scope, $http,$window) {
$scope.registereventdata = function () {
$http({
method: 'POST',
url: 'WebService1.asmx/InsertSessionData',
headers: {
'content-type': 'application/json; charset=utf-8',
'datatype': 'json'
},
data: { Title: $scope.title1, Date: $scope.eventdate, Time: $scope.eventtime, Location: $scope.eventlocation1, Description: $scope.description1, CreatedDate: $scope.eventdate, Email: "xyz", IsActive: true, IsDelete: false }
}).then(function (response) {
if (response.data.d > 0) {
alert("event add successfully.");
}
else {
alert("opss!!!not register event..try again");
}
})
}
});

Related

Remove 'undefined' values from JSON in AJAX

I have a form that submits data to a GoogleSheet as JSON via AJAX.
I want to change it so that blank fields show as just empty rather than showing as undefined in the GoogleSheet.
Below is my code:
HTML Form:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png" alt="MooWoos Stall Booking"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<!-- BELOW ARE PAYPAL FIELDS FROM PAYPAL GENERATION -->
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" id="hosted_button_id" name="hosted_button_id" value="js_value">
<input type="hidden" name="currency_code" value="GBP">
<div class="form-group">
<label for="name">Name </label>
<input type="text" id="name" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address </label>
<textarea id="address" name="address" class="form-control" placeholder="Your Address" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number </label>
<input type="tel" id="phone" pattern="(([0]{1})|([\+][4]{2}))([1]|[2]|[3]|[7]){1}\d{9}$" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email </label>
<input type="email" id="email" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
Which date would you like to book?
<p></p>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active form-inline">
Will you be bringing a clothes rail?
<label class="stallLabel" for="c-rail-yes">Yes</label> <input type="radio" id=c-rail-yes name="c-rail" value="Yes" />
<label class="stallLabel" for="c-rail-no">No</label> <input type="radio" id=c-rail-no name="c-rail" value="No" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active form-control" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active form-control" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<br>
Do you have Public Liability Insurance?
<label class="insuranceLabel" for="insurance-yes">Yes</label> <input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/>
<label class="insuranceLabel" for="insurance-no">No</label> <input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/>
</div>
</div>
</div>
<div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</div>
</form>
<p></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
JS Code:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
$('#insurance-yes').attr('required', false).attr('disabled', true);
$('#insurance-no').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
$('#hosted_button_id').attr('value', '7L75UXEHSKFLG');
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
$('#hosted_button_id').attr('value', 'HFTF3KS5T2ETA');
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
$('#insurance-yes').attr('required', true).attr('disabled', false);
$('#insurance-no').attr('required', true).attr('disabled', false);
$('#hosted_button_id').attr('value', '48R67JG4F7H4J');
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
dataType: "json",
data: $form.serializeObject(),
beforeSend: function (key,value) {
return (value == undefined) ? "" : value
},
success: function () {
$('#redirect_page').modal('show');
$('#bookingForm').submit();
}
});
}
});
I have tried using beforeSend but this does not seem to have any effect.

Assuming there are no nested objects in your form, you can simply loop on your object elements before sending them
let jsObj = $form.serializeObject();
Object.keys(jsObj).forEach(key => {
jsObj[key] = jsObj[key] ? jsObj[key] : "";
})
Then you'll just have to send that object via AJAX :
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
dataType: "json",
data: jsObj,
beforeSend: function (key,value) {
return (value == undefined) ? "" : value
},
success: function () {
$('#redirect_page').modal('show');
$('#bookingForm').submit();
}
});
}
});

Formdata not getting populated

I currently have a webpage hitting a webservice to send multipart/form-data but somehow the fields are not getting appended into the formdata object. Could someone help me out ?
index.html
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>Sample upload</title>
<script type="text/javascript" src="webjars/jquery/3.2.1/jquery.min.js">
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script>
$(document).ready(function () {
$("#btnSubmit").click(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
fire_ajax_submit();
});
});
function fire_ajax_submit() {
// Get form
var form = $('#dataform')[0];
var data = new FormData(form);
data.append("CustomField", "This is some extra data, testing");
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/save",
data: data,
//http://api.jquery.com/jQuery.ajax/
//https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
processData: false, //prevent jQuery from automatically transforming the data into a query string
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
$("#result").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#result").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
}
</script>
</head>
<body>
<h1>SampleCardSubmit</h1>
<form id="dataform" method="POST" enctype="multipart/form-data">
<div class="panel panel-default">
<div class="panel-heading">
<h4>Section I:To be filled by Partner</h4>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-5 control-label">Partner Name:</label>
<div class="col-sm-5">
<input id="name" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Photograph of
applicant:</label>
<div class="col-sm-5">
<input id="photo" type="file" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner OLM ID:</label>
<div class="col-sm-5">
<input id="olmid" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Mobile
Number:</label>
<div class="col-sm-5">
<input id="mobile" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Email:</label>
<div class="col-sm-5">
<input id="email" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Disability:</label>
<div class="col-sm-5">
<select id="disabibilty" class="form-control">
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Partner Company Name:</label>
<div class="col-sm-5">
<input id="company" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">Name of Partner on
Company ID:</label>
<div class="col-sm-5">
<input id="nameoncard" type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="col-sm-5">
<input id="btnSubmit" type="submit" class="btn btn-primary"/>
</div>
</div>
</div>
</div>
</form>
<h1>Ajax Post Result</h1>
<span id="result"></span>
</body>
</html>
Controller
#RestController
public class CardController {
#Autowired
private CardService cardService;
#RequestMapping(value="/save", method = RequestMethod.POST)
public ResponseEntity<?> multiUploadFileModel(#ModelAttribute Card card) {
cardService.saveCard(card);
return new ResponseEntity("Successfully uploaded!", HttpStatus.OK);
}
}
Model
#Entity
public class Card {
#Id
#GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String name;
private Blob photo;
#Column(unique=true)
private String olmId;
private String mobileNumber;
private String email;
private String disability;
private String partnerCompany;
private String nameOnCompanyCard;
Request Payload on clicking the submit button is this:
------WebKitFormBoundary1NqBHFrbwUgHBc7g
Content-Disposition: form-data; name="CustomField"
This is some extra data, testing
------WebKitFormBoundary1NqBHFrbwUgHBc7g--
Comments regarding handling on the backend are also appreciated.
Help please!!

As provided in my comment, you had forgotten the "name" parameter in your <input>, <select>, etc.
This causes the fields and their data not to be added to the resulting POST (since the browser doesn't know what to do with it).

You can try this below logic by adding x-www-form-urlencoded in the header and adding your data as shown below. Let me know if it works out for you.
$.ajax({
type: "POST",
url: "/save",
headers: {
'Content-Type': 'appliation/x-www-form-urlencoded',
'Authorization': 'Basic VGV.... Uy' // Add authorization if required
},
data: {
"CustomField", "This is some extra data, testing",
..... // More attributes if any
},
timeout: 600000,
success: function (data) {
$("#result").text(data);
console.log("SUCCESS : ", data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#result").text(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});

Issue with jQuery validate not working against element

I am having an issue using jQuery validate against a form in a current project.
I am sure it is a typo I am missing or something small, but can't sem to figure out why it is occurring.
The error I am getting in the console debugger is: Object doesn't support property or method 'validate'
The bundle configuration file:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/custom").Include(
"~/Scripts/ContactForm.js"));
The code snippets are below:
<form action="#Url.Action("UpdateContactInformation", "ContactController")" method="post" role="form" class="form-horizontal" id="contactForm">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<!-- First Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input class="form-control" id="id_firstName" maxlength="75" name="txtFirstName" placeholder="First Name" required="required" title="" type="text" />
</div>
</div>
<!-- Last Name Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input class="form-control" id="id_lastName" maxlength="75" name="txtlastName" placeholder="Last Name" required="required" title="" type="text" />
</div>
</div>
<!-- Title Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-4">
<input class="form-control" id="id_title" maxlength="75" name="txtTitle" placeholder="Title" required="required" title="" type="text" />
</div>
</div>
<!-- Address Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Address</label>
<div class="col-md-4">
<input class="form-control" id="id_address" maxlength="75" name="txtAddress" placeholder="Address" required="required" title="" type="text" />
</div>
</div>
<!-- City Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">City</label>
<div class="col-md-4">
<input class="form-control" id="id_city" maxlength="75" name="txtCity" placeholder="City" required="required" title="" type="text" />
</div>
</div>
<!-- State Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">State</label>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuStates" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="statesDropDownMenu" aria-labelledby="dropdownMenuStates">
</ul>
</div>
</div>
</div>
<!-- Zip Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">ZipCode</label>
<div class="col-md-4">
<input class="form-control" id="id_zipCode" maxlength="75" name="txtZipCode" placeholder="ZipCode" required="required" title="" type="number" />
</div>
</div>
<!-- Email Primary Form Field-->
<div class="form-group required">
<label class="col-md-2 control-label">Email Primary</label>
<div class="col-md-4">
<input class="form-control customEmail" id="id_emailPrimary" maxlength="75" name="txtEmailPrimay" placeholder="Email Primary" required="required" />
</div>
</div>
<!-- Email Secondary (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailSecond" maxlength="75" name="txtEmailSecond" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<!-- Email Third (optional) Form Field-->
<div class="form-group">
<label class="col-md-2 control-label">Email (Optional)</label>
<div class="col-md-4">
<input class="form-control" id="id_emailThird" maxlength="75" name="txtEmailThird" placeholder="Email (Optional)" title="Email (Optional)" type="email" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-user"></span> Submit Contact Info
</button>
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval");
#Scripts.Render("~/bundles/custom"); //contains the file I am trying to add $.validate.AddMethod() to
Here is the code for Contact.js
$.validator.addMethod(
"customEmail",
function (value, element) {
var re = new RegExp("/^#{0,2}\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*#{0,2}​‌‌​​$/");
return this.optional(element) || re.test(value);
},
"Please enter a valid email address."
);
$(document).ready(function () {
console.log("Were here.........");
// populateStatesDropDown();
$('#contactForm').validate({ // initialize the plugin
rules: {
txtZipCode: {
required: true,
numeric: true
},
txtEmailPrimay: {
required: true,
customEmail:true
},
txtEmailSecond:{
required:false,
customEmail:true,
},
txtEmailThird: {
required: false,
customEmail:true
}
}
});
populateStatesList();
});
function populateStatesList() {
var url = "Contact/GetStates"; // Don't hard code your url's!
//$("#province_dll").change(function () {
var $statesDropDownMenu = $("#statesDropDownMenu"); // Use $(this) so you don't traverse the DOM again
var listItems = '';
$.getJSON(url, function (response) {
$statesDropDownMenu.empty(); // remove any existing options
console.log(response);
$.each(response, function (index, item) {
console.log("Now - " + item);
listItems += "<li>" + item + "</li>";
});
$statesDropDownMenu.html(listItems);
});
//});
}

You have an extra comma.
txtEmailSecond:{
required:false,
customEmail:true, // Here
},

angularjs validation and radio button default selection not working

Here is my code:
<form class="form-horizontal"
name="commentForm"
ng-submit="submitComment()"
novalidate>
<div class="form-group"
ng-class="{ 'has-error has-feedback' : commentForm.name.$invalid && !commentForm.name.$pristine }">
<label for="name" class="col-sm-2 control-label">Your name</label>
<div class="col-sm-10">
<input type="text"
name="name"
class="form-control"
placeholder="your name"
ng-model="comment.name"
id="name">
<span class="help-block"
ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">
Name required
</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label" > Rating </label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value"
ng-value="{{star.value}}"
ng-model="comment.rating"
ng-checked="isSelected(star.value)">
{{star.value}}
</label>
</div>
</div>
<div class="form-group" ng-class="{'has-error has-feedback':comment.textComments.$error.required && !comment.textComments.$pristine}">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
here's my script
.controller('DishCommentController', ['$scope', function($scope) {
var stars=[
{value:"1"},
{value:"2"},
{value:"3"},
{value:"4"},
{value:"5"}
];
$scope.isSelected = function(checkStar){
console.log(checkStar==5);
return checkStar==5;
};
$scope.stars=stars;
$scope.comment={name:"",rating:"",textComments:"",date:""};
$scope.submitComment = function () {
$scope.comment.date=new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
$scope.dish.comments.push("Your JavaScript Object holding the comment");
}
}]);
please someone help me on this

You're missing 'required' attribute in your input fields and you're trying to access property of undefined object '$scope.dish.comments'.
See code below:
(function() {
'use strict';
angular.module('app', []).controller('DishCommentController', DishCommentController);
function DishCommentController($scope) {
var stars = [{
value: "1"
}, {
value: "2"
}, {
value: "3"
}, {
value: "4"
}, {
value: "5"
}
];
$scope.isSelected = function(checkStar) {
console.log(checkStar == 5);
return checkStar == 5;
};
$scope.stars = stars;
//select default values here
$scope.comment = {
name: "",
rating: 4,
textComments: "",
date: ""
};
$scope.submitComment = function() {
$scope.comment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
// $scope.dish.comments.push("Your JavaScript Object holding the comment");
};
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="DishCommentController">
<form name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group">
<label for="name">Your name</label>
<div>
<input type="text" name="name" class="form-control" placeholder="your name" ng-model="comment.name" id="name" required>
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Name required</span>
</div>
</div>
<div class="form-group">
<label for="radio" class="col-sm-2 control-label">Rating</label>
<div class="col-sm-10">
<label class="radio-inline" ng-repeat="star in stars">
<input type="radio" name="star.value" ng-value="{{star.value}}" ng-model="comment.rating" ng-checked="isSelected(star.value)">{{star.value}}
</label>
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Your comments</label>
<div class="col-sm-10">
<textarea rows="12" class="form-control" name="textComments" id="comments" ng-model="comment.textComments" required placeholder="your comments">
</textarea>
<span class="help-block" ng-show="comment.textComments.$error.required && !comment.textComments.$pristine">comments Required</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit</button>
</div>
</div>
</form>
</body>
</html>

jQuery validation - check if two passwords are equal

I am having some problems here, I have simple bootstrap form for change password integrated to my design and I want to validate it with jQuery.
What I want is simple, check if both passwords are same, and if not, display some error message.
My HTML looks like:
<div class="container">
<div class="row vertical-center">
<br>
<div class="col-md-6 col-md-offset-3">
<br>
<form role="form" action="" method="post">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
</div>
</div>
</div>
And I am trying to add something like:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
Same script work perfect for me on my other code, so it looks i am blind or I don't know where I making a mistake!
Guys can somebody of you without watching to my code for days look at this and tell me what I am doing wrong?
THANKS!!

This worked for me:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<div class="form-group">
<label for="exampleInputEmail1">Meno (email)</label>
<input class="form-control" id="disabledInput" type="text" placeholder="my#email.com" disabled>
</div>
<div class="form-group">
<label for="text">Staré heslo</label>
<input type="password" class="form-control" id="exampleInputEmail1" placeholder="Vložťe vaše aktuálne heslo" name="password-old">
</div>
<div class="form-group">
<label for="password">Nové heslo</label>
<input type="password" class="form-control" id="password" placeholder="Vložťe vaše nové heslo" name="password">
</div>
<div class="form-group">
<label for="password_again">Again</label>
<input type="password" class="form-control" id="password_again" placeholder="Vložťe znova vaše nové heslo" name="password_again">
</div>
<button type="submit" class="btn btn-default">Zmeniť heslo</button>
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$("#myform").validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
</body>
</html>

Categories

Resources