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.
Related
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
I have problem with getting data from a div tag. This is my div
<div id="log">
<div class="form-group" style="border-bottom:1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="text" class="form-control text banner_value" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split"> <lable> split </lable><br>
</div>
</div>
</div>
</div>
and here it's on browser :
after i click Add :
I'm using document.getElementById("log").textContent to get data that i filled to this div, but it didn't work. How can I get my data ??? Please help. Thanks for reading my question.
function getValues() {
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
}
<div id="log">
<div class="form-group" style="border-bottom: 1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label">
Log Name <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input
type="text"
class="form-control text banner_value"
id="banner_value"
/>
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
Start Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
End Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Filter Condition <sup style="color: red;">(*)</sup></label
>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split" />
<lable> split </lable><br />
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split" />
<lable> split </lable><br />
</div>
</div>
</div>
</div>
<button onclick="getValues()">click me</button>
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
you can use this JS code after click a button
if you want to get data from input tag
function myFunction() {
console.log(document.getElementById("myText").value)
}
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
</body>
</html>
I think what you want to get is the whole information. In that case you need to use the
form
tag instead of div. Div doesn't have a meaning related to data. It is just a container displayed as block.
If You want to get the value of input fields, try to put this in your html:
<script>
const logYourLog = (e) => {
console.log('Here is your value', document.getElementById("banner_value").value);
}
</script>
If you want to get data from the form, and you are using jquery. There is function called serialize() already in there. But, if you are in plain javascript, I guess you should use library for easy purpose. You can also make your own function.
serialize library but I have not tested it. Just check if you get what you need.
You must be able to do sthg like this after you add that library:
var allData = serialize(document.getElementById("log"));
Note:- if allData is not stored, try changing div to form, that should do work.
I have this code:
<div class="col-md-12">
<div class="form-panel">
<h4><i class="fa fa-angle-right"></i> Testing </h4>
<hr />
<form method="post" name="ibisaserver">
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Address:</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="interfaces" value="" required>
</div>
</div>
<div class="form-group ">
<label class="col-sm-3 col-sm-3 control-label">Network: </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionIp" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Netmask : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="mascaraSub" value="" required>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 col-sm-3 control-label">Broadcast : </label>
<div class="col-sm-9">
<input type="text" class="form-control" name="direccionGat" value="" required>
</div>
</div>
As you can see I have 4 inputs tag..
And I have this code as well:
with open("/etc/network/interfaces", "r") as file:
content = file.read()
print content
Where I'm getting the information I need from the following path : "/etc/network/interfaces".
Something like this:
Now, My question is: Is there a way to show the data I'm getting from my python or my local machine ("etc/network/interfaces") to my input tags?
There are two ways which you can use:
Make the python file generate the output html file, which you can use. HTML.py is a good option to start with it.
You can use XmlHttpRequest to read local files using javascript and populate the data automatically using JQuery.
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
},
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 = {};
}
};