Question

I’m using select in a html form and once a user makes a selection from the select options I want that to be sent to the server by javascript. I can get text in a form sent to the server but nothing is sent to the server if I use select. This is my code:

{% extends "base.html" %}
{% import "forms.html" as forms %}

{% block header %}
 <script>
        $(document).ready(function() {
        var ws;

        $("#open").click(function(evt){
        evt.preventDefault();
        $.post("/", $("#eventForm.").serialize());

        ws = new WebSocket("ws://" + "localhost" + ":" + "8888" + "/ws");

        ws.onmessage = function(evt){

            $("#display").append(evt.data + "<br />");
    };

        ws.onclose = function(evt) {alert("Server connection terminated");};
    });
   }); 
    </script>

  <div class="page-header">
    <h1>Welcome</h1>
  </div>
{% end %}

{% block body %}
 <h2>Enter the Event you would like to follow</h2>
      <form id ="eventForm" action="/" method="post">
         <select name="aaaa" multiple="multiple"> 
    <option value="" selected="selected"></option>
    <option VALUE="abc"> ABC</option>
    <option VALUE="def"> def</option>
    <option VALUE="hij"> hij</option>   
</select>
  <!--       <input type="text" name="event" /> -->
 <input type="submit" id="open" value="Submit Query" />
    </form>
 <h1>Coordinates</h1>

<div style="height:500px; width:700px; border:2px solid #ccc; overflow:auto; margin:0   auto;" id="display"></div>
{% end %}

I thought that $.post(“/”, $(“#eventForm.”).serialize()); would send the selected option as select is within the form tags.

I’m not really familiart with html and javascript.

Thanks

Answer 1

This may just be a simple typo.

change:

$.post("/", $("#eventForm.").serialize());

to:

$.post("/", $("#eventForm").serialize());