Getting selected value from dropdown in html format without submitting

How to get the text of the selected item from the dropdown item in html formats? (using python) How do I store the value of a variable when I select one item from the dropdown with my mouse? (i.e. without using the submit button)

This is the application I am using in the application engine that only supports Python.

+1


source to share


4 answers


There are some misunderstandings in your question regarding how web applications work.

The user must enter the address in the browser to navigate to the application. This sends a request to the server. The server code (written in python) receives this request and has the ability to send a response. The answer is a document, usually written in HTML . Some parts of this document may be dynamic, i.e. generated by python code. Other parts of the document can be static. The browser then displays the document in the user's window.

After that, the only way your python code can know what's going on in the browser window, or to run any part of the python code, is to force the browser to send another request.

This can happen in many situations, the most common are:

  • The user clicks on a link to a different url, making the browser different to request that new url.
  • The user clicks the button submit

    , making the browser submit the form as a request to the address configured in the form action

    .
  • Some code on the actual page, usually written in ECMAscript (also known as javascript), makes the request under the hood.

The latter is what you want. You have to write some code in javascript for the browser to send the information selected in the dropdown to the server. So your python code on the server can do something about it.



An easy way to do this is to make an event onchange

on the submit dropdown:

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

      

This way, when the user changes the value in the dropdown, the form will be submitted as if the user had clicked submit. Python code will run on the server. The browser will download the response.

Another popular way would be to use the javascript XmlHTTPRequest DOM API to send the request. This way, you can get the value in python and send a response, which in turn will be received by the javascript code in the browser. This code can change part of the page based on the response without changing the entire page. This method is called AJAX .

If you plan on writing a lot of javascript code, I highly recommend using a javascript library, at least for pain relief when working with many browser versions. jQuery is my library of choice.

In other words, code written in javascript running in the browser is talking about code written in python running on the server.

+19


source


Your python code runs on the server (google appengine). The HTML version runs on the client (browser). The client and server communicate using the HTTP protocol. The client sends requests and the server responds with responses. You have to send something to the server so your Python code knows about user actions.

On the client side, you can use Javascript (consider using the jQuery library). You can probably leave without connecting to the server.



If you need to contact the server but don't want to reload the page, use the AJAX method . In this case, you need to create custom views in your python app and initiate requests in Javascript.

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

+3


source


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

If you are using jQuery check out this ajax stuff. and the Event Model . First, you need to attach the dropdown event to the function you want to execute. This way, when the user changes the dropdown, the browser opens a new connection behind the scenes. This way you can get this value and store it server side. Would. eg:

$(document).ready( 

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

);

      

Hope it helps!

+1


source


The problem with using onchange is that not all users use a mouse. If you have a combo box and change the value using the keyboard, you can never go through the first value without submitting the form.

~ Cyrix

0


source







All Articles