How to get value from form in the html page's variable

Question

I am creating a small webpage which contains a drop down. So a user can select a value from it. This is in a form. When the user selects a value from it say value "A", based on that I want to do a database query say, Select * from Table where value = 'A'. And display the result on the same page, preferably without full page reload.

I can access the value of the dropdown selected in javascript method by calling a method onchange event and doing document.getElementById on it.

How should I pass the value in a variable on the same html page, so that I can send the value to the database?

Thanks for your replies in advance.

Answer 1

This question itself is very vague, but I'll do my best.

You first need (if you don't already have) something server-side that can accept the incoming parameter and return the results from the database. e.g. /some/service/?param=DROPDOWN_VALUE_HERE. Ideally you would hit this service and receive back JSON/XML (something you can work with in the client).

Next, given you don't want a page reload, you need to look into how to leverage AJAX with reaching out to that service and dealing with the results. You should be able to send a request to the service (with the dropdown's value) and receive back something that would allow you to modify the page in a seamless way.

Answer 2

Use AJAX to send a POST request to the server asynchronously.

Using jQuery:

var value = 'A';
// make an HTTP POST request to the 'submit' route on your server
$.post('submit', {value: value})
 .done(function(data) {
     alert('Server response: ' + data);
 }

On the server side, you need to handle the POST request to the 'submit' route and make your database call, and send back a response if necessary.