Why won't this output anything?

Why won't this output anything? - javascript

For some reason I can't seem to get this program to output and also can't think of what I might have done wrong. I've tried it in a few different browsers and keep getting the same result, which is nothing happens
<html>
<title>Activity</title>
<head>
<script type="text/javascript">
function outputData(studentData) {
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.GetElementById("A").checked;
var sWR = document.GetElementById("WR").checked;
var sC = document.GetElementById("C").checked;
var sP = document.GetElementById("P").checked;
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if (sA) document.write("" + Anthropology + "</br>");
if (sWR) document.write("" + World Religion + "</br>");
if (sC) document.write("" + Criminology + "</br>");
if (sP) document.write("" + Philosophy + "</br>");
}
</script>
</head>
<p>Enter Student Details</br></p>
<form name="studentData" action="" method="GET">
First name:<input type="text" name="firstname" value=""><br>
<br>Last name:<input type="text" name="lastname" value=""><br>
<br>Age:<input type="text" name="age" value=""><br><br>
Select your choice of subjects:<br>
<input type="checkbox" id="A" name="subject" value="Anthropology">Anthropology<br>
<input type="checkbox" id="WR" name="subject" value="World Religion">World Religion<br>
<input type="checkbox" id="C" name="subject" value="Criminology">Criminology<br>
<input type="checkbox" id="P" name="subject" value="Philosophy">Philosophy<br>
<input type="button" value="Submit" onClick="outputData(this.form)"><br>
</form>
</html>
Sorry if this has a really simple solution, I'm only just started learning HTML.

Not sure if it is your only problem, but you are missing <body> ... </body> tags, after your </head> tag.

You have a few errors in your code:
The function GetElementByID should actually be getElementById.
The Anthropology in your document.write() is an string and should be treated as such. See the code below.
You are also missing the body tag
<html>
<title>Activity</title>
<head>
<script type = "text/javascript">
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A").checked;
var sWR = document.getElementById("WR").checked;
var sC = document.getElementById("C").checked;
var sP = document.getElementById("P").checked;
document.write("" + studentFirstName + "</br>"
+ studentLastName + "</br>"
+ studentAge + "</br>");
if(sA) document.write("Anthropology</br>");
if(sWR) document.write("World Religion</br>");
if(sC) document.write("Criminology</br>");
if(sP) document.write("Philosophy</br>");
}
</script>
</head>
<body>
<p>Enter Student Details</br></p>
<form name = "studentData" action = "" method = "GET">
First name:<input type = "text" name = "firstname" value = ""><br>
<br>Last name:<input type = "text" name = "lastname" value = ""><br>
<br>Age:<input type = "text" name = "age" value = ""><br><br>
Select your choice of subjects:<br>
<input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br>
<input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br>
<input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br>
<input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br>
<input type = "button" value = "Submit" onClick = "outputData(this.form)"><br>
</form>
If you wanted to get the values of the checkboxes instead then use the following JS (in the script tag instead):
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A");
var sWR = document.getElementById("WR");
var sC = document.getElementById("C");
var sP = document.getElementById("P");
document.write("" + studentFirstName + "</br>"
+ studentLastName + "</br>"
+ studentAge + "</br>");
if(sA.checked) document.write("" + sA.value + "</br>");
if(sWR.checked) document.write("" + sWR.value + "</br>");
if(sC.checked) document.write("" + sC.value + "</br>");
if(sP.checked) document.write("" + sP.value + "</br>");
}

