Search this site

Kwwika ceased operation on 01/06/2011. Please migrate to Pusher
API‎ > ‎JavaScript‎ > ‎How to...‎ > ‎

How to publish <form> values through Kwwika on <form> submit

Create your FORM HTML

The first thing to do is build the HTML for your form in the normal way. In this example we'll assume the form is to allow a quiz master to define a number of questions and answers.

<html>
    <head><title>Publish form example</title></head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

It's a web page, just Kwwika

To be able to publish the data from the <form> through Kwwika you need to add the Kwwika JavaScript API SCRIPT tag.

<html>
    <head>
        <title>Publish form example</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>
    </head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

Handle the form submission

Once the user has entered values for the questions and answers they will click the "Submit" button. When they do that we want to handle this event so that we can then get hold of the values in the form.

There are a number of ways of doing this but one of the simplest is to use a third party JavaScript library to help us. In the example below we are using jQuery. First we add the jQuery script tag to the page to include the library and then we write a small amount of code to register register for the FORM submission event.

An important point to remember is that we don't actually want the <form> to submit back to the server so we need to return false from the <form> submit handling function.

<html>
    <head>
        <title>Publish form example</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
        $(function()
        {
            $("#valuesToPublish").submit(function()
            {
                // do stuff here

                return false;
            });
        });
        </script>
    </head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

Gathering the values to publish

To get the values from the <form> we'll use a bit of jQuery magic within the <form> submit handler.

<html>
    <head>
        <title>Publish form example</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
        $(function()
        {
            $("#valuesToPublish").submit(function()
            {
                var values = {};
                $.each($("#valuesToPublish").serializeArray(), function(i, field)
                {
                    values[field.name] = field.value;
                });

                return false;
            });
        });
        </script>
    </head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

Connecting to the Kwwika service

A connection to the Kwwika service is established using a simple since API call.

<html>
    <head>
        <title>Publish form example</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
        $(function()
        {
            var connection = kwwika.Service.connect();

            $("#valuesToPublish").submit(function()
            {
                var values = {};
                $.each($("#valuesToPublish").serializeArray(), function(i, field)
                {
                    values[field.name] = field.value;
                });

                return false;
            });
        });
        </script>
    </head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

Publishing the <form> values

The last thing to do is to publish the values through Kwwika.

<html>
    <head>
        <title>Publish form example</title>

        <script src="http://js.kwwika.com/beta/api.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script>
        $(function()
        {
            var connection = kwwika.Service.connect();

            $("#valuesToPublish").submit(function()
            {
                var values = {};
                $.each($("#valuesToPublish").serializeArray(), function(i, field)
                {
                    values[field.name] = field.value;
                });

                connection.publish("/KWWIKA/SANDBOX", values,
                {
                    commandSuccess:function(){ /* publish succeeded */ },
                    commandFailed:function(){ /* publish failed */ }
                });

                return false;
            });
        });
        </script>
    </head>
    <body>
        <form name="valuesToPublish" id="valuesToPublish">
            <fieldset>
                <legend>Questions &amp; Answers</legend>

                <label for="question1">Question 1:</label>
                <input id="question1" name="question1" type="text" />
                <label for="answer1">Answer 1:</label>
                <input id="answer1" name="answer1" type="text" />

                <label for="question2">Question 2:</label>
                <input id="question2" name="question2" type="text" />
                <label for="answer2">Answer 2:</label>
                <input id="answer2" name="answer2" type="text" />
            </fieldset>

            <input type="submit" value="Submit" />
        <form>
    </body>
</html>

See it in action

You can see the final page in action here:

And you can see the values actually updating on the following page (this page uses the Kwwika jQuery Real-Time Push Kwwika Plugin):