First of all, i allowed myself to remove all PHP stuff from your HTML since it's not important for this.
<div class="container">
<div class="row">
<div class="span12">
<h3>Upload your experimental data</h3>
<form class="form-horizontal well" action="/" method="post" enctype="multipart/form-data" id="upload_form">
<fieldset>
<legend>Animal Info</legend>
<!-- Animal Species -->
<div class="control-group">
<label class="control-label">Species</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
<!-- Animal Condition -->
<div class="control-group">
<label class="control-label">Animal Condition</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
<!-- Brain Area -->
<div class="control-group">
<label class="control-label">Brain Area</label>
<div class="controls">
<select>
<option><choose></option>
<option value="addnew">Add new</option>
</select>
</div>
</div>
</fieldset>
<!-- submit -->
<div class="form-actions">
<button type="submit" class="btn btn-primary">Upload »</button>
</div>
</form>
</div>
</div><!-- end row -->
<!-- add-new field -->
<div class="modal small hide fade" id="add-new" tabindex="-1" role="dialog" aria-labelledby="add-new-fieldLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="add-new-fieldLabel">Add New Field</h3>
</div>
<div id="modal-body" class="modal-body">
<p>Would you like to add a new <!-- wtf? <span1></span1> --> option?</p>
<input type="text" id="add-new-text" name="add-new-text" placeholder="Type the new option" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" id="add-new-submit" name="add-new-submit">Add</button>
</div>
</div><!-- /add-new field -->
</div>
.
And i also refacrtored your javascript code, i annotated all important changes, i hope it's not to confusing (I also removed the actual ajax call since it's unnecessary to show up what's happening)
$('#upload_form select').change(function(event){
var $select = $(this);
// abort if selected option is not the addnew one
if ($select.val() !== 'addnew') return;
// Get all elements we'll need later on once and put them in a variable,
// so jquery don't has to search them all over again everytime we need them
// http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-jquery-newbs-stop-jumping-in-the-pool/
var $add_new = $('#add-new')
, $add_new_text = $('#add-new-text')
, $add_new_submit = $('#add-new-submit')
, addNewOption; // This variable will get assigned our click handler, we'll need this later on
// Show the modal
$add_new.modal('show');
// You want this event handle to get called only once, .one() will do exactly that
// http://api.jquery.com/one/
$add_new_submit.one('click', addNewOption = function() { // Like i said above
var new_option_value = $add_new_text.val()
// Create a new option element
, $new_option = $('<option/>');
// Set it's value and text to the user input
// Note: in your application you should escape this before using it in any way, never trust user input
$new_option.val(new_option_value).text(new_option_value);
// Assuming the "Add New" option should always be the last one,
// add the new option in before it.
$select.children().last().before($new_option);
// Select it
$new_option.prop('selected', true);
$add_new_text.val('');
$add_new.modal('hide');
});
I think this is what will solve your actual problem: Bootstrap Modals will trigger a event when they'll hide (as well as when they will show up) source
Note: In case you're already using Bootstrap 3, the you'll have to change the event name to hide.bs.modal
source
$add_new.one('hide', function () {
// This will unbind explicitly the handler we attached above
$add_new_submit.unbind('click', addNewOption);
});
});
Here you can find a functional jsFiddle with this code.
Hope i could help you on this, if you have any questions, feel free to ask :)