We Keep Coding

Submitting angular form to a php file [duplicate]

This question already has answers here:
How do I POST urlencoded form data with $http without jQuery?
(11 answers)
Closed 6 years ago.
I'm trying to submit the form below to a php file called time.php, but its not working, even when I check the console there are no errors, its just clear. I'm not sure where I may be going wrong.
<form ng-controller="testCtrl" class="customform" data-ng-init="init()">
<div class="s-10 1-10">
<input ng-model="firstName" pattern=".{2,100}" title="2 to 100 Characters" placeholder="First Name" type="text" required />
</div>
<div class="s-10 1-10">
<input ng-model="lastName" pattern=".{5,255}" title="5 to 255 Characters" placeholder="Last Name" type="text" required />
</div>
<div class="s-12 l-10"><input ng-model="acNumber" placeholder="A/C Number" title="Employee Number, i.e c1234567" type="text" required /></div>
<div class="s-12 l-10"><input ng-model="email" placeholder="Email" title="Email" type="email" required /></div>
<div class="s-12 l-10">
<select ng-model="selectedRequestType" ng-options="requestType as requestType.type for requestType in requestTypes" required="required">
<option value="" disabled selected>Request Type</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedWorkRequestType" ng-options="workRequestType as workRequestType.type for workRequestType in workRequestTypes">
<option value="" disabled selected>Work Request Type</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedFile" ng-options="file as file.type for file in files">
<option value="" disabled selected>Files</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'New file(s) from source'" ng-model="selectedLibrary" ng-options="library as library.type for library in libraries">
<option value="" disabled selected>Does Library Exist</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedWorkRequestType.type == 'Code Automation' || selectedWorkRequestType.type == 'Amendments to existing code'" ng-model="selectedOutput" ng-options="outputType as outputType.type for outputType in outputTypes">
<option value="" disabled selected>Output</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedLibrary.type == 'Yes' || selectedRequestType.type == 'Incident'" ng-model="selectedPlatformOutput" ng-options="platformOutput as platformOutput.type for platformOutput in platformOutputs">
<option value="" disabled selected>Platform Output</option>
</select>
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'SAS' || selectedPlatformOutput.type =='SAS'" ng-model="sasLibraryName" type="text" placeholder="SAS Library Name: SPDS Exploit" />
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'SAP IQ' || selectedPlatformOutput.type =='SAP IQ'" ng-model="sapIQtext" placeholder="SAP IQ" >
</div>
<div class="s-12 l-10">
<input ng-show="selectedOutput.type == 'Hadoop' || selectedPlatformOutput.type =='Hadoop'" placeholder="Library Name: HDFS_Exploit" ng-model="hadoop" />
</div>
<div class="s-12 l-10">
<input ng-show="selectedWorkRequestType.type == 'Amendments to existing code'" placeholder="Output Dataset Name" ng-model="outputDataset" type="text"/>
</div>
<div class="s-12 l-10">
<input ng-show="selectedLibrary.type == 'No'" type="text" ng-model="productName" Placeholder="Product Name" />
</div>
<div class="s-12 l-10">
<input ng-show="" placeholder="Upload Text File" type="file" ng-model="uploadTextFile" title="Please upload a txt file with the layout - to " multiple />
</div>
<div class="s-12 l-10">
<input ng-show="selectedRequestType.type == 'Incident'" type="text" ng-model="tableName" placeholder="Dataset/Table Name" />
</div>
<div class="s-12 l-10">
<textarea placeholder="Special Instructions" ng-model="specialInstruction" rows="5"></textarea>
</div>
<div class="s-12 l-10">
<input ng-show="selectedRequestType.type == 'Incident'" ng-model="uploadScreenshot" placeholder="Upload Screenshot of error" type="file" multiple/>
</div>
<div class="s-12 l-10">
<select ng-show="selectedRequestType.type == 'Work Request'" ng-model="selectedFrequency" ng-options ="frequency as frequency.type for frequency in frequencies">
<option value="" disabled selected>Frequency</option>
</select>
</div>
<div class="s-12 l-10">
<select ng-show="selectedFrequency.type == 'Weekly'" ng-model="selectedWeekly" ng-options ="weekly as weekly.type for weekly in weeklies">
<option value="" disabled selected>Weekly Frequency</option>
</select>
</div>
<input type="hidden" ng-model="token" value="<?php echo Token::generate()?>">
<div class="s-4"><button type="submit" id="submit" class="btn-custom btn btn-large btn-block" ng-click="sendRequest()">Request</button></div>
Please note: ng-app="app" is located in the header:
<!DOCTYPE html>
<html lang="en-US" ng-app="app">
The following code is the controller, and I believe the issue lies somewhere in here:
var app = angular.module('app', []);
app.controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.sendRequest = function(){
var data= {
'firstName' :$scope.firstName,
'lastName' :$scope.lastName,
'acNumber' :$scope.acNumber,
'email' :$scope.email,
'selectedRequestType' :$scope.selectedRequestType,
'selectedWorkRequestType' :$scope.selectedWorkRequestType,
'selectedOutput' :$scope.selectedOutput,
'selectedFrequency' : $scope.selectedFrequency,
'selectedWeekly' : $scope.selectedWeekly,
'selectedFile' : $scope.selectedFile,
'selectedLibrary' : $scope.selectedLibrary,
'selectedPlatformOutput' : $scope.selectedPlatformOutput,
'productName' : $scope.productName
};
$http({
url: "time.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: data
}).success(function(data, status, headers, config) {
//Success code
}).error(function(xhr) {
//Failure code
console.log(data);
console.log(xhr.responseText);
});
return false;
// $window.location.href ='/time.php';
};
$scope.init = function (){
$scope.workRequestType = 'test';
$scope.requestTypes = [
{'type':'Work Request'},
{'type': 'Incident'}
];
$scope.workRequestTypes = [
{'type': 'Amendments to existing code'},
{'type': 'Code Automation'},
{'type': 'New file(s) from source'}
];
$scope.outputTypes = [
{'type': 'SAS'},
{'type':'SAP IQ'},
{'type': 'Hadoop'}
];
$scope.frequencies = [
{'type' : 'Daily'},
{'type': 'Monthly'},
{'type': 'Weekly'}
];
$scope.weeklies = [
{'type': 'Monday'},
{'type':'Tuesday'},
{'type': 'Wednesday'},
{'type':'Thursday'},
{'type':'Friday'},
{'type':'Saturday'},
{'type':'Sunday'}
];
$scope.files = [
{'type': 'New File(s)'},
{'type': 'Add to existing file received'}
];
$scope.libraries = [
{'type':'Yes'},
{'type':'No'}
];
$scope.platformOutputs = [
{'type': 'SAS'},
{'type':'SAP IQ'},
{'type': 'Hadoop'}
];
$scope.firstName= null;
$scope.lastName= null;
$scope.acNumber= null;
$scope.email= null;
$scope.selectedRequestType= null;
$scope.selectedWorkRequestType= null;
$scope.selectedOutput= null;
$scope.sasLibraryName = null;
$scope.sasIQtext = null;
$scope.selectedFrequency = null;
$scope.selectedWeekly = null;
$scope.selectedFile = null;
$scope.selectedLibrary = null;
$scope.selectedPlatformOutput = null;
$scope.productName = null;
};
}]);
I'm still learning Angular, so I may have made a simple error

