Submitting a value from a text field different from the displayed one

Question

I've got a form with a dropdown (%ul.dropdown) and a text field (%input). The dropdown has a list of books. Whenever an item from the dropdown is clicked, the book title will appear in the text field (I do this in a Javascript not included in the code sample). If I submit the form, I want the id from the item to be submitted, not the title itself. I can achieve this by messing around with hidden fields and jQuery, however, it would be better if there was a simple and elegant way to do it. Any thoughts? Thanks

Code (in haml):

.input-group
  %input.form-control#book-selected{ type: "text", placeholder: "Please, select" }/  
    .input-group-btn
      %button.btn.button-transparent.dropdown-toggle{"data-toggle" => "dropdown", type: "button"}
        .icon-arrow-down
      %ul.dropdown-menu.pull-right#books-list
        - @books.each do |book|
          %li
            %a.book-select{ href: "#", 'data-book-id' => book.id }= book.name

Answer 1

Here are some examples of submit listeners:

Submit Event Listener for a form

Use submit event listener when form is submitted via inline JavaScript?

A similar question has been asked here.

Code example:

$('#myform').submit(function(event) {
  $('#book-selected').val( currentBookId );
  this.submit();
});