Firebase Realtime database update

Firebase Realtime database update - javascript

Hello guys my firebase real-time database update function is updating all the data with new data, I'm attaching the image of the database before the update
And after the update all the fields of A and B are changed into C, the source code is available below :
Frontend:
<form onsubmit="return false">
<input type="hidden" id="hiddenId">
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Code</label>
<input type="text" class="form-control uname-box" id="popupCourseCode" aria-describedby="emailHelp" placeholder="Course Code">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Course Title</label>
<input type="text" class="form-control uname-box" id="popupCourseTitle" aria-describedby="emailHelp" placeholder="Course Title">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Subject</label>
<input type="text" class="form-control uname-box" id="popupSubject" aria-describedby="emailHelp" placeholder="Subject">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Credits</label>
<input type="number" class="form-control uname-box" id="popupCredits" aria-describedby="emailHelp" placeholder="Credits">
</div>
</div>
<div class="form-row">
<div class="form-group col-12">
<label class="uname">Grades</label>
<input type="text" class="form-control uname-box" id="popupGrades" aria-describedby="emailHelp" placeholder="Grades">
</div>
</div>
</form>
Function:
function update() {
firebase.database().ref('academics').orderByKey().once('value', snap => {
snap.forEach((data) => {
var popupCourseCode = document.getElementById('popupCourseCode');
var popupCourseTitle = document.getElementById('popupCourseTitle');
var popupSubject = document.getElementById('popupSubject');
var popupCredits = document.getElementById('popupCredits');
var popupGrades = document.getElementById('popupGrades');
var updates = {
courseCode: popupCourseCode.value,
courseTitle: popupCourseTitle.value,
subject: popupSubject.value,
credits: popupCredits.value,
grade: popupGrades.value,
}
firebase.database().ref('academics/' + data.key).update(updates)
// alert('updated')
console.log(`Update FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
// console.log(`Remove FunctionKey!!!!!!!!!!!! >>>>>>>>> ${data.key}`)
})
}
Please provide me a solution. Thanks in anticipation

Related

form inputs data failed to be received when element is inserted with JavaScript

I am trying to dynamically change the html of parent form element to display according the what the user wants to upload, then retrieve the data from that child element. I saved the list of children to dynamically input in the js folder leaving the parent form element empty.
The issue is:
a) When I dynamically input the preferred child element according to what user wants to upload, It doesn't retrieve the values even though it shows in the DOM that the element is there.
b) Whereas if I statically input the child element in html folder, it works just fine. but when the child is changed again, its still the statically inputted values I get back.
please how do I go about this?? Here's the codepen showing it.
<div class="upload-box container mt-3">
<div class="title-box-d">
<h3 class="title-d upload-type">Uploading A Car</h3>
</div>
<div class="box-collapse-wrap form ">
<div class="form-group mb-5">
<div class="row">
<div class="col-md-4">
<label for="upload">What Do You Want To Upload?</label>
<select class="form-control form-control-lg form-control-a" id="upload">
<option value="cars">Car</option>
<option value="houses">House/Home</option>
<option value="land">Land Properties</option>
</select>
</div>
</div>
</div>
<form class="form-a form-upload">
</div>
</form>
</div>
</div>
The JS
///////////////////////
/*--/ Project Logic /--*/
//////////////////////
const projectData = {
uploadCategories: {
carForm: ` <div class="row">
<div class="col-md-8 mb-2">
<div class="form-group">
<label for="file">Add Photo</label>
<input type="file" id="file" accept="image/*" multiple="multiple"
class="form-control form-control-lg form-control-a">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control form-control-lg form-control-a" id="location">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="brand">Car Brand</label>
<input type="text" class="form-control form-control-lg form-control-a" id="brand"
placeholder="Eg Toyota, Lexus etc">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="car-model">Car Model</label>
<input type="text" class="form-control form-control-lg form-control-a" id="car-model"
placeholder="eg Venza, Sienna, Corolla Etc">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="year">Year</label>
<input type="number" class="form-control form-control-lg form-control-a" id="year">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="condition">Condition</label>
<select class="form-control form-control-lg form-control-a" id="condition">
<option>Brand New</option>
<option>Nigerian Used</option>
<option>Foreign Used</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="transmission">Transmission</label>
<select class="form-control form-control-lg form-control-a" id="transmission">
<option>Automatic</option>
<option>Manual</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="registered">Registered?</label>
<select class="form-control form-control-lg form-control-a" id="registered">
<option>Yes</option>
<option>No</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="mileage">Mileage</label>
<input type="number" class="form-control form-control-lg form-control-a" id="mileage"
placeholder="Mileage (km)">
<div class="form-group mt-3">
<label for="price">Price</label>
<input type="number" class="form-control form-control-lg form-control-a" id="price">
</div>
</div>
</div>
<div class="col-md-8 mb-2">
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control form-control-lg form-control-a"
placeholder="Add more description to your Ad" id="description" cols="30" rows="30"
style="height: 10rem;"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-b">Upload</button>
</div>
</div>`,
houseForm: `<div class="row">
<div class="col-md-8 mb-2">
<div class="form-group">
<label for="file">Add Photo</label>
<input type="file" id="file" accept="image/*" multiple="multiple"
class="form-control form-control-lg form-control-a">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control form-control-lg form-control-a" id="location">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control form-control-lg form-control-a" id="title"
placeholder="Title or name of the Property">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="area">Property Size (sqm)</label>
<input type="number" class="form-control form-control-lg form-control-a" id="area">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="bedrooms">Bedrooms</label>
<input type="number" class="form-control form-control-lg form-control-a" id="bedrooms">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="bathrooms">Bathrooms</label>
<input type="number" class="form-control form-control-lg form-control-a" id="bathrooms">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="sale-status">For Sale Or rent?</label>
<select class="form-control form-control-lg form-control-a" id="sale-status">
<option>For Sale</option>
<option>For Rent</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="garage">Garage</label>
<input type="number" class="form-control form-control-lg form-control-a" id="garage">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="price">Price</label>
<input type="number" class="form-control form-control-lg form-control-a" id="price">
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="amenities">Other Amenities</label>
<select class="form-control form-control-lg form-control-a" id="amenities" multiple style="height: 10rem;">
<option>Parking Space</option>
<option>24 Hours Electricity</option>
<option>Internet</option>
<option>Air Conditioning</option>
<option>Security</option>
<option>Balcony</option>
<option>Tile Floor</option>
<option>Dish Washer</option>
<option>Dining Area</option>
<option>Kitchen Cabinet</option>
<option>Kitchen Shelf</option>
<option>Wardrobe</option>
<option>WIFI</option>
<option>POP Ceiling</option>
<option>Prepaid Meter</option>
<option>Concrete Flooring</option>
</select>
</div>
</div>
<div class="col-md-8 mb-2">
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control form-control-lg form-control-a" placeholder="Add more description to your Ad"
id="description" cols="30" rows="30" style="height: 10rem;"></textarea>
</div>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-b">Upload</button>
</div>`,
landForm: `<div class="row">
<div class="col-md-8 mb-2">
<div class="form-group">
<label for="file">Add Photo</label>
<input type="file" id="file" accept="image/*" multiple="multiple"
class="form-control form-control-lg form-control-a">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="location">Location</label>
<input type="text" class="form-control form-control-lg form-control-a" id="location">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control form-control-lg form-control-a" id="title"
placeholder="Title or name of the Land.">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="area">Property Size (sqm)</label>
<input type="number" class="form-control form-control-lg form-control-a" id="area">
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="land-type">Type Of Land</label>
<select class="form-control form-control-lg form-control-a" id="land-type" placeholder="What Type of Land is This?">
<option>Commercial Land</option>
<option>Farmland</option>
<option>Industrial Land</option>
<option>Mixed-use LAnd</option>
<option>Quarry</option>
<option>Residential Land</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="row">
<div class="col-12">
<div class="form-group">
<label for="sale-status">For Sale Or Lease?</label>
<select class="form-control form-control-lg form-control-a" id="sale-status">
<option>For Sale</option>
<option>For Lease</option>
</select>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="price">Price</label>
<input type="number" class="form-control form-control-lg form-control-a" id="price">
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="amenities">Other Amenities</label>
<select class="form-control form-control-lg form-control-a" id="amenities" multiple style="height: 10rem;">
<option>Parking Space</option>
<option>Electric Supply</option>
<option>Domestic Sewage</option>
<option>Gas Supply</option>
<option>Rain Water Drainage</option>
<option>Water Supply</option>
</select>
</div>
</div>
<div class="col-md-4 mb-2">
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control form-control-lg form-control-a" placeholder="Add more description to your Ad"
id="description" cols="30" rows="30" style="height: 10rem;"></textarea>
</div>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-b">Upload</button>
</div>`
},
fromInputs: {
Name: $('#title'),
Brand: $('#brand'),
Model: $('#car-model'),
Location: $('#location'),
Description: $('#description'),
Status: $('#sale-status'),
Price: $('#price'),
Bedrooms: $('#bedrooms'),
Bathrooms: $('#bathrooms'),
Garage: $('#garage'),
Area: $('#area'),
Amenities: $('#amenities'),
'Type Of Land': $('#land-type'),
Year: $('#year'),
Condition: $('#condition'),
Transmission: $('#transmission'),
Registered: $('#registered'),
Mileage: $('#mileage'),
},
formImages: {
dataReferenceId: 'dataid',
images: []
},
dataToSubmit : ''
};
/*--/ Admin Page Code /--*/
// Check what typemof data user wants to upload and display from related to that
$('#upload').change(e => {
switch (e.target.value) {
case 'houses':
$('.upload-type').text('Uploading A House');
$('.form-upload').html(projectData.uploadCategories.houseForm);
break;
case 'land':
$('.upload-type').text('Uploading A Land');
$('.form-upload').html(projectData.uploadCategories.landForm);
break;
default:
$('.upload-type').text('Uploading A Car');
$('.form-upload').html(projectData.uploadCategories.carForm);
break;
}
});
// GET ALL UPLOAD FORM DATA INPUTED
$('.form-upload').submit(function (event) {
event.preventDefault();
// Check what category user wants to upload
const uploadCategory = $('#upload').val();
// GET ALL THE DATA FOR A FORM SESSION UPLOADED
const data = Object.entries(projectData.fromInputs).map(([key, value]) => [key, value && value.val()]);
// FILTER THE DATA TO RETURN ON THOSE WITH VALUES
const filteredData = Object.fromEntries(
data.filter(([key, value]) => value
));
console.log(filteredData);
// projectData.dataToSubmit = filteredData;
});
CODEPEN: https://codepen.io/genral-walker/pen/vYgqbvL

Main problem is that you're caching reference to elements that might not be in DOM at the time. You should store a selector instead:
fromInputs: {
Name: '#title',
Brand: '#brand',
Model: '#car-model',
Location: '#location',
Description: '#description',
Status: '#sale-status',
Price: '#price',
Bedrooms: '#bedrooms',
Bathrooms: '#bathrooms',
Garage: '#garage',
Area: '#area',
Amenities: '#amenities',
'Type Of Land': '#land-type',
Year: '#year',
Condition: '#condition',
Transmission: '#transmission',
Registered: '#registered',
Mileage: '#mileage',
},
And then look it up later:
const data = Object.entries(projectData.fromInputs).map(([key, value]) => {
console.log(key, value);
const $el = $(value);
return [key, $el.length && $el.val()];
});
https://codepen.io/genral-walker/pen/vYgqbvL?editors=1111

jQuery form validation fails only on a specific input

I have a fairly straightforward validation function that only checks if input is empty or not. I'm using it across a half dozen different forms and it seems to be working everywhere except one specific input id="driver_first_name" . Can't figure out why it fails there.
If I leave all fields empty I get errors on all of them, and is generally correct across any combination I have tried except driver_first_name In the case that I fill out everything except driver_first_name the form submits anyways.
Any insight on what might be going on here?
Thank you!
My Validation function is this:
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result=false;
$.each( fields.rules, function( key, value ) {
if(!$("#"+key+"").val()){
$("#"+key+"").addClass("form-error");
$( "<div class='form-input-error'>"+value.message+"</div>" ).insertBefore("#"+key+"");
result = false;
//console.log(this.val());
}
else{
$("#"+key+"").removeClass("form-error");
result = true;
}
});
return result;
}
I am calling my validation on my submit triggers, generally like this for fields that should not be empty:
$(".app-canvas").on('click', ".submitNewDriver", function () {//list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if(validateForm($("#addDriverForm"),checkInputs) == true){
console.log("form submit");
addNewDriver();
}
else{
console.log("form errors");
}
});
My full form HTML is
<div class="form-wrapper">
<form id="addDriverForm" class="post-form" action="modules/add_driver.php" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<div class="submitNewUnit button green"><i class="material-icons">save</i>Submit</div>
</form>
</div>

Your validation logic is a little messed up. This is what's happening:
#driver_first_name is validated as invalid... result is set false
#driver_last_name is validated as valid... result is set true
#driver_address_street is validated as valid... result is set true
After all that the code thinks the form is valid. You're only preventing the form from being submitted if the last field as validated as not-valid.
Change your logic to assume the form is valid from the beginning. Then set it to false if any of the fields are invalid.
I also don't see anything in your code that actually prevents the form submition, so I also added e.preventDefault()
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result = true;
$.each(fields.rules, function(key, value) {
if (!$("#" + key + "").val()) {
$("#" + key + "").addClass("form-error");
$("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
result = false;
//console.log(this.val());
} else {
$("#" + key + "").removeClass("form-error");
}
});
return result;
}
$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if (validateForm($("#addDriverForm"), checkInputs) == true) {
console.log("form submit");
} else {
e.preventDefault();
console.log("form errors");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">
<form id="addDriverForm" class="post-form" action="" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<input type="submit" class="submitNewDriver button green" value="Submit" />
</form>
</div>

How to attach Excel file on send email in Angular.js?

I am using Angular.js to create an Excel file but now I include also that file in my email from how to that possible. My js code:
$scope.email = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"
});
var i = (new Date().toJSON().slice(0, 10)) + "_" + "Report.xls";
saveAs(blob, i);
};
This is my HTML code:
<div class="container ">
<div class="row-fluid">
<div class="col-md-12">
<label class="control-label" for="Email_Id">Email Id</label>
</div>
<div class="col-md-6 spacer10">
<input class="form-control" id="EmailId" name="EmailId" placeholder="Email-Id" type="text">
</div>
<div class="col-md-12">
<label class="control-label" for="Subject">Subject</label>
</div>
<div class="col-md-6 spacer10">
<input class="form-control" id="Subject" name="Subject" placeholder="Subject.." type="text"
</div>
<div class="col-md-12">
<label class="control-label" for="Subject">Subject</label>
</div>
<div class="col-md-6 spacer10">
<input class="form-control" id="Subject" name="Subject" type="file" valu="email()">
</div>
<div class="col-md-12">
<label class="control-label" for="Message">Message</label>
</div>
<div class="col-md-6">
<textarea class="form-control" cols="20" id="Message" name="Message" rows="5"></textarea>
</div>
</div>
on this code type file, auto includes Excel file on creating time.

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
},

Simplify angular controller posting to Firebase using AngularFire

I'm new to angular but picking it up quickly. I have this controller that works, based on demo code ive hacked together, but there has to be an easier cleaner way to get all the fields and post so if i want to add a new field i dont need to keep adding it in the various locations.
Heres the controller:
'use strict';
angular.module('goskirmishApp').controller('addEvent', function ($scope, fbutil, $timeout) {
// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.messages = fbutil.syncArray('messages', {limit: 10});
// display any errors
$scope.messages.$loaded().catch(alert);
// provide a method for adding a message
$scope.addMessage = function(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink) {
if( newEventName ) {
// push a message to the end of the array
$scope.messages.$add({
eventName: newEventName,
eventType: newEventType,
startDate: newStartDate,
startTime: newStartTime,
endDate: newEndDate,
endTime: newEndTime,
eventDescription: newEventDescription,
address: newAddress,
postcode: newPostcode,
ticketInformation: newTicketInformation,
bookLink: newBookLink
})
// display any errors
.catch(alert);
}
};
function alert(msg) {
$scope.err = msg;
$timeout(function() {
$scope.err = null;
}, 5000);
}
});
And the view:
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="newEventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="newEventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newStartDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newStartTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newEndDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newEndTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="newEventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="newAddress">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="newPostcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="newTicketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="newBookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink,newLat,newLong,newApproved);newEventName = null;newEventType = null;newStartDate = null;newStartTime = null;newEndDate = null;newEndTime = null;newEventDescription = null;newAddress = null;newPostcode = null;newTicketInformation = null;newBookLink = null;">Add Event</button>
</form>
Help is greatly appreciated!

Define all your input in a object that you will be directly send send to firebase
For example init in your controller this :
$scope.form = {};
After in your template just define your input as 'form attributes'.
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="form.eventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="form.eventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.startDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.startTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.endDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.endTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="form.eventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="form.address">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="form.postcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="form.ticketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="form.bookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage()">Add Event</button>
</form>
and directly in your addMessage function
$scope.addMessage = function() {
if( $scope.form.eventName ) {
// push a message to the end of the array
$scope.messages.$add($scope.form)
// display any errors
.catch(alert);
//Reset your form
$scope.form = {};
}
};

Develop Reference

JavaScript is the programming language of the Web.

Firebase Realtime database update - javascript

Related

form inputs data failed to be received when element is inserted with JavaScript

jQuery form validation fails only on a specific input

How to attach Excel file on send email in Angular.js?

Issue with jQuery validate not working against element

Simplify angular controller posting to Firebase using AngularFire

Categories

Resources