Javascript - combining selections from several forms to produce a final outcome

Hello everyone, I am a newcomer to this community and also to the world of programming. Despite my limited experience with coding, I have been eager to enhance my workplace by creating a basic form for my colleagues.

In summary, I have successfully created the form, but I am now facing the challenge of generating all the form results into a textarea.

The issue lies in the fact that my form includes various types of "Event" with distinct sets of choices, and I aim to have the results of each "Event" set generated alongside the basic information.

Here is an excerpt of my code; Beginning of 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";

//Issue 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";

//Issue 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

If a user selects an option with the value "Lost Person", the generated text result will be derived from event "type2"

While I have successfully obtained the results for name, phone, and address, the issue arises with the lost item result, which for some reason displays as "undefined".

Thus, I am uncertain about the accuracy of my script/method for this simple form. Any guidance on how to resolve this issue would be greatly appreciated. Thank you in advance.

Answer №1

It appears that you may be attempting to create a variable that retrieves data from a nonexistent element. Consider enclosing your code within another function.

function generateOutput() {

firstName = document.FORM.namefromtextarea.value;
phoneNumber = document.FORM.phonefromtextarea.value;
address = document.FORM.addressfromtextarea.value;

firstNameFormatted = "Name: " + firstName + "\n";
phoneFormatted = "Phone: " + phoneNumber + "\n";
addressFormatted = "Address: " + address + "\n";

//Issue type 1
function handleFirstType(){

    lostItem = document.FORM.lostitemfromtextarea.value;
    whenLost = document.FORM.whenfromtextarea.value;
    locationLost = document.FORM.wherefromtextarea.value;

    lostItemFormatted = "Lost Item?: " + lostItem + "\n";
    whenLostFormatted = "When?: " + whenLost + "\n";
    locationLostFormatted = "Where?: " + locationLost + "\n";

    document.FORM.generateresulttext.value = firstNameFormatted + phoneFormatted + addressFormatted + lostItemFormatted + whenLostFormatted + locationLostFormatted ;
}

//Issue type 2
function handleSecondType(){

    missingPerson = document.FORM.lostpersonfromtextarea.value;
    personAge = document.FORM.personagefromtextarea.value;
    personClothing = document.FORM.personclothfromtextarea.value;

    missingPersonFormatted = "Person's Name?: " + missingPerson + "\n";
    personAgeFormatted = "Age?: " + personAge + "\n";
    personClothingFormatted = "Wearing?: " + personClothing + "\n";

    document.FORM.generateresulttext.value = firstNameFormatted + phoneFormatted + addressFormatted + missingPersonFormatted + personAgeFormatted + personClothingFormatted ;
}

if (document.FORM.problemtype.value="Lost Item")
{
    handleFirstType();
}
else if (document.FORM.problemtype.value="Lost Person")
{
    handleSecondType();
}

}

In future instances, avoid using numbers in variable names and refrain from declaring variables in the manner demonstrated here. When creating a variable, use the format var variableName = variableValue. Additionally, avoid generic words like where or when for variable names, opting instead for more descriptive terms like lostWhere or lostWhen.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why does a black model appear when loading a GLTF model with materials?