There are several issues with your code formatting (GetElementById should be getElementById, missing <body>, etc). But I feel like what is preventing your code from running, is the fact that you are treating strings as a variable in your conditions.
if (sWR) document.write("" + World Religion + "</br>");
Should be quoted...
if (sWR) document.write("" + 'World Religion' + "</br>");
Also, using <br> for every line is a lazy way of doing things. You should really be building proper HTML and wrapping your elements correctly based on the layout you need. Always pair <label> with your <input> tags, and leverage CSS to your advantage.
Look into the bootstrap library because it makes styling forms much easier and has a lot of other capabilities.
Take a look at the final product below...
.form-title {
font-size: 14px;
font-weight: bold;
}
.selection {
margin: 10px 0;
font-weight: bold;
}
.input-group>label,
.input-group>input {
margin: 5px 0;
display: inline-block;
}
.submit-button {
margin: 10px 0;
}
<html>
<title>Activity</title>
<head>
<script type="text/javascript">
function outputData(studentData) {
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A").checked;
var sWR = document.getElementById("WR").checked;
var sC = document.getElementById("C").checked;
var sP = document.getElementById("P").checked;
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if (sA) document.write("" + 'Anthropology' + "</br>");
if (sWR) document.write("" + 'World Religion' + "</br>");
if (sC) document.write("" + 'Criminology' + "</br>");
if (sP) document.write("" + 'Philosophy' + "</br>");
}
</script>
</head>
<body>
<p class="form-title">Enter Student Details</p>
<form name="studentData" action="" method="GET">
<div class="input-group">
<label>First name:</label>
<input type="text" name="firstname" value="">
</div>
<div class="input-group">
<label>Last name:</label>
<input type="text" name="lastname" value="">
</div>
<div class="input-group">
<label>Age:</label>
<input type="text" name="age" value="">
</div>
<div class="selection">
Select your choice of subjects:
</div>
<div class="input-group">
<input type="checkbox" id="A" name="subject" value="Anthropology">
<label>Anthropology</label>
</div>
<div class="input-group">
<input type="checkbox" id="WR" name="subject" value="World Religion">
<label>World Religion</label>
</div>
<div class="input-group">
<input type="checkbox" id="C" name="subject" value="Criminology">
<label>Criminology</label>
</div>
<div class="input-group">
<input type="checkbox" id="P" name="subject" value="Philosophy">
<label>Philosophy</label>
</div>
<input type="button" value="Submit" onClick="outputData(this.form)" class="submit-button">
</form>
</body>
</html>

Change GetElementById to getElementById
use checkbox value instead of typing it manually.
var sA = document.getElementById("A");
This will get the input value field/console.log(sA) - you will see the values in there
if(sA.checked) document.write("" + sA.value + "");
Activity
<head>
<script type = "text/javascript">
function outputData(studentData){
var studentFirstName = studentData.firstname.value;
var studentLastName = studentData.lastname.value;
var studentAge = studentData.age.value;
var sA = document.getElementById("A");
var sWR = document.getElementById("WR");
var sC = document.getElementById("C");
var sP = document.getElementById("P");
document.write("" + studentFirstName + "</br>" + studentLastName + "</br>" + studentAge + "</br>");
if(sA.checked) document.write("" + sA.value + "</br>");
if(sWR.checked) document.write("" + sWR.value + "</br>");
if(sC.checked) document.write("" + sC.value + "</br>");
if(sP.checked) document.write("" + sP.value + "</br>");
}
</script>
</head>
<p>Enter Student Details</br></p>
<form name = "studentData" >
First name:<input type = "text" name = "firstname" value = ""><br>
<br>Last name:<input type = "text" name = "lastname" value = ""><br>
<br>Age:<input type = "text" name = "age" value = ""><br><br>
Select your choice of subjects:<br>
<input type = "checkbox" id = "A" name= "subject" value = "Anthropology">Anthropology<br>
<input type = "checkbox" id = "WR" name= "subject" value = "World Religion">World Religion<br>
<input type = "checkbox" id = "C" name="subject" value ="Criminology">Criminology<br>
<input type = "checkbox" id = "P" name="subject" value ="Philosophy">Philosophy<br>
<input type = "button" value = "Submit" onClick = "outputData(this.form)"><br>
</form>

Related

how can i make the upper case for the full name only

How can I make the output of the first and last name only upper case? Like it is shown in the picture. I tried doing it but it only works when in the input, not the output.
function myFunction(){
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var n = document.getElementById("days").value;
var val= document.getElementById("room").value;
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + Fname + " " + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" +"Amount=$ " + total +
"<br>" + " Any Special Request: " + request ;
return false;
};
body{
background-color:orange;
margin:20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King " >King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

Javascript has provided .toUpperCase() function for String.
var fullName = Fname + " " + Lname;
document.getElementById("result").innerHTML = " Dear " + fullName.toUpperCase() + " , thank you for booking with us."+

Use the following javascript:
The uppercase function converts to uppercase. There is a native method to convert to uppercase called toUpperCase(). More info here
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var n = document.getElementById("days").value;
var val = document.getElementById("room").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else {
total = n * 10;
}
document.getElementById("result").innerHTML = " Dear " + capitalize(Fname) + " " + capitalize(Lname) + ", thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " room for " + n + " days " +
"<br>" + "Amount=$ " + total +
"<br>" + " Any Special Request: " + request;
return false;
};
function capitalize(e) {
return e.toUpperCase()
}
body {
background-color: orange;
margin: 20px;
}
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option></option>
<option value="King ">King $30</option>
<option value="Double ">Double $20</option>
<option value="Single ">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="return myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:#cce6ff;width:350px;font-weight: bold;" id="result"> </p>