If the HTTP POST request is taking place, but PHP is not able to access the POST variables, try converting the data from an object to a string.
$http({
url: "time.php",
method: "POST",
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
data: $httpParamSerializerJQLike(data),
})
The string should look like: firstName=John&acNumber=1234
Pass the $httpParamSerializerJQLike service into your controller with:
app.controller('testCtrl', ['$scope', '$http', '$httpParamSerializerJQLike', function($scope, $http, $httpParamSerializerJQLike) {

Generate dynamic form input fields and collect field data in an array in angularJS

I need to generate form input fields dynamically by clicking 'add sale' button on the form. which is accomplished
Also on change selected drop down, it get the price from the database and use the quantity to calculate the amount of that product.
if I click on 'add sale' button for another form generate the changes affect the previous one.
how to calculate the amount for each form independently and collect the data in it using angularJS?
this is controller
appcat.controller("MainCtrl", ['$scope', '$http', '$location', function ($scope, $http, $location)
{
//var quan = $scope.quantity;
$http.get('/api/pproduct').success(function (data)
{
$scope.pcategoryA = data;
});
// this controll the addition and removal
$scope.choices = [{ id: 'choice1' }];
//any time changes occurr it calculate the Amount
$scope.changedValue = function (item,quan)
{
if (item != null && quan !=null)
{
$http.get('/api/product/'+ item).success(function (data) // this is the price for that product from the Database
{
//this sets amount field
$scope.amount = parseFloat(data.price * quan);
});
}
}
// this generate a form
$scope.addNewChoice = function ()
{
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({ 'id': 'choice' + newItemNo });
};
// this remove the form
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
if ($scope.choices.length > 1) {
$scope.choices.splice(lastItem);
}
};
}]);
this is the html
<form class="form-inline" role="form" padding-left:10em">
<strong class="error">{{ error }}</strong>
<div class="form-group">
<label for="name">
Invoice No. :
</label>
<input type="text" class="form-control" id="name" ng-model="name" />
</div>
<br /><hr />
<div ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<div class="form-group">
<label for="name">
Quantity :
</label>
<input type="text" class="form-control" id="quantity" ng-model="quantity" />
</div>
<div class="form-group">
<div class="form-group">
<label class="control-label"> Product : </label>
<select class="form-control" id="selected_id" ng-model="selected_id" ng-options="c.Value as c.Text for c in pcategoryA"
ng-change="changedValue(selected_id,quantity)">
<option value="">-- Select Category --</option>
</select>
</div>
</div>
<div class="form-group">
<label for="name">
Amount :
</label>
<input type="text" class="form-control" id="amount" ng-model="amount" ng-readonly="true" />
</div>
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
<br />
<hr />
</fieldset>
<button type="submit" class="col-sm-offset-10 addfields" ng-click="addNewChoice()">
Add Sale
</button>
</div>
</form>
thanks in advanced!!

You have to put 'amount' in choices array.
$scope.choices = [{ id: 'choice1', amount: 0}];
Then in controller:
$scope.changedValue = function (choise,item,quan)
choise.amount = parseFloat(data.price * quan);
And in tempalte:
ng-change="changedValue(choise,selected_id,quantity)">
<input type="text" class="form-control" id="amount" ng-model="choise.amount" ng-readonly="true" />

language based validation using jquery

I have created page in which I am having a language selection drop-down, upon selection a language, then the validation of the fields should be in that specific language. Lets say I am selecting Arabic, then validation should be in Arabic. I am using jQuery-Form-Validator plugin,but don't know how to switch the language based validation.
my code is as given below
JSFiddle
Html
Select Language:<select>
<option value="english">English</option>
<option value="arabic">Arabic</option>
</select>
<form action="" id="myForm">
<p>
Name:<input name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
</p>
<p>
Email:<input type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Can anyone please tell me some solution for this

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Language" charset="UTF-8">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="formValidator.js"></script>
<style>
.add{
}
</style>
</head>
<body>
See errors in your language :
<select id="lang" >
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="mr">Marathi</option>
<option value="hi">Hindi</option>
<!-- add more language option -->
</select>
<form action="" id="myForm">
<p>
Name:<input id="name" name="user" data-validation="length" data-validation-length="min5" data-validation-error-msg="Maximum Length is 5"/>
</p>
<p>
Email:<input id="email" type="text" data-validation="email" data-validation-error-msg="Invalid Email"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script>
var validations = {
"en" : {
"name" : "Maximum Length is 5",
"email" : "Invalid Email"
},
"ar" : {
"name" : "أقصى طول هو 5",
"email" : "بريد إلكتروني خاطئ"
},
"mr" : {
"name" : "कमाल लांबी 5",
"email" : "अवैध ईमेल"
},
"hi" : {
"name" : "अधिकतम लंबाई 5",
"email" : "अवैध ईमेल"
}
//add more errors in your language
};
$("#lang").on('change', function(){
var currLang = $('#lang option:selected').attr('value');
$("#name").attr('data-validation-error-msg',validations[currLang].name);
$("#email").attr('data-validation-error-msg',validations[currLang].email);
});
$.validate({
});
</script>
</body>
</html>

Here is my original suggestion, fixed - please note I added ID to the user and email
var msg = {
"ar": {
invalidEmail: 'بريد إلكتروني خاطئ',
maxLength: 'أقصى طول هو 5'
},
"en": {
invalidEmail: 'Invalid Email',
maxLength: 'Maximum Length is 5'
}
}
$(function () {
$.validate({});
$("#lang").on("change", function () {
var msgs = msg[this.value];
// NOTE using .data does NOT work!
$("#user").attr("data-validation-error-msg", msgs.maxLength);
$("#email").attr("data-validation-error-msg", msgs.invalidEmail);
}).change();
});
.error {
color:red;
}
.input-validation-error {
border:1px solid red;
}
h1 {
font-weight:bold;
}
#debug {
font-size:small;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>
Select Language:
<select id="lang">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>
<form action="" id="myForm">
<p>Name:
<input id="user" name="user" data-validation="length" data-validation-length="min5" />
</p>
<p>Email:
<input id="email" name="email" type="text" data-validation="email" />
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>
Here another suggestion - please note I am using this plugin: http://jqueryvalidation.org/
var msg = {
ar: {
invalidEmail: 'بريد إلكتروني خاطئ',
maxLength: 'أقصى طول هو 5'
},
en: {
invalidEmail: 'Invalid Email',
maxLength: 'Maximum Length is 5'
}
}
$(function () {
$("#myForm").validate({
user: {
required: true,
length: 5
},
email: {
required: true,
email:true
}
});
$("#lang").on("change", function () {
var lang = this.value;
$("#user").rules("add", {
messages: {
required: msg[lang].maxLength,
length: msg[lang].maxLength
}
});
$("#email").rules("add", {
messages: {
required: msg[lang].invalidEmail,
email: msg[lang].invalidEmail
}
});
}).change();
});
.error {
color:red;
}
.input-validation-error {
border:1px solid red;
}
h1 {
font-weight:bold;
}
#debug {
font-size:small;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
Select Language:
<select id="lang">
<option value="en">English</option>
<option value="ar" selected>Arabic</option>
</select>
<form action="" id="myForm">
<p>Name:
<input id="user" name="user" class="required" />
</p>
<p>Email:
<input name="email" id="email" class="required" type="text"/>
</p>
<div>
<input type="submit" value="Submit" />
</div>
</form>

$("select").on("change", function() {
$("#name-input").data("validation-error-msg", errorMsgInDiffLang);
});

Have you gone through this post on StackOverflow here this solution would make your life easier

angularjs filter: ng-options removing duplicates

Is there a way to remove duplicated values from a option field in angularjs when you are getting data from a json.
For ex: I have many json objects like this
{
productCat: "G"
productCatDesc: "GENERAL"
productCode: "1"
productDes: "LOCAL"
subproductCode: "10"
}
{
productCat: "G"
productCatDesc: "GENERAL"
productCode: "1"
productDes: "FOREIGN"
subproductCode: "10"
}
{
productCat: "G"
productCatDesc: "RELIGION"
productCode: "1"
productDes: "GEN"
subproductCode: "10"
}
{
productCat: "G"
productCatDesc: "RELIGION"
productCode: "1"
productDes: "REL"
subproductCode: "10"
}
NOTE: there are many objects like these.My task is to show 'productDes's according to the 'productCatDesc' . I have hardcoded 'productCatDesc'.SO for ex: if i choose General from the selection option i have to show the 'productDes' according to it.But the way i have done it 'productDes' is read from every object resulting repeating data.I only want to show only the 2types (Local,Foreign).How can i achieve this?
This is what i have so far
$scope.productList = function(){
if($scope.user.productCat.name.localeCompare("GENERAL")==0){
window.alert("genData");
// $scope.productListArr = $scope.generalData;
for(var k=0; k<$scope.generalData.length ; k++){
$scope.productListArr[0] = $scope.generalData[0];
var arrayObject = $scope.generalData[k];
if($scope.productListArr[k].productDes.localeCompare(arrayObject.productDes) != 0){
$scope.productListArr.push(arrayObject);
}
}
} else {
window.alert("IslData");
$scope.productListArr = $scope.islamicData;
for(var k =0; k< $scope.productListArr.length ;k++){
var arrayObj = $scope.productListArr[k];
if ($scope.filteredProductArray.indexOf(arrayObj.productDes) == -1) {
$scope.filteredProductArray.push(arrayObj);
}
}
window.alert("here");
window.alert(filteredProductArray.length);
}
};
My HTML
<div class="form-group" ng-class="{ 'has-error' :submitted && (userForm.productCat.$pristine || thirdPartyForm.productCat.$invalid)}">
<label class="labelColor"><h5><b>Product Category</b></h5></label>
<select id="productCat" name="productCat" style="margin: auto; width:100%; " ng-model="user.productCat" ng-options="cat.name for cat in productCatList" ng-disabled="isDisabled" required>
<option value="" selected="selected">--Select Type--</option>
<optgroup label="user.productCat.name"></optgroup>
</select><br>
<span class="help-inline" ng-show="submitted && (userForm.productCat.$pristine || userForm.productCat.$invalid)" >A Product Category is required.</span>
</div>
<toaster-container toaster-options="{'note': 3000, 'close-button':true}"></toaster-container>
<!--Product-->
<div class="form-group" ng-class="{ 'has-error' :submitted && (userForm.product.$pristine || thirdPartyForm.product.$invalid)}">
<label class="labelColor"><h5><b>Product</b></h5></label>
<select id="product" name="product" style="margin: auto; width:100%; " ng-model="user.product" ng-options="prod.name for prod in productList" ng-disabled="isDisabled" required>
<option value="" selected="selected">--Select Type--</option>
<optgroup label="user.product.name"></optgroup>
</select><br>
<span class="help-inline" ng-show="submitted && (userForm.product.$pristine || userForm.product.$invalid)" >A Product is required.</span>
</div>
<!--Sub Product-->
<div class="form-group" ng-class="{ 'has-error' :submitted && (userForm.Subproduct.$pristine || thirdPartyForm.Subproduct.$invalid)}">
<label class="labelColor"><h5><b>Sub Product</b></h5></label>
<select id="Subproduct" name="Subproduct" style="margin: auto; width:100%; " ng-model="user.Subproduct" ng-options="Subprod.name for Subprod in SubproductList" ng-disabled="isDisabled" required>
<option value="" selected="selected">--Select Type--</option>
<optgroup label="user.Subproduct.name"></optgroup>
</select><br>
<span class="help-inline" ng-show="submitted && (userForm.Subproduct.$pristine || userForm.Subproduct.$invalid)" >A Sub Product is required.</span>
</div>
<!-- BUTTONS -->
<div class="col"style="text-align: center">
<button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center "
type="reset"
ng-click="submitted = false; reset();" padding-top="true">Reset</button>
<button class="button button-block button-positive" style="display: inline-block;width:100px "
ng-click="submitted=true; "padding-top="true">Submit</button>
</div>

jQuery hide validation errors on dropdown change

I have a form that shows additional fields based on what the selected option is.
When the form is validated (with error), an error message appears under the additional field that has been shown. That's the expected behaviour.
If I then select a different option, the old option input hides (expected) but the old validation error message remains.
How can I hide the validation error message?
Form code:
<div class="row">
<section class="col col-12">
<label class="label">Type</label>
<label class="select">
<select id="type" name="type">
<option value="" selected>Select a cancelation type</option>
<option value="c1">Cancel and keep all payments</option>
<option value="c2">Cancel and issue deposit refund</option>
<option value="c3">Cancel and issue partial refund</option>
<option value="c4">Cancel and issue full refund</option>
<option value="c5">Cancel and add aditional charges</option>
</select>
<i></i>
</label>
</section>
</div>
<div class="ammount">
<div class="row">
<section class="col col-12">
<label id="ammountt" class="label" style="display:none;">Refund ammount</label>
<label class="input" id="ammountl" style="display:none;>
<i class="icon-prepend fa fa-gbp"></i>
<input class="" id="ammount" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="ammount" value="" >
</label>
<label id="aditionalt" class="label" style="display:none;">Aditional charge ammount</label>
<label class="input" id="aditionall" style="display:none;>
<i class="icon-prepend fa fa-gbp"></i>
<input class="" id="aditional" type="text" pattern="\d+(\.\d{2})?" placeholder="" name="aditional" value="" ></label>
</section>
</div>
JS:
$(document).ready(function() {
$("#type").change(function () {
var choice = jQuery(this).val();
if ($(this).val() == 'c3') {
$('#ammountt').show();
$('#ammountl').show();
} else {
$('#ammountt').hide();
$('#ammountl').hide();
}
if ($(this).val() == 'c5') {
$('#aditionalt').show();
$('#aditionall').show();
} else {
$('#aditionalt').hide();
$('#aditionall').hide();
}
});
var $CancelBookingForm = $("#cancel-booking-form").validate({
// Rules for form validation
rules : {
name : {
required : true
},
ammount : {
required: true
},
aditional : {
required: true
},
},
// Messages for form validation
messages : {
name : {
required : 'Please select an upsell from the drop down.'
},
ammount : {
required: 'Please enter a refund ammount.'
},
aditional : {
required: 'Please enter an aditional charge ammount.'
},
},
// Do not change code below
errorPlacement : function(error, element) {
error.insertAfter(element.parent());
}
});
})

You need to find the invalid class and then remove it
$("#type").change(function () {
var choice = jQuery(this).val();
//if you just want to remove them all
$(".input em.invalid").remove();
if ($(this).val() == 'c3') {
$('#ammountt,#ammountl').show();
} else {
$('#ammountt,#ammountl').hide();
$('#ammountt,#ammount1').siblings("em.invalid").remove();
}
if ($(this).val() == 'c5') {
$('#aditionalt,#aditionall').show();
} else {
$('#aditionalt,#aditionall').hide();
$('#aditionalt,#aditionall').siblings("em.invalid").remove();
}
});