Javascript - generating result from multiple form choices - javascript

Im new here, Im new in programming as well and I seldom code anything, but recently I've always wanted to improve my work place and I just want to create a simple form for my colleagues.
To make things short, I've created the form, what I need is just generating all the result of the form into a textarea.
Now my problem is, I've made several type of "Event" in the form that have different set of choices, and what I want is the result of that set of "Event" generated as well with the basic information.
Well, here example of my code; Begin Javascript
function generateresult() {
name = document.FORM.namefromtextarea.value;
phone = document.FORM.phonefromtextarea.value;
address = document.FORM.addressfromtextarea.value;
name2 = "Name: " + name + "\n";
phone2 = "Phone: " + phone + "\n";
address2 = "Address: " + address + "\n";
//problem type 1
lostitem = document.FORM.lostitemfromtextarea.value;
when = document.FORM.whenfromtextarea.value;
where = document.FORM.wherefromtextarea.value;
lostitem2 = "Lost Item?: " + lostitem + "\n";
when2 = "When?: " + when + "\n";
where2 = "Where?: " + where + "\n";
//problem type 2
lostperson = document.FORM.lostpersonfromtextarea.value;
personage = document.FORM.personagefromtextarea.value;
personcloth = document.FORM.personclothfromtextarea.value;
lostperson2 = "Person Name?: " + lostperson + "\n";
personage2 = "Age?: " + personage + "\n";
personcloth2 = "Wearing?: " + personcloth + "\n";
if (document.FORM.problemtype.value="Lost Item")
{
eventtype = type1;
}
else if (document.FORM.problemtype.value="Lost Person")
{
eventtype = type2;
}
type1 = lostitem2 + when2 + where2 ;
type2 = lostperson2 + personage2 + personcloth2 ;
document.FORM.generateresulttext.value = name2 + phone2 + address2 + eventtype ;}
End of javascript
And if a user clicked option that have value "Lost Person", the result for generated text will be taken from event "type2"
So I've managed to get the result for name, phone, and address, but as for lost item result, the value of the result became "undefined".
So... how exactly can I code this? I am not even sure if Im really doing the right script / method for my simple form... Thanks in advance

It looks to me like you might be trying to create a variable that takes data from an inexistant element. You might want to put the code you have inside another function.
function generateresult() {
name = document.FORM.namefromtextarea.value;
phone = document.FORM.phonefromtextarea.value;
address = document.FORM.addressfromtextarea.value;
name2 = "Name: " + name + "\n";
phone2 = "Phone: " + phone + "\n";
address2 = "Address: " + address + "\n";
//problem type 1
function firstType(){
lostitem = document.FORM.lostitemfromtextarea.value;
when = document.FORM.whenfromtextarea.value;
where = document.FORM.wherefromtextarea.value;
lostitem2 = "Lost Item?: " + lostitem + "\n";
when2 = "When?: " + when + "\n";
where2 = "Where?: " + where + "\n";
document.FORM.generateresulttext.value = name2 + phone2 + address2 + lostitem2 + when2 + where2 ;
}
//problem type 2
function secondType(){
lostperson = document.FORM.lostpersonfromtextarea.value;
personage = document.FORM.personagefromtextarea.value;
personcloth = document.FORM.personclothfromtextarea.value;
lostperson2 = "Person Name?: " + lostperson + "\n";
personage2 = "Age?: " + personage + "\n";
personcloth2 = "Wearing?: " + personcloth + "\n";
document.FORM.generateresulttext.value = name2 + phone2 + address2 + lostperson2 + personage2 + personcloth2 ;
}
if (document.FORM.problemtype.value="Lost Item")
{
firstType();
}
else if (document.FORM.problemtype.value="Lost Person")
{
secondType();
}
}
In the future, you should NOT put numbers in a variable's name. You should also NEVER declare variables like you're doing here. When you want to create a variable, you type var variableName = variableValue. You also NEVER use words like where or when for a variable name, but instead name it to something like lostWhere or lostWhen.

Related

Attempting to output to a text box with Javascript