Mailto with custom subject, body, etc. using jquery

I'm creating a custom HTML page for my team at work. We are using dropdowns, text fields, and radio buttons to generate the fields of an email. We all use IE and Outlook so that's not a problem. I'm having trouble getting the "generate email" button to fill in the message. I can get the email window to pop up, but all of the fields are blank. I need the subject, to field, CC field, and body to be filled in according to the options they selected on the page. Here's my code:
<script>
$(function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue") + "<br>Contact info: " + $("#contactInformation") + "<br>Requested action: " + $(".requestedAction:checked");
window.location.href = "mailto:" + emailTo + "&CC=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
});
</script>
<body>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
</body>
In addition, I also need to format the body with line breaks and bold letters. The code above doesn't work. I'm pretty sure it won't work because of the less than/greater than symbols, but I dunno how else to put in HTML code. I know its possible because the old tool I'm replacing was able to achieve it, I just don't know how. Go easy on me, I'm new to jQuery and Javascript. Thanks in advance!

You are missing the ? in the mailto url so the querystring parameters are not passed in (note the ? before cc=):
window.location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
To add line breaks you could use %0A%0A as a line breakers. This will spawn different paragraphs like so:
&body=first line %0A%0A second line
You also have some errors in you code, some missing val() calls, to get the fields values, and missing conditionals to check if fields are set (to build the query string including those values or not).
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
Hope it helps.

function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">

More than one form on a single page with conflicting outputs. Need Javascript only solution

I posted a similar question before, but I failed to clarify I want to avoid using jQuery or any outside sources of code. I simply want to be able to have two or more forms existing on a single page that function independent of one another. I assume it's somewhere in my HTML and scripting where I have failed to identify the right output, please help.
<form name="Form1" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="name" id="name" placeholder="Name"><br>
<b><font color="#2C3E60">Phone number:</font></b><br>
<input type="text" name="phone" id="phone" placeholder="Phone number"><br>
<b><font color="#2C3E60">Yes/No?:</font></b> <br>
<select type="drop" name="Question1" id="question1">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Yes/No 2?:</font></b><br>
<select type="drop" name="Question2" id="question2">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>
<br>
<b><font color="#2C3E60">Notes:</font></b><br>
<textarea type="textarea" name="Notes" id="notes" placeholder="Problem"
cols="70" rows="3"></textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue" placeholder="Issue"
cols="70" rows="6"></textarea>
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action" placeholder="Action"
cols="70" rows="10"></textarea>
<br>
<textarea type="textarea" name="form1output"
onclick="this.focus();this.select()" id="output" cols="70" rows="25"
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert()" id="combine1">Combine</button>
<br><br>
</div>
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>
</form>
<hr>
<form name="Form2" onsubmit="return false;" action="">
<b><font color="#2C3E60">Name:</font></b><br>
<input type="text" name="Name2" id="name2" placeholder="Name"><br>
<b><font color="#2C3E60">Phone Number:</font></b><br>
<input type="text" name="Currentnumber" id="currentnumber"
placeholder="Corrent phone number"><br>
<b><font color="#2C3E60">Y or N:</font></b> <br>
<select type="drop" name="YESNO" id="yesno">
<option value="Select Yes or No">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<br>
<b><font color="#2C3E60">Did you offer self serve?:</font></b><br>
<select type="drop" name="Selfserve" id="SSO">
<option value="Select Yes, No or n/a">...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
<option value="n/a">n/a</option>
</select>
<br>
<b><font color="#2C3E60">Problem:</font></b><br>
<textarea type="textarea" name="Problem" id="problem" placeholder="Problem"
cols="70" rows="3"> </textarea>
<br>
<b><font color="#2C3E60">Issue:</font></b><br>
<textarea type="textarea" name="Issue" id="issue2" placeholder="Issue"
cols="70" rows="6"> </textarea>
<br>
<b><font color="#2C3E60">Action:</font></b><br>
<textarea type="textarea" name="Action" id="action2" placeholder="Action"
cols="70" rows="10"></textarea>
<br>
<textarea type="textarea" name="form2output" id="output2"
onclick="this.focus();this.select()" cols="70" rows="25"
placeholder="Output"></textarea>
<br>
<div class="btn-group">
<button value="Combine" onclick="convert2()" id="combine2">Combine</button>
<br><br>
</div>
<div class="btn-group">
<button type="reset" value="Reset form">Reset form</button> <br><br>
</div>
</form>
My first script
<script>
/*Reset command*/
$(document).ready(function(){
$(":reset").css("background-color", "");
});
</script>
<script>
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";
document.getElementById("output").value = output;
}
function myFunction(x) {
x.classList.toggle("change");
}
</script>
And the second...
<script>
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert2() {
var Name2 = document.getElementById("name2").value;
var Currentnumber = document.getElementById("currentnumber").value;
var YESNO = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";
document.getElementById("output2").value = output;
}
function myFunction(x) {
x.classList.toggle("change");
}
</script>
As I said, I need everything for the code to exist on just the one page.

