Getting selected value from drop down box in a htm

问题:

How to get the text of selected item from a drop down box element in html forms? (using python) How can I store the value to a variable, when I select one item from the drop down box using mouse? (ie. without using a submit button)

This is for a application which I am doing in app engine which only supports Python.

回答1:

Your question shows some misunderstanding on how web applications work.

The user has to type an address in a browser to get to the application. That sends a request to the server. The server code (written in python) receives this request and has the opportunity to send an answer. The answer is a document usually written in HTML. Some parts of this document can be dynamic, i.e. generated by the python code. Other parts of the document can be static. The browser then renders the document on the user window.

After that, the only single way your python code can know about something that happens on the browser window, or to run any part of the python code, is to make the browser send another request.

That can happen in many situations, the most common being:

• User clicks on a link to another url, making browser send another request to this new url.
• User clicks on submit button, making browser submit the form as a request to the address configured in the form's action attribute.
• Some code in the actual page, usually written in ECMAscript (also known as javascript), makes a request under the hood.

The latter is what you want. You must write in javascript some code to make the browser send the information choosen in the drop down to the server. That way your python code on the server can do something about it.

The simple way to do that is by making the onchange event of the drop down do a submit:

<select name='myfield' onchange='this.form.submit()'>
<option .... >
...
</select>
</form>

That way, when the user changes the value on the dropdown, the form will be submited as if the user clicked on submit. Python code on the server will run. The browser will load the answer.

Another popular way would be to use javascript's XmlHTTPRequest DOM API to send the request. That way you can receive the value in python and send an answer, which in turn will be received by the javascript code in the browser. That code can change parts of the page based on the answer, without changing the entire page. This technique is called AJAX.

If you plan to write lots of javascript code, I strongly suggest using a javascript library at least to ease the pain of dealing with many browser versions. jQuery is my library of choice.

In other words, code written in javascript running in the browser talks to the code written in python running in the server.

回答2:

Your python code runs on the server (google appengine). HTML form runs on the client (in the browser). The client and the server communicate through HTTP protocol. The client sends requests, and the server responds with responses. You have to send something to the server, to let your python code know about user actions.

On the client side you can use Javascript (consider using jQuery library). Probably you can get away without communicating to the server.

If you have to communicate to the server but do not want to reload the page, use the AJAX technique. In this case you have to create special views in your python application and initiate requests in Javascript.

Remember, Javascript is for the client side, Python is for the server side.

回答3:

If you need to send the selected value to your server without submiting, I think that the best (if not the only one) aproach would be to use some ajax.

If you are using jQuery, have a look at it's ajax stuff. and it's Events model. You will first have to attach the dropdown's event to the function you want to execute. So, when the user changes the dropdown, then the browser will open a new connection behind the scenes. So the, you can get that value and save it on the server side. Would be sth. like this:

$(document).ready( 

    $("#select_id").change(function() {
        $(this).getJSON("/method", {"selectValue":$(this).val()}, function() {
                   alert("value received!");
              });
    });

);

Hope it helps!

回答4:

The problem with using onchange is that not all users are using a mouse. If you have a combo-box and change the value with the keyboard, you'd never be able to get past the first value without the form submitting.

~Cyrix