Form submission then send an xAPI statement

Question

I am trying to send an xAPI statement after someone submits a their full name and email address through a form. In addition to sending the statement I would like to display a video.html page whereby they can watch a video. I know that there is an example of this on GitHub but I'm trying to do a much simpler example on my own. Can someone have a look at my attempt below and tell me why it is not working. Thanks very much.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <script src="js/xapiwrapper.min.js"></script>
        <script type="text/javascript">



                var button = document.getElementById("theButton"),
                fullName =  button.form.fullNameID.value;
                emailAddress =  button.form.emailAddressID.value;

                button.onclick = function() {

                var stmt = new ADL.XAPIStatement(
                new ADL.XAPIStatement.Agent(ADL.XAPIWrapper.hash('mailto:emailAddress'), 'fullName'),
                new ADL.XAPIStatement.Verb('http://adlnet.gov/expapi/verbs/registered', 'registered'),
                new ADL.XAPIStatement.Activity('act:http://ISO9000Video.html', 'Preparing for the ISO 9000 Audit',
                    'Preparation steps for the upcoming ISO 9000 audit.')
            );
            stmt.generateId();
            stmt.addOtherContextActivity( new ADL.XAPIStatement.Activity('compId:internet_proficiency') );
            stmt.generateRegistration();

            ADL.XAPIWrapper.changeConfig({
                'endpoint': 'https://lrs.adlnet.gov/xapi/',
                'user': 'xapi-tools',
                'password': 'xapi-tools',
            });

            ADL.XAPIWrapper.sendStatement(stmt);

            var o = document.getElementById('output');
            o.innerText = JSON.stringify(stmt, null, '    ');
        }

        </script>
    </head>
    <body>


<form id="frm1" action="">
    Full Name: <input type="text" id="fullNameID" name="fullName"><br>
    Email: <input type="text" id="emailAddressID" name="emailAddress"><br><br>
    <input type="button" id="theButton" value="Submit">
</form>

        <p>
        <code><pre id='output'></pre></code>
        </p>
    </body>
    </html>

score 2 · Answer 1 · answered Apr 21 '16 at 17:18

Your script at the top of the page is being executed when the page loads, but the form element with the button hasn't been set as the property of the button yet because that part of the DOM hasn't been parsed. If you check the console in your browser you'll see an error such as:

Uncaught TypeError: Cannot read property 'form' of null

Move the <script> block that is currently in the <head> to the bottom of the <body> and it should work.

Form submission then send an xAPI statement

1 Answers1