Soap1

Start of a soaping real-time calc sheet.

by Mark Hendricks

HTML

<table>
      <tr>
      <td>Oil oz. *</td>
      <td></td>
      <td><input id='oil' type="text" name="oil" placeholder="Oil oz." required/></td>
      </tr>
      <tr>
      <td>SAP Value *</td>
      <td></td>
      <td><input id='sap' type="text" name="sap" placeholder="SAP Value" required/></td>
      </tr>
      <tr><td colspan="3"><hr></td></tr>
      <tr>
      <td colspan="2">
        Potassium Hydroxide:
        <input type="radio" name="lye_type" id="lye_type2" value="2" checked/>
      </td>
      <td>
        Sodium Hydroxide:
        <input type="radio" name="lye_type" id="lye_type1" value="1"/>
      </td>
      </tr>
      <tr><td colspan="3"><hr></td></tr>
      <tr>
      <td>Water:Lye Ratio</td>
      <td><input type="radio" name="s_method" id="radio1" value="1" checked/></td>
      <td>
      <input id='wr' type="text" name="wr" value="2" size="2"/> :
      <input id='lr' type="text" name="lr" value="1" size="2" disabled/>
      </td>
      </tr>
      <tr>
      <td>Lye Concentrate %</td>
      <td><input type="radio" name="s_method" id="radio2" value="2"/></td>
      <td><input id='lc' type="text" name="lc" placeholder="Lye Concentrate" disabled/></td>
      </tr>
      <tr>
      <td>Water as % of Oil</td>
      <td><input type="radio" name="s_method" id="radio3" value="3"/></td>
      <td><input id='wpo' type="text" name="wpo"  placeholder="Water as % of Oil" disabled/></td>
      </tr>
      <tr><td colspan="3"><hr></td></tr>
      <tr id="KOH">
      <td>KOH oz.</td>
      <td></td>
      <td><input id='ph' type="text" name="ph" placeholder="KOH oz"/></td>
      </tr>
      <tr id="NaOH">
      <td>NaOH oz.</td>
      <td></td>
      <td><input id='sh' type="text" name="sh"  placeholder="NaOH oz"/></td>
      </tr>
      <tr>
      <td>Water oz.</td>
      <td></td>
      <td><input id='water' type="text" name="water"  placeholder="Water oz"/></td>
      </tr>
      <tr>
      <td>SBW oz.</td>
      <td></td>
      <td><input id='sbw'...

JavaScript

var s_method = "1";
				var lye_type = "2";
				var lye = "0";
				
				$("tr[id=NaOH]").hide(); // hide initial

				$("input[name='s_method']:radio").change(function(){
					if($(this).val() == '1'){  // If Water:Lye Ratio Method Selection
						$("input[id=lc]").attr("disabled", true); 	// Disable Lye Concentrate Editing
						$("input[id=wpo]").attr("disabled", true); 	// Disable Water as % of Oil Editing
						$("input[id=wr]").attr("disabled", false);  // Enable Water Lye Ratio Editing
						s_method = "1";
					}
					else if($(this).val() == '2'){ // If Lye Concentrate Method Selection
						$("input[id=lc]").attr("disabled", false); 	// Enable Lye Concentrate Editing
						$("input[id=wpo]").attr("disabled", true); 	// Disable Water as % of Oil Editing
						$("input[id=wr]").attr("disabled", true);   // Disable Water Lye Ratio Editing
						if(!$.isNumeric($('#lc').val())) { document.getElementById('lc').value = 33.33; }	// Default value
						s_method = "2";
					}
					else if($(this).val() == '3'){ // If Water as a Percentage of Oil Method Selection
						$("input[id=lc]").attr("disabled", true); 	// Disable Lye Concentrate Editing
						$("input[id=wpo]").attr("disabled", false); // Enable Water as % of Oil Editing
						$("input[id=wr]").attr("disabled", true);   // Disable Water Lye Ratio Editing
						if(!$.isNumeric($('#wpo').val())) { document.getElementById('wpo').value = 27.09; } // Default Value
						s_method = "3";
					}
				});

				$("input[name='lye_type']:radio").change(function(){
					if($(this).val() == '2'){
						$("tr[id=NaOH]").hide();
						$("tr[id=KOH]").show();
						lye_type="2";
					} else {
						$("tr[id=KOH]").hide();
						$("tr[id=NaOH]").show();
						lye_type="1";
					}
				});

				$('input').on('keyup change', function() { // run anytime the value changes
					// get value of field
					// convert it to a float

					var wr  = Number($('#wr').val());  			// Water ratio
					var lr 	= Number($('#lr').val()); 	 ...