And to be more specific,,,in the app(booking) I am building the user will have to make a choice of a staff member from a dropdown menu.

And this is the backbone related code that will send the staff name along with other details to the server.

2.      save: function() {
3.             
4.          if ($.trim((this.$('#name').val()))==='')
5.              {alert('No name is inserted')}
6.              else
7.              {
8.                  this.model.set({'name': this.$('#name').val(),'origin':this.$('#origin').val(),'staff':this.$(str)});//here is the staff detail
9.                 if (this.model.isNew()) {
10.                     this.collection.create(this.model, {success: this.close});
11.              
12.                 } else {
13.                     this.model.save({}, {success: this.close});
14.                 }
15.             }
16. 
    
17.             
18.         },

And here is the jquery code that serves to "grab" what the user selected from the dropdown menu:

2.  $( "#staff" ).change(function() {//$staff is just the div where the dropdown is included
3.       var  str = "";
4.    
5.       $( "#staff option:selected" ).each(function()
6.       {str += $( this ).text() + " "; });
7.     });

The var str is suppose to hold what staff the user selected.The above code is inserted at the end of the file but inside the function that encloses all of the backbone code.  

The problem is that when I am about to send the data to the server(by pressing OK to a dialog box) I get I message in Crome Dev Tools saying that str is not defined.

What am I doing wrong here?

Here is the whole code...at line 135 you will find the jquery code:  file

Some words are in Greek...do not be confused.