I am brand new to JavaScript and embarrassed to say that I can't figure this out. I am trying to create a website that parses first and last names to output email addresses. I moved the onclick() function outside the onload() and that has only created more issues. Any help would be greatly appreciated. I apologize for my ignorance.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Email Address Title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h3>Enter your first and last name and then click the button below to get your Email Account info.</h3>
</header>
<main>
<section class="inputarea">
<p>First Name: <input type="text" id="fname"></p>
<p>Last Name: <input type="text" id="lname"></p>
<button id="genemail">Generate Email</button></section>
<section class="outputArea"></section>
</main>
<br><hr>
<footer id="by-line">CIS 425 - JavaScript Practice</footer>
<script src="script.js"></script>
</body>
</html>
JavaScript:
window.onload = function() {
//alert("Just finished loading the webpage in the window.");
}
document.getElementById("genemail").onclick = processForm(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
If you want assign function to onclick event directly you should use an anonymous function:
document.getElementById("genemail").onclick = function(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
If you don't want use an anonymouse function and your function is parameterless then define your function separately and assign it:
function processForm(){
// alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
document.getElementById("genemail").onclick = processForm;
The line document.getElementById("genemail").onclick = processForm(){ is the problem, you can not name the function processForm here. If you change it to the keyword function it works just fine, see this fiddle: https://jsfiddle.net/jsk0byvu/
You can try the below code in JavaScript:
document.getElementById("genemail").addEventListener("click", processForm, false);
function processForm(){
alert("Just finished loading the webpage in the window.");
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
console.log(firstname + " " + lastname);
var label = document.getElementsByClassName("outputArea");
label[0].innerHTML = "Your Email Address: " + firstname + "." + lastname + "#gmail.com";
document.getElementById("by-line").innerHTML = document.getElementById("by-line").innerHTML + " / Created By: Tony Vance";
}
Related
My question is: How to migrate var x which is basically user input data to var person so user could change person.firstName by inputing data into <input type="text" id="userInput" value=""> element. I am very new for JS concepts, so I would be appreciate for any help. Thank you.
var person = {
firstName : "John",
lastName : "Doe",
age : 30,
fullName : function() {
return "My name is " + this.firstName + " " + this.lastName + " I am " + this.age + " years old";
}
};
document.getElementById("demo").innerHTML = person.fullName (); // Result: My name is John Doe I am 30 yers old
/* Input */
function myFunction() {
var x = document.getElementById("userInput").value;
document.getElementById("demo").innerHTML = x;}
You can add the event input to your input field.
Set the entered input (firstName) to your object person.
Look this code snippet:
var person = {
firstName: "John",
lastName: "Doe",
age: 30,
fullName: function() {
return "My name is " + this.firstName + " " + this.lastName + " I am " + this.age + " years old";
}
};
document.getElementById("demo").innerHTML = person.fullName();
/* Input */
function myFunction() {
var x = document.getElementById("userInput").value;
person.firstName = x;
document.getElementById("demo").innerHTML = person.fullName();
}
document.getElementById("userInput").addEventListener('input', myFunction);
<span id='demo'></span>
<p>User Input</p>
<input type="text" id="userInput" value="">
See? The object person is being updated automatically.
Resource
EventTarget.addEventListener()
Working with objects
Just do what you say:
function updateFirstName() {
person.firstName = document.getElementById("userInput").value;
document.getElementById("demo").innerHTML = person.fullName();
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I will be adding a list of contacts and put them in a div based on first character of lname. If the div doesn't exists, it will be created dynamically. I'd want to display the contact information on clicking the name. In the following implementation, showMe( ) function not working to display the contact information .
<html>
<head>
<style>
.holder{
background-color:yellow;
margin-top:10px;
width: 300px;
}
.holder span{
background-color: Green;
height:20px;
color:white;
}
</style>
<script>
var contacts =[];
function getInfo() {
var firstName = prompt("Enter first name");
var lastName = prompt("Enter last name");
var emailId = prompt("Enter Email ID");
var phoneNo = prompt("Enter Phone number");
var person ={
fname : firstName,
lname : lastName,
email : emailId,
phone : phoneNo
};
contacts.push(person);
var currPerson = contacts[contacts.length-1]; //take the last pushed object from the array
var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase();
if(!document.getElementById(lastNameFirstChar + "_holder")){
document.getElementById("mydiv").innerHTML += "<div id='"+lastNameFirstChar+"_holder' class='holder'><span>"+lastNameFirstChar+"</span></br></div>";
}
//document.getElementById(lastNameFirstChar + "_holder").innerHTML += currPerson.fname+" "+currPerson.lname + "<br/>";
document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + currPerson.id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>";
}
function showMe(id) {
alert(id);
var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */
var contactInfo = person.fname+" "+person.lname+"</br> "+person.email+"</br>"+person.phone;
target.innerHTML = "<div>" + contactInfo + "</div></br>";
}
</script>
</head>
<body>
<button onclick="getInfo()">Get Person Info</button>
<p>----------------------------</p>
<div id="mydiv">
</div>
</body>
</html>
<script>
var contacts = [];
function getInfo()
{
var firstName = prompt("Enter first name");
var lastName = prompt("Enter last name");
var emailId = prompt("Enter Email ID");
var phoneNo = prompt("Enter Phone number");
var person = {
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
contacts.push(person);
var currPerson = contacts[contacts.length - 1]; //take the last pushed object from the array
var id = contacts.length - 1;
var lastNameFirstChar = currPerson.lname.charAt(0).toUpperCase();
if (!document.getElementById(lastNameFirstChar + "_holder"))
{
document.getElementById("mydiv").innerHTML += "<div id='" + lastNameFirstChar + "_holder' class='holder'><span>" + lastNameFirstChar + "</span></br></div>";
}
//document.getElementById(lastNameFirstChar + "_holder").innerHML += currPerson.fname+" "+currPerson.lname + "<br/>";
document.getElementById(lastNameFirstChar + "_holder").innerHTML += "<span onclick='showMe(" + id + ")'>" + currPerson.fname + " " + currPerson.lname + "</span><br/>";
}
function showMe(id)
{
//alert(id);
var person = contacts[id]; /* currently corresponds to array index, could be a property lookup with underscore or whatever */
var contactInfo = person.fname + " " + person.lname + "</br> " + person.email + "</br>" + person.phone;
mydiv.innerHTML = "<div>" + contactInfo + "</div></br>";
}
</script>
When you call showMe() function you are supposed to send the id of the person by currPerson.id
but when you defined var person you didn't give it the id property.
you have this
var person = {
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
make it like this
var person = {
id: contacts.length,// note this extra parameter
fname: firstName,
lname: lastName,
email: emailId,
phone: phoneNo
};
now when you call
"<span onclick='showMe(" + currPerson.id + ")'>"
currentPerson.id will not be undefined anymore.
Secondly when you call this line
target.innerHTML = "<div>" + contactInfo + "</div></br>";
you haven't defined the variable "target".
add this line before the above line
var target= document.getElementById("mydiv")
where "myDiv" is the id of what you defined in the html markup
<div id="mydiv">
I have a bootstrap modal where the users fill out a form and upon clicking submit, it opens the user's mail client using a mailto link and populates a new message.
I would like the modal to close when this happens, but when I add code to close the modal, the mailto link no longer works (mail client window does not open). The modal successfully closes. Any suggestions?
$('#request-form').submit(function (evt) {
if ($("#request-form").valid())
{
evt.preventDefault();
var firstName = $("#FirstName").val();
var lastName = $("#LastName").val();
var company = $("#Firm").val();
var address = $("#Address").val();
var city = $("#City").val();
var state = $("#State").val();
var zip = $("#Zip").val();
var phone = $("#Phone").val();
var email = $("#EmailAddress").val();
var product = $("#ProductName").val();
//Send email using mailto link
var body = "Send this email <removed>.%0D%0A%0D%0AFirst Name: " + firstName + "%0D%0ALast Name: " + lastName + "%0D%0ACompany: " + company +
"%0D%0AAddress: " + address + "%0D%0ACity: " + city + "%0D%0AState: " + state + "%0D%0AZip: " + zip + "%0D%0APhone: " + phone + "%0D%0AEmail: " + email +
"%0D%0AProduct: " + product;
var subject = "Product Request";
var recipient = $("#Recipient").val();
window.location.href = "mailto:" + recipient + "?subject=" + subject + "&body=" + body;
$("#questions-modal").modal('hide');
}
});
cshtml:
<button type="submit" class="btn btn-nav pull-right" id="btn-openMail" data-dismiss="modal">Submit</button>
You could try with "toggle"...
$("#questions-modal").modal('toggle');
or put some extra code.
Did you check console logs?
Need some help with this piece of a code. I am able to produce the results I want with the code in Working Code, but when I implement this code on another sheet (which is the master code) it does not work. scratching my head trying to figure this out
Here is the shared google spreadsheet with both full codes. Go to script editor.
Google Docs Link
Any help would be much appreciated. Thank you in advanced.
EDIT#3 Submit section of None Working Code
function submit(e){
var app = UiApp.getActiveApplication();
var sheet = SpreadsheetApp.openById(submissioSSKey).getActiveSheet();
var ss = SpreadsheetApp.getActiveSpreadsheet();
var projectname = e.parameter.projectname;
var projectid = e.parameter.projectid;
var projectmanager = e.parameter.projectmanager;
var salesrep = e.parameter.salesrep;
var duedate = e.parameter.duedate;
var projectphase = e.parameter.projectphase;
var disctype = e.parameter.disctype;
var mediatype = e.parameter.mediatype;
var encryptiontype = e.parameter.encryptiontype;
var password = e.parameter.password;
var quantity = e.parameter.quantity;
var specialinstructions = e.parameter.specialinstructions;
var update = "Colombo Save";
//var sheet = ss.getSheets()[0];
var uiData = [[
projectname,
projectid,
projectmanager,
salesrep,
duedate,
projectphase,
disctype,
mediatype,
encryptiontype,
password,
quantity,
specialinstructions,
update
]];
sheet.getRange(sheet.getLastRow()+1, 1, uiData.length, uiData[0].length)
.setValues(uiData);
var app = UiApp.getActiveApplication();
var result = {};
var numMembers = parseInt(e.parameter.table_tag);
result.members = [];
for(var i=1; i<=numMembers; i++){
var member = {};
member.firstName = e.parameter['fName'+i];
member.lastName = e.parameter['lName'+i];
member.company = e.parameter['company'+i];
member.address = e.parameter['address'+i];
result.members.push(member);
}
var htmlBody = 'Shipping Information: <br>'
for(var a in result.members) {
var member = result.members[a];
var fname = member.firstName;
var lname = member.lastName;
var company = member.company;
var address = member.address;
var timestamp = Utilities.formatDate(new Date(), "America/New_York", "MMMM dd, yyyy hh:mm:ss"); // Timestamp
var activeSessionuser = Session.getActiveUser();//Session.getEffectiveUser(); Get the current user in the spreadsheet
var emailAddress = 'test#email.com'; //Venue Colombo Team
var subject = "**Test Email** DVD Request Submitted - **Test Email**"+ projectname +" - "+projectid+" - "+ projectmanager;
/^var emailBody =*/
var emailBody =
"<br><font color=\"Blue\"><b><h2>Request Submitted</h2></b></font>"
+"<br/>Hi Venue Colombo Team,<br/>"
+"<br/>The following data room(s) will need a disc creation. Please begin bulk save data room and create ISO to upload to the FTP site:<br/>"
+"<br/><b>Project Name:</b> " + projectname
+"<br/><b>Project ID:</b> " + projectid
+"<br/><b>Project Manager:</b> " + projectmanager
+"<br/><b>Sales:</b> " + salesrep
+"<br/>" + htmlBody + 'Client Name: '+ fname + ' ' + lname +'<br>'+ 'Company Name: '+ company +'<br>' + 'Address: ' + address +'<br>'+'<br>'+
+"<br/>"
+"<br/><b>Phase:</b> " + projectphase
+"<br/><b>Disc Type:</b> " + disctype
+"<br/>"
+"<br/><b>Encryption:</b> " + encryptiontype
+"<br/><b>Password:</b> " + password
+"<br/><b>Quantity:</b> " + quantity
+"<br/>"
+"<br/><b>Client Due Date:</b> " + duedate
+"<br/>"
+"<br/><font color=\"Red\"><b>Special Instructions:</b></font> " + "<br/>"+ specialinstructions
+"<i><br/> <br/>This request was submitted by:</i> "
+"<br/><font color=\"blue\">Name:</font> " + activeSessionuser
+"<br/>Time Stamp: " + timestamp
+"<br/>"
+"———————————————————————————————"
+ //Line divider code —
"<br/>Venue Client Services"
+"<br/>United States: "
+"<br/>UK/International: "
+"<br/>France: "
+"<br/>Asia: ";
htmlBody += 'Client Name: '+ fname + ' ' + lname +'<br>'+ 'Company Name: '+ company +'<br>' + 'Address: ' + address +'<br>'+'<br>';
}
var optAdvancedArgs = {name: "Venue Client Services", htmlBody: emailBody};
//MailApp.sendEmail('fake#email.com', subject, '', optAdvancedArgs);
Logger.log(htmlBody);
Logger.log(emailBody);
var html = app.createHTML('First Name: '+ fname + ' ' + lname +'<br>'+ 'Company Name: '+ company +'<br>' + 'Client Address: ' + address);
app.add(html);
//dvdForm();
return app;
}
Here is the result on the Application
Here is the Logger logs
Logger.log(htmlBody);
Logger.log(emailBody);
I was finally able to figure out what the issues was with "for loop statement return undefined values"
I did not add a .addCallbackElement to the panel containing the form fields.
I have started trying to make simple HTML and CSS webpages while incorporating a bit of JavaScript. I'm trying to make a simple print button that doesn't show up when you print it. I've searched around SA for various answers and I've seen a lot of things about the link media= "print". In the stylesheet would be a class where you would write either display: none or visibility: hidden. You would then apply that to your button.
The problem is that when I try doing it, it doesn't turn invisible when the page preview pops up. Here is my main code:
<link rel="stylesheet" href="print.css"
type="text/css" media="print" />
<script type = "text/javascript">
function newPerson(firstname, lastname, age, gender, birthmonth, birthdate) {
this.firstname = firstname;
this.lastname = lastname;
this.age = age;
this.gender = gender;
this.birthmonth = birthmonth;
this.birthdate = birthdate;
this.birthyear = birthdayCalculate;
}
function birthdayCalculate() {
var date = new Date();
var CurYear = date.getFullYear()
var CurMonth = date.getMonth()
var birthyear = CurYear - this.age
if (this.birthmonth > CurMonth) {
birthyear --
}
return birthyear
}
function testFunction(form) {
var firstName = form.firstName.value
var lastName = form.lastName.value
var Age = form.Age.value
var Gender = form.Gender.value
var birthMonth = form.birthMonth.value
var birthDate = form.birthDate.value
var new1 = new newPerson(firstName, lastName, Age, Gender, birthMonth, birthDate)
var person = new1.firstname + " " + new1.lastname + " is " + new1.age + " and is " + new1.gender + " and was born on "
+ new1.birthmonth + "/" + new1.birthdate + "/" + new1.birthyear() + "." + "<br />"
document.write(person);
winVar = window.open();
winVar.document.write(person);
winVar.focus();
winVar.document.write(
"<input type='button' " +
"onClick= 'window.print();'" +
"value ='Print This Page' " +
"class = 'print' " +
"/>");}
</script>
I think you'd be able to tell I used forms. I don't think I need to show you this. The print .css is extremely simple too:
.print{
visibility: hidden
}
Does anyone see anything wrong with my script? A little something else, I'm using Google Chrome.
css will not help in this case use javascript instead. You have to do something like this:
assume this is your print button
<input type="button" value="print" onclick="this.setAttribute('hidden''hidden')"/>
hide the button when it clicked using the setAttribute function.
hope it will work..