JQuery is useful in this case to speed up your development process , but if you want this approach with pure JS this can help you
function convert(currentForm){
var fields = currentForm.elements;
var limit = fields.length;
var output = "";
for(var i = 0; i < limit; i++){
var field = fields[i];
if(field.getAttribute("data-use") !== "true"){
continue;
}
var value = null;
if (field.type === "input" || field.type === "textarea"){
value = field.value;
}
if(field.type === "select-one"){
value = field.options[field.selectedIndex].value;
}
var label = field.name + ": " + value + "\n";
output += label;
}
var outputContainer = document.getElementById("output");
outputContainer.innerHTML = output;
return false;
}
You should set data-use="true" attribute for every input/field you want to capture.
In your form tag you should replace onsubmit="return convert(this); instead onsubmit="return false"
Hope it helps you.
Here a demo

your have some syntaxic errors
here a corrected code
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;
if (!str)
return str;
var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' :
'|\\S+?(\\s|$)');
return str.match( RegExp(regex, 'g') ).join(brk);
}
function convert() {
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var question1 = document.getElementById("question1").value;
var question2 = document.getElementById("question2").value;
var notes = document.getElementById("notes").value;
var issue = document.getElementById("issue").value;
var action = document.getElementById("action").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name: " + name + "\n";
output += "Number: " + phone + "\n";
output += "Question 1?: " + question1 + "\n";
output += "Question 2?: " + question2 + "\n\n";
output += "Notes: " + notes + "\n\n";
output += "Issue: " + issue + "\n\n";
output += "Action: " + action + " ";
document.getElementById("output").value = output;
}
/////// second
function convert1() {
var name2 = document.getElementById("name2").value;
var currentnumber = document.getElementById("currentnumber").value;
var yesno = document.getElementById("yesno").value;
var selfserve = document.getElementById("SSO").value;
var problem = document.getElementById("problem").value;
var issue2 = document.getElementById("issue2").value;
var action2 = document.getElementById("action2").value;
//input = wordwrap(input, 70, true);
var output = "";
output += "Name2: " + name2 + "\n";
output += "Current number: " + currentnumber + "\n";
output += "Yes No?: " + yesno + "\n";
output += "Self Serve?: " + selfserve + "\n\n";
output += "Problem: " + problem + "\n\n";
output += "Issue: " + issue2 + "\n\n";
output += "Action: " + action2 + " ";
document.getElementById("output2").value = output;
}

JavaScript form validation box highlighting

JavaScript:
function validateForm(){
var getNoun = document.formPG.fNoun.value;
var getVerb = document.formPG.fVerb.value;
var getPronoun = document.formPG.fPronoun.value;
var getAdverb = document.formPG.fAdverb.value;
var getAdjective = document.formPG.fAdjective.value;
var getSillyWord = document.formPG.fSillyWord.value;
var getMagic = document.formPG.fMagic.value;
if((getNoun) === ""){
alert("You entered a number value, please enter a Noun.");
document.formPG.fNoun.focus();
document.getElementById('iNoun').style.borderColor = "red";
return false;
}
//write story to [document].html
paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>";
paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + ".";
document.write(paragraph);
}
HTML:
<body>
<div class="container">
<h1>Mad Lib</h1>
<form name="formPG" onsubmit="validateForm()" method="post">
Noun: <input type="text" name="fNoun" id="iNoun"><br>
Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br>
Verb: <input type="text" name="fVerb" id="iVerb"><br>
Adverb: <input type="text" name="fAdverb" id="iAdverb"><br>
Adjective: <input type="text" name="fAdjective" id="iAdjective"><br>
Silly Word: <input type="text" name="fSillyWord" id=""iSillyWord"><br>
Magic Spell: <input type="text" name="fMagic" id="iMagic"><br>
<input type="submit" value="submit">
</form>
<br>
<script src="madLib_v2.js"></script>
</div>
</body>
The problem is whenever I hit the "submit" button the page hits the document.getElementById('iNoun').style.borderColor = "red"; and goes away. The page refreshes instantly and the box is only highlighted for a fraction of a second. I want it to stay there until the page is refreshed basically or until they get it correct.

