How to retrieve value from <select> and put it in hidden JSTL

Question

i have a rather dumb issue but still, can not figure the way around it...The concept is to have a select value which prompts the user to select a subject. Upon selection i need to store that subject id in every form that i am using below in so i can retrieve that subject, and i dont want to use different select for every single form that i need. here is the code below:

<div class="input-field col s12">
                            <select>
                                <c:forEach var="subjectItem" items="${subjectList }">
                                    <option value="${subjectItem.id }">${subjectItem.subjectName }</option>
                                </c:forEach>
                            </select> <label>For subject</label>
                        </div>
......
.....
<form method="POST" action="subject-add-school-deadline"
                                    id="deadlineSchoolForm">
----! Here is should retrieve that data from select !-------
                                    <div class="row">
                                        <div class="input-field col s6">
                                            <input id="schoolD_title" type="text" class="validate"
                                                name="title""> <label
                                                for="schoolD_title">Title</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="input-field col s12 l12 ">

                                            <textarea id="schoolD_desc" name="description"
                                                class="materialize-textarea validate" form="deadlineSchoolForm"></textarea>
                                            <label for="schoolD_desc">Description</label>
                                        </div>
                                    </div>
                                    <div class="row">
                                <label class="col s2">Deadline date</label> <input type="date"
                                    class="datepicker col s4" name="date">
                            </div>
                            <div class="row right-align">
                        <button class="waves-effect waves-teal btn-flat" type="submit"
                            name="action" >
                            Add <i class="material-icons right">input</i>
                        </button>
                    </div>
                                </form>
----MORE FORMS BELOW ------
.....
.....

Note that i do not need something like

<select form="form1>

because i need that select value for multiple forms. Any help would be greatly appreciated. Thanks!!

Answer 1

I used jQuery to set the value in all inputs named title. Would this solve your problem?

JS Fiddle

The important part:

 <script type="application/javascript">
    $("select#foo").change(function() {
      $("input[name='title']").val($("select#foo").val());
    });
  </script>