How to wait to append the data until after the form data has been added?

Question

When I click the #screenrId, it submits the default data without having time to add the new data the user inputs. How to wait to append the data until after the form input field data has been added?

http://jsfiddle.net/XVCVE/1/

<script type="text/javascript">    
$(document).ready(function() {      
    Screenr.Recorder( { subject:""}).appendTo("screenrId");        
});        
</script>     
<form>    
    <h4>Subject <input name="subject" id='subject' type="text" ></h4>
</form>
<div id="screenrId" ></div>   

I am trying to add the form data to the screen.recorder function before it appends it? Screenr.Recorder( { subject:""}).

Answer 1

Pretty sure I just fixed it: http://jsfiddle.net/XVCVE/3/

The problems:

1. The "javascript" section in jsfiddle assumes raw javascript, no <script> tags, so I moved that code to the top.
2. You had a very strange way to make sure the correct HTTP protocol (HTTP or HTTPS) was used to load the 3rd party library, when the browser will do that automatically if you just don't write the http: or https:.

After that, the button appeared after a slight delay.