Do with return validateForm() .Then only its prevent page refresh .
Remove the unwanted space and quotes in elements attributes.like id=""iSillyWord"-extra quotes and type="submit "-unwanted space
function validateForm() {
var getNoun = document.formPG.fNoun.value;
var getVerb = document.formPG.fVerb.value;
var getPronoun = document.formPG.fPronoun.value;
var getAdverb = document.formPG.fAdverb.value;
var getAdjective = document.formPG.fAdjective.value;
var getSillyWord = document.formPG.fSillyWord.value;
var getMagic = document.formPG.fMagic.value;
if ((getNoun) === "") {
alert("You entered a number value, please enter a Noun.");
document.formPG.fNoun.focus();
document.getElementById('iNoun').style.borderColor = "red";
return false;
}
//write story to [document].html
paragraph = "There was once a " + getAdjective + " magician who roamed the wild terrains of " + getAdverb + ".<br>";
paragraph += "The magician " + getNoun + " cast the mighty spell " + getMagic + " around the " + getSillyWord + ".<br>" + getPronoun + " knew there was only one way to win the war - " + getVerb + ".";
document.write(paragraph);
}
<body>
<div class="container">
<h1>Mad Lib</h1>
<form name="formPG" onsubmit="return validateForm()" method="post">
Noun: <input type="text" name="fNoun" id="iNoun"><br> Pronoun: <input type="text" name="fPronoun" id="iPronoun"><br> Verb: <input type="text" name="fVerb" id="iVerb"><br> Adverb: <input type="text" name="fAdverb" id="iAdverb"><br> Adjective:
<input type="text" name="fAdjective" id="iAdjective"><br> Silly Word: <input type="text" name="fSillyWord" id="iSillyWord">
<br> Magic Spell: <input type="text " name="fMagic" id="iMagic"><br>
<input type="submit" value="submit">
</form>
<br>
</div>
</body>

prevent the default behavior as the form is getting submitted. Once it is valid use ajax to submit the form
JS
function validateForm(e){
e.preventDefault();
// rest of the code
}
HTML
pass the event object to the function
onsubmit="validateForm(event)"
DEMO

Output in Textarea from User Input

PROBLEM SOLVED
I just started learning JavaScript, and I came across a problem while coding a quick tool for a game that I play. I want users to be able to input a couple of things via an HTML Form and I want the JS Script to take that input and turn it into an SQL.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>
<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>
And here is my JS:
// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
var furniID = document.getElementById('furniID').value;
var furniName = document.getElementById('furniName').value;
var fileName = document.getElementById('fileName').value;
var furniType = document.getElementById('furniType').value;
var furniWidth = document.getElementById('furniWidth').value;
var furniLength = document.getElementById('furniLength').value;
var furniHeight = document.getElementById('furniHeight').value;
var canStack = document.getElementById('canStack').value;
var canSit = document.getElementById('canSit').value;
var canWalk = document.getElementById('canWalk').value;
var spriteID = document.getElementById('spriteID').value;
var canRecycle = document.getElementById('canRecycle').value;
var canTrade = document.getElementById('canTrade').value;
var canSell = document.getElementById('canSell').value;
var canGive = document.getElementById('canGive').value;
var invStack = document.getElementById('invStack').value;
var intType = document.getElementById('intType').value;
var intCount = document.getElementById('intCount').value;
var vendingID = document.getElementById('vendingID').value;
var comma = ", ";
var commaQuotes = "', '";
var quoteComma = "', ";
var commaQuote = ", '";
document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}
I can't seem to pinpoint exactly what it is that I am doing wrong. If somebody could please assist me, that would be greatly appreciated.
Thanks!
Thanks to a few users here! The solution was a typo and I believe it was also value instead of innerHTML too.

A simple typo: furniId instead of furniID on the last line
JavaScript is case-sensitive so if you capitalize a variable name differently it's a completely different variable, and so it does not know what you mean.

You got a typo: furniID in your last element which is document.getElementById('furniSQL').value= is spelled as furniId

Textareas are modified by value, not innerHTML
so set it up to
document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
and you should be good to go.

We Keep Coding

JavaScript is the programming language of the Web.

Why won't this output anything? - javascript

Not sure if it is your only problem, but you are missing <body> ... </body> tags, after your </head> tag.

Related

how can i make the upper case for the full name only

Mailto with custom subject, body, etc. using jquery

More than one form on a single page with conflicting outputs. Need Javascript only solution

JavaScript form validation box highlighting

Output in Textarea from User Input

Categories

Resources