I'm creating a communications generator that will standardise SMS communications regarding critical IT incidents for my company. I've got an IF/ELSE statement that identifies whether an issue is new, updated, or resolved to pull the necessary information together and format it accordingly. As far as I can tell, everything here is fine, however I'm having an issue writing to a text box ('smsToSend') which should allow the user to review before they copy the text across to our sms sender app, as nothing is being output into this box.
function generateSMS(){
var issueTitle = document.getElementById("incidentTitle");
var advisorImpact = document.getElementById("advisorImpact";
var incidentUpdate = document.getElementById("incidentUpdate");
var incidentStatus = document.getElementById("incidentState");
var startTime = document.getElementById("startTime");
var endTime = document.getElementById("endTime");
var incidentPriority = document.getElementById("incidentPriority");
var incidentBrand = "TechTeam";
var systemImpacted = document.getElementById("systemImpacted");
var incidentReference = document.getElementById("incidentReference");
var smsToSend = document.getElementById("smsToSend");
if (incidentStatus != "Closed"){
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT RESOLVED: " + systemImpacted + ": " + incidentUpdate + ": Start: " + startTime + " End: " + endTime + " Reference: " + incidentReference;
}
else{
if (incidentUpdate == "We are investigating this issue"){
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT ISSUE: " + systemImpacted + ": " + issueTitle + ". " + advisorImpact + ": " + incidentReference;
}
else {
smsToSend = "P" + incidentPriority + " " + incidentBrand + "IT UPDATE: " + systemImpacted + ": " + incidentUpdate + ": " + incidentReference;
}
}
}
generateSMS();
alert.getElementById(smsToSend);
Try replacing all assignments to smsToSend like this:
smsToSend = yourValue;
With this:
smsToSend.value = yourValue;
Your problem happens because smsToSend is an instance of an element, rather than a variable linked to the displayed text. To update the element's value, you have to change the value property of the element.
The Right way of setting the value to a text box is
var smsToSend = document.getElementById("smsToSend");
smsToSend.value = "Your value";

Text input value is returning undefined without any error

I want to make alert message show the data of the form I input.But the text element's data doesn't work correctly.
<script type="text/javascript">
function showUserData(){
category = document.getElementById("category").value;
regicon = "";
var obj=document.getElementsByName("register");
for(idx in obj){
if(obj[idx].checked){
regicon += obj[idx].value;
}
}
title = document.getElementById("title").value;//here is the problem
author = document.getElementById("author").value;
email = document.getElementById("email").value;
content = document.getElementById("content").value;
password = document.getElementById("password").value;
coverdate = document.getElementById("coverdate").value;
contentimage = document.getElementById("contentimage").value;//
time_result = new Date();//기사등록일은 date()
window.alert("카테고리: "+category + "\n"
+ "등록상태: " + regicon + "\n"
+ "제목: " + title + "\n"
+ "이메일: " + email + "\n"
+ "기자: " + author + "\n"
+ "내용: " + content + "\n"
+ "취재일: " + coverdate + "\n"
+ "기사등록일: " + time_result + "\n");
}
</script>
When I run the code, the alert show 'undefined' at the title value.
I thought that the title value doesn't initialized so I tried
title = "";
It was not the solution.How can I make the function run correctly
Have you created a titlevariable? It seems to me you forgot to put "var" or "const" before the title variable.

Issue running javascript in webbrowser control c#

Sceneario:
I am making custom html in a WebBrowser control basically it is to enter student marks . On a column Total score when user enters number in it the grade in next column should be automatically populated, assuming for now score above 50 then grade = A , else grade = F.
My Code:
This is how i am making html :
for (int i = 0; i < studentData.Tables[0].Rows.Count; i++)
{
string fullname = studentData.Tables[0].Rows[i]["first name"].ToString().ToUpper() + " " + studentData.Tables[0].Rows[i]["surname"].ToString().ToUpper() + " " + studentData.Tables[0].Rows[i]["Other name"].ToString().ToUpper();
string studentNumber = studentData.Tables[0].Rows[i]["studentformnum"].ToString().ToUpper();
string tmptxt = string.Empty;
tmptxt = "<tr class=\"records\"><td><input onchange=\"doit('score" + i + "','grade_" + i + "')\" ";
tmptxt += "id=\"totalScore\" id=\"score" + i + "\" style=\"text-align:center\" type=\"text\" /></td>";
tmptxt += "<td><input id=\"grade_" + i + "\" style=\"text-align:center\" type=\"text\" /></td><td></td></tr>";
sb.Append(tmptxt);
}
And Javascript Funtion:
content = content.Replace("{JAVASCRIPT}", "<script type='text/javascript'>function doit(tag,tag2)
{ alert(tag); var score= document.getElementById(tag).value; alert(score);}</script>");
alert(tag) works then i get error.
This Does not work i get error popup , value null or undefined etc..
If i just do alert('abc'); i see alert .
Any suggestion what i am missing here?
The single/double quotes for tmptext are all wrong.

Storing data from a select tag to a string using Javascript

I'm trying to take information out of a form controlled by a select statement and store it in a string. The plan is to send the information gathered from the user via email, which I used PHP to do. I have an idea how to do it (a while loop that's controlled by how many lines are in the list,) but I can't quite gather the information.
Here's the loop:
var empMessage = function(){
messageString = "";
var noEmp = $("#drpEmp option").length;
var i = 0;
$("#drpEmp").selector.index = i;
while (i < noEmp){
$("#drpEmp").index = i;
messageString = messageString +
"Name: " + firstName.val + " " + MI.val + " " + lastName.val + "<br/>" +
"Business: " + BusinessName.val + "<br/>" +
"Address: " + address.val + "<br/>" +
" " + city.val + ", " + state.val + " " + zip.val + "<br/>";
}
messageString = "<strong>Employee Information</strong><br/>" . messageString;
i++;
}
$("#stringHolder").val(messageString);
}
Here's the JS Fiddle:
https://jsfiddle.net/xptxz7by/3/
I know I probably really off. I know I have the loop working and the list is getting counted, but I can't seem to retrieve the information. I'm also thinking I'm approaching sending the information wrong and there's probably a better way of doing it, I just haven't figured out how.
The data you want is in the Employee object that you saved in each option's .data(), so you need to get that data and use the properties.
messageString = "<strong>Employee Information</strong><br/>";
$("drpEmp option:selected").each(function() {
var employee = $(this).data("employee");
messageString +=
"Name: " + employee.firstName + " " + employee.MI + " " + lastName + "<br/>" +
"Business: " + employee.BusinessName + "<br/>" +
"Address: " + employee.address + "<br/>" +
" " + employee.city + ", " + employee.state + " " + employee.zip + "<br/>";
});

