I am trying to display text in a popcornJS footnotes plugin on my main page by taking the text that was entered into a form on a bootstrap modal. I am getting [object HTMLSpanElement] where I am expecting the actual string to show up.
This is the script I am running:
<script type="text/javascript">
$('#save').on('click', function() {
var value = $('#value').text( $('#newGoal').val() );
});
</script>
This is my modal (the text displays correctly using the span in line 2):
<a class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
<p>Your Number: <span id="value"></span></p>
<span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>
<div class="modal fade" id="moneyModal" role="dialog">
<div class="modal-dialog">
<form method="post" action="change-goal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Change Goal</h4>
</div>
<div class="modal-body">
<p>Please enter a new number.</p>
</div>
<div class="modal-body">
<input class="form-control" name="newGoal" id="newGoal">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</form>
</div>
</div>
This is the popcornJS footnote plugin script (putting any normal strings work like the second footnote):
<script>
document.addEventListener('DOMContentLoaded', function () {
var p = Popcorn( "#video1" )
.footnote({
start: 0,
end: 5,
text: value,
target: "footnotediv"
})
.footnote({
start: 1,
end: 45,
text: "test",
target: "footnotediv"
});
}, false);
It seems like there is some painfully simple thing I messed up, or this popcornJS plugin was not built to take anything except a string literal.
Here's a screenshot of what is happening. Notice the top left 'Your Number: 5', the '5' is text from the form and what should be displayed in the [object HTML...]