I want to validate all the fields in my form using angularjs. All the other functionalities I wanted in my form are working fine, Its just the form validation which is not working at all. Since I am new to angularjs, I've tried almost everything and have no idea on what I am missing here.
Here is the code below
<div class="col-xs-9 col-xs-offset-1" ng-controller="DishCommentController">
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.author.$error.required && !commentForm.author.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="author" id="author" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.author.$error.required && !commentForm.author.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comment.$error.required && !commentForm.comment.$pristine}">
<label for="comment" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comment" name="comment" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comment.$error.required && !commentForm.comment.$pristine">Please Write a comment</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 Comment</button>
</div>
</div>
</form>
</div>
Javascript Code
'use strict';
angular.module('confusionApp', [])
.controller('DishCommentController', ['$scope', function($scope) {
$scope.dishComment = {author:"",rating:"5",comment:"",date:""};
$scope.submitComment = function () {
//Step 2: This is how you record the date
$scope.dishComment.date = new Date().toISOString();
// Step 3: Push your comment into the dish's comment array
if($scope.dishComment.comment == "") {
console.log = "incorrect"
}
else {
$scope.dish.comments.push($scope.dishComment);
$scope.dishComment = {author:"",rating:"",comment:"",date:"" };
$scope.commentForm.$setPristine();
}
}
}])
;
Related
I have multiple forms in a div. I would like to get the values of each form as an array of object in a single click.
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input type="text" class="form-control" id="usr" name="username" />
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lname" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" name="username" />
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender></p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="optradio"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="optradio"
/>Female
</label>
</div>
</div>
</form>
<button type="submit" class="btn btn-primary">Submit</button>
I would like to get the result where exh object has a key called form whose value is the form number and the another key called inputdata which is an object whose keys represnt the input numbers and value are input values:
[{
form:1,
inputdata:{1:"John",2:"John Doe"}
},
{
form:2,
inputdata:{1:"Jane",2:25,3:"female"}
}]
You can probably do the following:
One other option can be to serialize the form data and then get the value of form, but this would work as well
const form = document.querySelectorAll('form');
function submitForm() {
const data = [];
for(let i=0; i<form.length; i++) {
const elements = form[i].elements;
data.push({form: form[i].getAttribute('data-category'), inputData: {}});
for(let j=0; j<elements.length; j++) {
if(elements[j].type !== 'radio') {
data[i].inputData[[elements[j].name]] = elements[j].value;
} else {
if(elements[j].checked) {
data[i].inputData[[elements[j].name]] = elements[j].value;
}
}
}
}
console.log(data);
}
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input type="text" class="form-control" id="usr" name="firstName" />
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lastName" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr" name="firstName" />
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender></p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="M"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
valeu="F"
/>Female
</label>
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" onclick="submitForm()">Submit</button>
You may use FormData and Object.fromEntries to get the form data easily like below:
const btn = document.querySelector("#submit");
btn.addEventListener("click", () => {
const forms = document.querySelectorAll("form");
const output = [];
forms.forEach(form => {
output.push({
form: form.dataset.category,
inputData: Object.fromEntries(new FormData(form)),
});
});
console.log(output);
});
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<form data-category="1">
<div class="form-group">
<label for="usr">First Name:</label>
<input
type="text"
class="form-control"
id="usr"
name="username"
/>
</div>
<div class="form-group">
<label for="pwd">Last Name:</label>
<input type="text" class="form-control" id="pwd" name="lname" />
</div>
</form>
<form data-category="2">
<div class="form-group">
<label for="usr">Name:</label>
<input
type="text"
class="form-control"
id="usr"
name="username"
/>
</div>
<div class="form-group">
<label for="usr">Age:</label>
<input type="number" class="form-control" id="usr" name="age" />
</div>
<div>
<p>Gender</p>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="1"
/>Male
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input
type="radio"
class="form-check-input"
name="gender"
value="0"
/>Female
</label>
</div>
</div>
</form>
<button id="submit" type="button" class="btn btn-primary">
Submit
</button>
</body>
</html>
The code below works fine without the use of the FORM tag.
But after I add the FORM tag, the code does not work anymore.
My code:
function ismcstop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Just rename ismcstop() function name like below
function ismcsfortop() {
var chkNo = document.getElementById("radio2_ismcstop");
var mcnostopreason = document.getElementById("mcnostopreason");
mcnostopreason.disabled = chkNo.checked ? false : true;
if (!mcnostopreason.disabled) {
mcnostopreason.focus();
}
}
<form action="" method="post">
<div class="row">
<div class="col-4">
<div class="container">
<label for="ismcstop">Machine Stop?</label>
<div class="form-check-inline">
<label class="form-check-label" for="radio1_ismcstop">
<input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
</label>
</div>
<div class="form-check-inline">
<label class="form-check-label" for="radio2_ismcstop">
<input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
</label>
</div>
</div>
</div>
<div class="col-2">
<label for="mcnostopreason">If No, Reason:</label>
</div>
<div class="col-6">
<input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
</div>
</div><br>
</form>
Change the name of the label to something else other than ismcstop. I think it is overridden the function.
<label for="ismcstopLabel">Machine Stop?</label>
OR
Change the function name ismcstop() to ismcstopFunc()
My form is
<form id="enquiryBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<div class="modal-body brbottom-20">
<div class="clearfix">
<div class="col-lg-6">
<div class="form-group required">
<fieldset class="rating">
<input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="5" ><label v-bind:value="5" class = "full" for="star5" title="Awesome"></label>
<input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="4" ><label v-bind:value="4" class="half" for="star4half" title="Pretty good"></label>
<input v-model="rating" type="radio" id="rating" name="rating" v-bind:value="3" ><label v-bind:value="3" class = "full" for="star4" title="Pretty good"></label> </fieldset>
</div>
<div class="form-group required">
<label>Email Address</label>
<input type="text" placeholder="Enter Your Email" id="enquiryEmail" name="enquiryEmail" class="form-control required" title="Email" v-model="enquiryEmail" required="required">
</div>
<div class="form-group required">
<label>Phone Number</label>
<input type="text" placeholder="Enter Your Phone Number" id="enquiryPhone" name="enquiryPhone" class="form-control required" title="Phone" v-model="enquiryPhone" required="required">
</div>
</div>
<div class="col-lg-6">
<div class="form-group required">
<label>Enquiry</label>
<textarea placeholder="Write your enquiry here" rows="7" id="enquiryDesc" name="enquiryDesc" class="form-control required" title="Desc" v-model="enquiryDesc" required="required"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer center-med-res center-sm-res center-xs-res">
<button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>
<button data-dismiss="modal" class="btn darkGrayButton" type="button">Cancel</button>
</div>
</form>
I am able to get data other than Rating from the above form. How can I able to pass the rating values.. Now I am getting empty values for rating. For, all other fields I am able to pass the data.
My vue js code
enquiryBox = new Vue({
el: "#enquiryBox",
data: {
rating: '',
enquiryPhone: '',
enquiryEmail: '',
enquiryDesc: '',
},
methods: {
handelSubmit: function(e) {
var vm = this;
data = {};
data['rating'] = this.rating;
data['enquiryEmail'] = this.enquiryEmail;
data['enquiryPhone'] = this.enquiryPhone;
data['enquiryDesc'] = this.enquiryDesc;
$.ajax({
url: 'https://n2s.herokuapp.com/api/post/add_review/',
data: data,
type: "POST",
dataType: 'json',
success: function(e) {
if (e.status) {
alert("Review Success")
} else {
alert(" Failed")
}
}
});
return false;
}
},
});
So, how can I able to pass the value of rating. If I select first, I need to pass value 5 otherwise value 4 .. But currently I am not able to pass the data of rating.. I am a beginner.. Please help me to achieve the same??
You forgot to add v-model="rating" to your radio inputs. Try it like this:
new Vue({
el: "#enquiryBox",
data: {
rating: '',
enquiryPhone: '',
enquiryEmail: '',
enquiryDesc: '',
},
methods: {
handelSubmit: function(e) {
var vm = this;
data = {};
data['rating'] = this.rating;
data['enquiryEmail'] = this.enquiryEmail;
data['enquiryPhone'] = this.enquiryPhone;
data['enquiryDesc'] = this.enquiryDesc;
// TODO add your AJAX instead
console.log(data);
return false;
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<form id="enquiryBox" method="POST" onSubmit="return false;" data-parsley-validate="true" v-on:submit="handelSubmit($event);">
<div class="modal-body brbottom-20">
<div class="clearfix">
<div class="col-lg-6">
<div class="form-group required">
<fieldset class="rating">
<input type="radio" id="rating" name="rating" v-bind:value="5" v-model="rating" />
<label class="full" for="star5" title="Awesome"></label>
<input type="radio" id="rating" name="rating" v-bind:value="4" v-model="rating" />
<label class="half" for="star4half" title="Pretty good"></label>
<input type="radio" id="rating" name="rating" v-bind:value="3" v-model="rating" />
<label class="full" for="star4" title="Pretty good"></label>
</fieldset>
</div>
<div class="form-group required">
<label>Email Address</label>
<input type="text" placeholder="Enter Your Email" id="enquiryEmail" name="enquiryEmail" class="form-control required" title="Email" v-model="enquiryEmail" required="required">
</div>
<div class="form-group required">
<label>Phone Number</label>
<input type="text" placeholder="Enter Your Phone Number" id="enquiryPhone" name="enquiryPhone" class="form-control required" title="Phone" v-model="enquiryPhone" required="required">
</div>
</div>
<div class="col-lg-6">
<div class="form-group required">
<label>Enquiry</label>
<textarea placeholder="Write your enquiry here" rows="7" id="enquiryDesc" name="enquiryDesc" class="form-control required" title="Desc" v-model="enquiryDesc" required="required"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer center-med-res center-sm-res center-xs-res">
<button id="btn-submit-enquiry" class="btn whiteButton" type="submit">Post Enquiry</button>
<button data-dismiss="modal" class="btn darkGrayButton" type="button">Cancel</button>
</div>
</form>
I want to select a radio button depending on an input field. This seems very simple but its not working. Basically a user fills out a form and depending on the state input field, it picks the state tax radio button.
The code below is not firing for some reason, any idea's?
The input field
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" onblur="picktax();" required />
</div>
</div>
The radio button
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
The script
<script>
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} elseif (statevalue == livalue) {
$("#radio3").prop("checked", true)
} elseif (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
</script>
updated, still not firing
Your example shows that you are new to JavaScript so whilst I wouldn't code it quite like this myself here's your code corrected enough to work.
As mentioned in the comments there is no elseif keyword in JS and you must use double or triple equals operator for evaluating.
Nethertheless, you were getting close to something workable.
function picktax() {
var statevalue = document.getElementById('state').value;
var nyvalue = "NY";
var livalue = "LI";
var njvalue = "NJ";
if (statevalue == nyvalue) {
$("#radio2").prop("checked", true)
} else if (statevalue == livalue) {
$("#radio3").prop("checked", true)
} else if (statevalue == njvalue) {
$("#radio4").prop("checked", true)
} else {
alert("test");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="state" class="col-sm-3 control-label">State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="state" name="state" placeholder="State" oninput="picktax();" required />
</div>
</div>
<div class="form-group">
<label for="emailaddress" class="col-sm-3 control-label">Tax</label>
<div class="col-sm-9">
<br>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio1" class="radio" value="0" / />
<span class="lbl">Tax Exempt</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio2" class="radio" value="0.0875" />
<span class="lbl">NYC 8.875%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio3" class="radio" value="0.08625" />
<span class="lbl">LI 8.625%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio4" class="radio" value="0.07" />
<span class="lbl">NJ 7%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio5" class="radio" value="0.06" />
<span class="lbl">Philly 6%</span>
</label>
<br>
</div>
<div class="col-sm-9">
<label class="checkbox-inline">
<input type="radio" class="px" name="tax2" id="radio6" class="radio" value="0.0635" />
<span class="lbl">CT 6.35%</span>
</label>
<br>
</div>
</div>
As pointed in the comments, your code has some syntax errors. Also, there are a few ways you could improve it, for example I use a switch instead of if. Nothing wrong with if, I'm just providing an example. Fixed code would be:
function picktax() {
var statevalue = $('#state').val();
var radio = $();
switch (statevalue) {
case "NY":
radio = $("#radio2");
break;
case "LI":
radio = $("#radio3");
break;
case "NJ":
radio = $("#radio4");
break;
default:
alert("test");
break;
}
radio.prop("checked", true);
}
I swear I tried a lot before asking you guys, but I just can't make it work properly. I have a radio and a checkbox area as it follows:
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>
I want to sum the user's choices and display it as texts and numbers. The selected radio will be displayed as text inside #resultPlan and it's value inside #sumPlan. The selected checkbox(es) will be displayed as text inside #resultOption and it's value inside #sumOption. If the user checks both boxes, #resultOption will have a comma separating each option and #sumOption will be the sum of both values. Finally, the label #sumTotal will get all the values selected, summed and displayed as a number.
I hope you guys got what I'm trying to do. I hope to find a solution that works with IE, so JS or Jquery.
UPDATE 1:
The code I created (but with no success) was based on each possible case of the use'r choice. That was the basic structure:
$("input[name=linePlan]").on('change',function(){
var linePlan = $('input[name=linePlan]:checked');
if ($(linePlan).is(':checked') && $(this).val() == '100000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 1")
$('#sumPlan').text('100000～')
$('#totalLine').text((Math.round(100000 * 1.08)) + '～') //1.08 is a tax fee
} else if ($(linePlan).is(':checked') && $(this).val() == '126000' && $('#english').prop('checked', false) && $('#portuguese').prop('checked', false)) {
$('#resultPlan').text("Plan 2")
$('#sumPlan').text('126000～')
$('#sumTotal').text((Math.round(126000 * 1.08)) + '～')
}
});
Of course that's not the full code, but that is pretty much what I tried.
Thank you for all the help!
I just created a code for your question. If you need the taxes, just add conditional statements below. Hope this helps.
Check this code :
$("input[name=linePlan],input[type=checkbox]").on('change', function() {
var planvalue = parseInt($('input[name=linePlan]:checked').val());
var plantext = $('input[name=linePlan]:checked').parent().text();
var optionsvalue = 0;
var options = [];
$('input[type="checkbox"]').each(function() {
if ($(this).is(':checked')) {
optionsvalue += parseInt($(this).val());
options.push($(this).parent().text());
}
});
var optionstext = options.join(',');
$('#resultPlan').text(plantext);
$('#sumPlan').text(planvalue);
$('#resultOption').text(optionstext);
$('#sumOption').text(optionsvalue);
if (optionsvalue == 0)
$('#resultOption').text("No Options");
$('#sumTotal').text(planvalue + optionsvalue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal text-left">
<div class="form-group">
<label>Plans</label>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="100000">Plan 1
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="126000">Plan 2
</label>
</div>
<div>
<label class="radio-inline">
<input type="radio" name="linePlan" value="160000">Plan 3
</label>
</div>
</div>
<div class="form-group">
<label>Options</label>
<div class="checkbox">
<label>
<input type="checkbox" id="english" value="3000">English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="portuguese" value="3000">Portuguese
</label>
</div>
</div>
<div class="form-group">
<label>Plans</label>
<div>
<label id="resultPlan" style="color:blue"></label>
<label id="sumPlan" style="color:blue"></label>
</div>
<label>Options</label>
<div>
<label id="resultOption" style="color:blue"></label>
<label id="sumOption" style="color:blue"></label>
</div>
<label>TOTAL</label>
<label id="sumTotal" style="color:blue"></label>
</div>
</form>