How can create toggleable divs using javascript's innerhtml function?

I am trying to import information from an XML file, and create a name which, when clicked, will show more information. This information will be inside a div with no display until the header has been clicked.
This is the idea. Doesn't work.
$(document).ready(function () {
$.ajax({
type: "Get",
dataType: "xml",
url: 'service.xml',
success: function (xml) {
$(xml).find('Service[Name="j1979"]').find("Define").each(function () {
var PID = $(this).attr("PID");
var name = $(this).find("Name").text();
var source = $(this).find("source").text();
var doffset = $(this).find("DOffset").text();
var type = $(this).find("Type").text();
var length = $(this).find("Lenght").text();
var scale = $(this).find("Scale").text();
var noffset = $(this).find("NOffset").text();
var units = $(this).find("Units").text();
var moreinfo = "<div id='moreinfo'>source += '\r\n' += doffset += '\r\n' += type += '\r\n' += length += '\r\n' += scale += '\r\n' += noffset += '\r\n' += units</div>";
document.getElementById("j1979").innerHTML += PID += " ";
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
document.getElementById("j1979").innerHTML += moreinfo;
});
}
});
});
Sorry for any obvious mistakes and/or ugly code.
I assume that this is what you want to achieve: DEMO
just assume that the script in the demo is inside the success function
first, you have some error in here
document.getElementById("j1979").innerHTML += < p onclick = "document.getElementById('moreinfo').style.display = 'inline-block'" > += "\r\n";
this will not add the p element to the element with id j1979 because you write it like that, where you should be writing it like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\" ></p>";
note the quotes at start and end, and the closing tag
second, there's no word or anything inside the p element that indicates that you could click it to show more information, so put the PID inside the p like this
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
here's the full code with some CSS style to hide it before the user click on the PID
$(document).ready(function () {
var PID = "testPID";
var name = "Random Name";
var source = "Google";
var doffset = "1000";
var type = "A-9001";
var length = "50CM";
var scale = "100";
var noffset = "0";
var units = "Some Units";
var moreinfo = "<div id='moreinfo'>source: " + source + "</br>" + "doffset: " + doffset + "</br>" + "type: " + type + "</br>" + "length: " + length + "</br>" + "scale: " + scale + "</br>" + "noffset: " + noffset + "</br>" + "units: " + units + "</div>";
document.getElementById("j1979").innerHTML += "<p onclick=\"document.getElementById('moreinfo').style.display = 'inline-block';\">" + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
});
#moreinfo {
display: none;
}
#j1979 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="j1979"></div>
From the code you have, you can use '+' operator to concatenate strings.
When you need to use single quote inside string defined with single quote, you can use backslash (\) as escape character before it.
Also, you need to hide the div with class "moreinfo" initially.
As for new line, if you want each attribute in new line in moreinfo class, it can be achieved by using HTML "pre" tag or "br" tag or some other way.
So code would be:
var moreinfo = "<pre id='moreinfo' style='display:none'> source = " + source + "\r\n doffset = " + doffset + "\r\n type = " + type + "\r\n length = " + length + "\r\n scale = " + scale + "\r\n noffset = " + noffset + "\r\n units = " + units +"</pre>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
or
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
If you want to toggle display on click, you can use ternary operator to give condition in onclick function:
var moreinfo = "<div id='moreinfo' style='display:none'> source = " + source + "<br> doffset = " + doffset + "<br> type = " + type + "<br> length = " + length + "<br> scale = " + scale + "<br> noffset = " + noffset + "<br> units = " + units +"</div>";
document.getElementById("j1979").innerHTML += '<p onclick="document.getElementById(\'moreinfo\').style.display == \'inline-block\' ? document.getElementById(\'moreinfo\').style.display = \'none\' : document.getElementById(\'moreinfo\').style.display = \'inline-block\'">\r\n' + PID + "</p>";
document.getElementById("j1979").innerHTML += moreinfo;
I wrote a program where I needed to toggle a div with javascript. I found a solution with this code.
function toggle( selector ) {
var nodes = document.querySelectorAll( selector ),
node,
styleProperty = function(a, b) {
return window.getComputedStyle ? window.getComputedStyle(a).getPropertyValue(b) : a.currentStyle[b];
};
[].forEach.call(nodes, function( a, b ) {
node = a;
node.style.display = styleProperty(node, 'display') === 'block' ? 'none' : 'block';
});
You can then call the function with:
toggle('.idOrClass');
make sure you use single quotes around the class or id name
Hope this helps! :)

Categories

Resources