Mac's WordPress Tips

This article shows the details of a form that calculates the weight on different planets given the weight on earth. It illustrates the following:

• Coding the form in the HTML mode of the WP editor
• Using a shortcode to insert the JavaScript that does the calculations
• The JavaScript itself

Click here to try it out!

Here is a screenshot of the output:

 
Here is the code entered into the Post in the HTML mode of the editor:

<h2>Weight Calculation for Planets</h2>
<form method="post" action="">
   <table id="planet-weight-table">
      <tbody>
         <tr>
            <td align="right">Earth:</td>
            <td><input type="text" name="earthWeight" size="7" maxlength="6" onFocus="clearWeights(this.form)"></td>
         </tr>
         <tr><td colspan="2">&nbsp;</td></tr>
         <tr>
            <td align="right">Mercury:</td>
            <td><input type="text" name="mercuryWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Venus:</td>
            <td><input type="text" name="venusWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Moon:</td>
            <td><input type="text" name="moonWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Mars:</td>
            <td><input type="text" name="marsWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Jupiter:</td>
            <td><input type="text" name="jupiterWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Saturn:</td>
            <td><input type="text" name="saturnWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Uranus:</td>
            <td><input type="text" name="uranusWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Neptune:</td>
            <td><input type="text" name="neptuneWeight" size="8" maxlength="8"</td>
         </tr>
         <tr>
            <td align="right">Pluto:</td>
            <td><input type="text" name="plutoWeight" size="8" maxlength="8"</td>
         </tr>
         <tr><td colspan="2">&nbsp;</td></tr>
         <tr><td colspan="2" align="right"><input type="button" name="Button" value="Calculate Weights" onClick="calcWeights(this.form)"></td></tr>
      </tbody>
   </table>
      <p>&nbsp;</p>
      <p class="mercuryWeight">
</form>

Here is the coding for the shortcode and JavaScript from functions.php:

// Shortcode to insert javascript for Planetary Weight Calculation

function insert_weight_script_func() {
   return <<<EOTEXT
<script type="text/javascript">
   function clearWeights(frm) {
      frm.mercuryWeight.value = ' ';
      frm.venusWeight.value = ' ';
      frm.moonWeight.value = ' ';
      frm.marsWeight.value = ' ';
      frm.jupiterWeight.value = ' ';
      frm.saturnWeight.value = ' ';
      frm.uranusWeight.value = ' ';
      frm.neptuneWeight.value = ' ';
      frm.plutoWeight.value = ' ';
   }

   function calcWeights(frm) {
      var weightOnEarth = parseFloat(frm.earthWeight.value);
      frm.mercuryWeight.value = Math.round(weightOnEarth * 0.378 * 100)/100;
      frm.venusWeight.value = Math.round(weightOnEarth * 0.907 * 100)/100;
      frm.moonWeight.value = Math.round(weightOnEarth * 0.166 * 100)/100;
      frm.marsWeight.value = Math.round(weightOnEarth * 0.377 * 100)/100;
      frm.jupiterWeight.value = Math.round(weightOnEarth * 2.364 * 100)/100;
      frm.saturnWeight.value = Math.round(weightOnEarth * 1.064 * 100)/100;
      frm.uranusWeight.value = Math.round(weightOnEarth * 0.889 * 100)/100;
      frm.neptuneWeight.value = Math.round(weightOnEarth * 1.125 * 100)/100;
      frm.plutoWeight.value = Math.round(weightOnEarth * 0.067 * 100)/100;
   }
</script>
EOTEXT;
}
add_shortcode('insert-weight-script','insert_weight_script_func');