I am currently attempting to load a 3D model in glb format. Below is the code snippet: Expected Outcome: Image Current Outcome: Image var renderer = new THREE.WebGLRenderer(); renderer.setSize(1000, 1000); renderer.setPixelRatio(window.devicePixelRati ...

Custom validation preventing Ng-minlength from functioning correctly

I'm currently working on an angularJS project where I am trying to create a form for users to input their username. The application needs to validate if the username is available in the database and if it falls within a character length of 5 to 10. & ...

Use hyphens instead of spaces in angular js data binding

<form role="form" method="POST" action="{{ url('/roles/save') }}" data-ng-app=""> <div class="form-group"> <label>Page-Title:</label> <input type="text" required value="" data-ng-model="title" name="pag ...

What should you do when you need to send a message from a website to an MQTT broker that lacks Websockets support?

Currently venturing into the realm of web development, I find myself tackling a project that involves sending messages from my website to Thingstream, an MQTT broker. My initial attempt using the MQTT Paho JavaScript library was thwarted by the fact that ...

Incorporate and interpret a custom JSON object within my Shopify Liquid theme

In an attempt to integrate custom data into my Shopify liquid theme, I stored a JSON file in the assets folder. My goal is to retrieve and parse this JSON object within a jQuery method from a JavaScript file also located in the assets folder. Despite try ...

Component not being returned by function following form submission in React

After spending a few weeks diving into React, I decided to create a react app that presents a form. The goal is for the user to input information and generate a madlib sentence upon submission. However, I am facing an issue where the GenerateMadlib compone ...

Removing a parameter from a variable in jQuery and JavaScript

I have coded something and assigned it to a variable. I now want to replace that value with another one. Just so you know, I do most of my coding in perl. Specifically, I am looking to remove the menu_mode value. Any advice on this would be greatly appre ...

I am encountering an issue with express-session where it is failing to assign an ID to

Seeking assistance with utilizing express-session to manage user sessions on arcade.ly. I have not specified a value for genid, opting to stick with the default ID generation. However, an ID is not being generated for my session. An example of the issue c ...

Identifying errors in a React component upon loading

As I delve into my project, my main focus lies on detecting errors within a component. The ultimate goal is to seamlessly redirect to the home page upon error detection or display an alternate page for redirection. I am seeking a programmatic solution to ...

Encountering difficulties in constructing next.js version 14.1.0

When attempting to build my next.js application, I use the command npm run build Upon running this command, I encountered several errorshttps://i.sstatic.net/5jezCKHO.png Do I need to address each warning individually or is there a way to bypass them? B ...

Using NodeJS to integrate WebRTC into JavaScript applications

I am facing a challenge with my JavaScript files that I need to use for creating a WebRTC application. Unfortunately, my hosting platform does not support Node.js. I'm wondering if it's possible to modify these JS files to work without Node.js. C ...

The setInterval function continues executing even after the page has been changed

I'm encountering an issue with my function where it continues to run even after the page has changed, resulting in an error. How can I go about stopping this behavior? Thank you! componentDidMount() { var current = 0; var slides = document.g ...

Node.js server continues running after attempting to stop with ctrl + C following starting the server using the command "npm start"

Whenever I initiate my server by typing node app.js in the command line on Git Bash, I can stop it simply by using ctrl + C. In my package.json file, I have configured a start script that allows me to use the command npm start to kickstart the server: "s ...

PHP script failing to execute if/else statement during AJAX request

I am currently developing a website that heavily relies on Ajax, and I have chosen to use codeigniter for its construction. On the site, there is a form with the post method, and this form is submitted using an Ajax request that calls a function containi ...

HTML - Automated Navigation to Anchor Links

My website features a search box and various options. While the mobile version displays these prominently on the start page, once a user performs a search, the result page also includes the search box and options at the top. To streamline the user experie ...

What is the best way to implement TrackballControls with a dynamic target?

Is there a way to implement the three.js script TrackballControls on a moving object while still allowing the camera to zoom and rotate? For example, I want to track a moving planet with the camera while giving the user the freedom to zoom in and rotate ar ...

Can a software be created to capture search results from the internet?

Is it feasible to create a program that can extract online search results? I am specifically interested in retrieving data from Some of the data I need include application numbers, such as 9078871 and 10595401 Although there are CAPTCHAs present, I am w ...

What is the best way to tidy up a function within a useEffect hook?

When updating state within a useEffect hook while using async/await syntax, I encountered an error regarding the cleanup function. I'm unsure how to properly utilize the cleanup function in this scenario. Error: Warning - A React state update was att ...

A guide on converting a Javascript datetime to a C# DateTime parameter

In a previous question that I asked on StackOverflow, I mentioned that I was able to retrieve my values successfully as the object was no longer null. The object contains a DateTime property named CreatedOn, which I am sending from JavaScript using new Dat ...

Ways to update a JSON object within an array of objects

I've got an array of objects // Extracted from the database $scope.users = [{"$id":"1","UserID":3,"Name":"A","Selected":false},{"$id":"2","UserID":4,"Name":"B","Selected":false},{"$id":"3","UserID":5,"Name":"C","Selected":false},{"$id":"4","UserID":6 ...