wordpress plugin required

2 Views

I have to make a wordpress plugin of a simple html form that do simple calculation. Here is my form code. 

<html>
<head>
    <title>Calculate</title>
    <script language="javascript">
            function addNumbers()
            {
                    var val1 = parseInt(document.getElementById("value1").value);
                    var val2 = parseInt(document.getElementById("value2").value);
                    var ansD = document.getElementById("answer");
                    ansD.value = val1 + val2;
            }
    </script>

</head>
<body>
   <input type="text" id="value1" name="value1" value="1"/>
   <input type="text" id="value2" name="value2" value="2"/>
   <input type="button" name="Sumbit" value="Click here"               
   onclick="javascript:addNumbers()"/>
   <input type="text" id="answer" name="answer" value=""/>
</body>
</html>

Thanks

Post Views: 2

Related posts

Leave a Reply

2 comments

  2. I would say this is more of a design task than a pure coding task.

    When it comes to outputting your code somewhere on the page generated by WordPress I would suggest using wp_enqueue_script() to include your javascript. Alternatively you might use the wp_head action if you really need inline script code. To print the actual form element, on option would be to hook on to the the_content filter and just append/prepend the content. Other options includes creating a shortcode to allow the user to insert [my_form] in the page content, or a creating a template tag for inclusion in your themes template files.

    But all that really depends on the need of your users and what you intend to accomplish with this plugin. That said, it is definitely a good thing having at least basic understanding on the concepts of WordPress plugins as suggested by Ersel Aker, although a plugin doing what you are asking or might be as simple as:

    // Enqueue javascript (placed in plugins.js in js subdir of plugin)
wp_enqueue_script('plugin.js.handle', plugins_url('js/plugin.js', __FILE__), array());

// Add filter to the_content
add_action('the_content', 'my_plugin_content');

// Append form to page content under certain conditions
function my_plugin_content($content) {

    $form = '<input type="text" id="value1" name="value1" value="1"/> <input type="text" id="value2" name="value2" value="2"/> <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/> <input type="text" id="answer" name="answer" value=""/>';

    if ( some_magic_conditions_are_met() ) {
        return $content . $form;
    }

    return $content;
}