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

Viewed 75

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.

2 Answers

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.

According to the given details, Try this.

You can check the value and perform your actions as below.

if(req.body && req.body.dropdown) {
    res.send('submit is possible')
} else {
    res.send('Please select the amount!')
}

Also use, POST method route

app.post('/test', function (req, res) {
  res.send('POST request to the homepage')
})

Read more about Express.js routing

Related