Steemjs Tutorial - Send SBD

In this tutorial we will learn how to send SBD using SteemJS which is the JavaScript API for Steem blockchain. We will use steemjs and jquery to accomplish this task.

alt

First thing we will do is setting up the html page for the input fields:

alt
It will accept the following inputs:

Text box for user sending the money.
Password field for Private active/owner key for the user sending the money.
Textbox for amount to be sent.
Textbox for amount to be sent in SBD.
Button to invoke the transfer action.

Here is the html for the above fields.

    <div>
        From User
       <input type="text" id="txtFromUser" value="" style="width: 500px;" />
    </div>
    <div>
        Private Active/Owner Key
       <input type="password" id="txtActiveKey"   value="" style="width: 500px;" />
    </div>
   <div>
        To User
       <input type="text" id="txtToUser" value="" style="width: 500px;" />
    </div>
        <div>
        SBD AMOUNT
        <input type="text" id="txtSBDAmount"  style="width: 200px;" />
    </div>
    <div>
        <input id="btnSendSBD" type="button" value="Send SBD" />
    </div>
</div>

Next we import the steemjs and jquery libraries to be used for this functionality from the following CDN location:

steemjs --> https://cdn.steemjs.com/lib/latest/steem.min.js
jquery --> http://code.jquery.com/jquery-latest.min.js

The last step is to setup the javascript function that calls the steemjs function steem.broadcast.transfer.
This function has 4 input parameters:

wif --> value of password field txtActiveKey.
from --> Value of textbox txtFromUser.
to --> Value of textbox txtToUser.
amt --> Value of textbox txtSBDAmount. This needs to be formatted to 3 decimal places.
memo --> blank string in this case.

Here is the script to capture the input using jquery and call the steemjs email.

    $(document).ready(function () {

        $("#btnSendSBD").click(function () {

            var from = $("#txtFromUser").val();
            var wif = $("#txtActiveKey").val();
            var ul = document.getElementById('result');
            var amt = parseFloat($("#txtSBDAmount").val()).toFixed(3) + " SBD";
            var to = $("#txtToUser").val();
             steem.broadcast.transfer(wif, from, to, amt, "", function (sendError, sendResult) 
                {
                    console.log(sendError, sendResult);
                    if (sendError != null)
                        { 
                            console.log(sendError);
                            var li = document.createElement('li');
                            li.innerHTML = to + ' Send SBD Error';
                            ul.appendChild(li);
                        }
                    else {
                            var li = document.createElement('li');
                            li.innerHTML = from + ' sent ' + amt + ' to ' + to ;
                            ul.appendChild(li);
                        }
                }); 
          });
    });

Here is a screenshot of the html in action:
alt