How to only enable submit function, when smth in dropdown is slected

I am building a web app and have a question to my drop down menu. The goal is, that the data can only be submitted, when a number is selected in the dropdown menu. I want to do this as a backend by NodeJS.

Here are the two files:

HTML

<p>Please selet</p>
    <form method="POST">
        <label class="dropdown">
            <select id="value2" name="dropdown" type="text">
                <option disabled selected>Amount of boxes</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </label>
    </form>

<!-- Send data -->
    <form action="index.js" >
    <input id="transfer" type="submit" value="Submit" 
            onclick="transfer()" display="Your request has been...">
    </form>

node js

app.get('/ll.js', (req, res) => { 
    req.body.dropdown 
    if (req.body.dropdown == "1"){
        //than submit is possible
    } else if (req.body.dropdown == "2"){
        //than submit is possible
    } else if (req.body.dropdown == "3"){
        //than submit is possible
    } else if (req.body.dropdown == "4"){
        //than submit is possible
    } else if (req.body.dropdown == "5"){
        //than submit is possible );{}
    } else 
        alert ("Please select the amount!");
        return false;
})

Any suggestion how to solve it? Am thankful for every help.

Update

File: ll.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title> LogIn</title>
    <link rel="stylesheet" href="lbc.css">
    <script type="module" src="index.js"></script>


</head>

<body>

    <p>Please select the amount </p>
    <form id="value2" method="POST">
        <label class="dropdown">
            <select id="dropdown" name="dropdown" type="text">
                <option disabled selected>Amount </option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </label>
    </form>
    <br></br>

    <form id="transfer" name="transfer" method="POST" >
    <button type="submit">Submit data</button>
    </form>
    <br></br>
  
</body>
</html>

File: index.js

    const http = require('http');
    const express = require('express');
    const { urlencoded } = require('body-parser');
    const { fstat } = require('fs');
    const { response } = require('express');
    
    const app = express();
    
    app.get('/webapp', function(req, res){
        res.send('index.js', {});
    });
    
    app.use(express.static(__dirname + '/ll.html'));
    
    
    app.listen(3000, console.log(`Server running at http://localhost:3000`));
    
    //Check selection  before submit
    
app.get('/ll.html', (req, res) => {
    const form = document.getElementById('value2, transfer');
    const log = document.getElementById('log');

    form.addEventListener('value2, transfer', (e) => {
        let messages = []
    if (req.body.dropdown === undefined || req.body.dropdown === null){
    res.status(400).send({ message: "Please select the amount of cocoa sacks"});
    }})})

    function logSubmit(event) {
        log.textContent = 'Your data have been submited';
        event.preventDefault();
    }
  • It should be, that the submit button, can only be clicked, when the dropdown and some other input files are filled out. Does this <option disabled selected>Amount</option> count to “undefined” / “null”?

  • So do I use the ID from the dropdown or the one from the button for the index.js file: const form = document.getElementById('???'); ? Doesn’t matter which way, I can click the button all the time… Maybe I have some mistakes, which I don’t see :/ ….

Answer

Just check if the dropdown is set or not should be enough. If the input of the request is invalid, the correct response would be a 400.

app.get('/lbc.js', (req, res) => {  
    if (req.body.dropdown === undefined || req.body.dropdown === null)
        
        res.status(400).send({ message: "Drop down was not selected" });
        return;
    }

    // continue with whatever you want if submit is possible
}

Your frontend needs to handle this response as well, because now it probably won’t make a distinction when it works or not. So if you’d capture the submit event of the form, you could send the request yourself using the fetch api, and do different things for a 200 (when the response succeeded) or something like a 400 (request failed).

EDIT: You can read up on how to create and handle submit events here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Here you can read how you can send webrequests through javascript: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

These are the steps you need to do:

  • Put an id on your form, e.g. <form id="myForm" ... >
  • Start a JavaScript tag i.e. <script> </script>
  • Within these tags, first get the form reference: const form = document.findElementById("myForm");
  • Put a submit event listener on it like how they do in the link
  • In the event handler function, send the request, and deal with the response (show message if error, do something else if success for instance).

EDIT april 7th:

About your code and your comments I have the following to say:

  • You have created 2 forms, one for your dropdown and one for your button. Both of them should be in the same <form></form> tag. When you click your submit button, all <input> fields will be sent to whereever your form submits to.
  • You seem to need to check if all fields are filled in correctly before you send the data to your server. Like I said in my previous answer, you need to create a script that will do this. In this link you can read again in a simple way how to do such a thing
  • Checking if a field has a value is again done by obtaining the element through it’s id. E.g. if you have an input like: <input type="text" id="firstName" name="firstName" />, you can obtain the value of this field in javascript as such: const valueFromField = document.getElementById("firstName").value;

Hopefully this will give you some hints to make some new steps. In my humble opinion it would probably be a good idea for you to do some basic javascript tutorials to give you some insight on how that stuff works.