Combine Text field with Radio Button Value

Sorry for the newbie question, I've tried to apply other post code dealing with radio buttons, but the code is starting to swirl in my head.

I basically have two fields, a Length field and a Radio button representing fractions. I need to combine the length the user enters and concatenate the fraction to the end. For example the user enters 8 for length and selects 1/16 for the radio button. I then need length_tx1 to equal 8 1/16.

The other thing I am trying to do is determine if length is >=12 or length is >=24. I just need a fresh perspective.

Form HTML Code:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Length</label>
    <input class="cf_inputbox required validate-number" maxlength="2" size="2" title="Enter whle number 1-96 for custom cut length" id="text_3" name="length_tx1" type="text" onChange="updatethis(this.form);" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Length :: Enter inches 1-96</div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Select Fraction</label>
    <div class="float_left">
      <input value="1/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio00" name="radio0" type="radio" onChange="updatethis(this.form);"/>
      <label for="radio00" class="radio_label">1/16</label>
      <br />
      
<input value="1/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio01" name="radio0" type="radio" onChange="updatethis(this.form);"/>
      <label for="radio01" class="radio_label">1/8</label>
      <br />
      
<input value="3/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio02" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio02" class="radio_label">3/16</label>
      <br />
      
<input value="3/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio03" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio03" class="radio_label">3/8</label>
      <br />
      
<input value="5/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio04" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio04" class="radio_label">5/16</label>
      <br />
      
<input value="1/4" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio05" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio05" class="radio_label">1/4</label>
      <br />
      
<input value="7/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio06" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio06" class="radio_label">7/16</label>
      <br />
      
<input value="1/2" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio07" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio07" class="radio_label">1/2</label>
      <br />
      
<input value="9/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio08" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio08" class="radio_label">9/16</label>
      <br />
      
<input value="5/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio09" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio09" class="radio_label">5/8</label>
      <br />
      
<input value="11/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio010" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio010" class="radio_label">11/16</label>
      <br />
      
<input value="3/4" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio011" name="radio0" type="radio"  onChange="updatethis(this.form);" />
      <label for="radio011" class="radio_label">3/4</label>
      <br />
      
<input value="13/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio012" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio012" class="radio_label">13/16</label>
      <br />
      
<input value="7/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio013" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio013" class="radio_label">7/8</label>
      <br />
      
<input value="15/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio014" name="radio0" type="radio" onChange="updatethis(this.form);" />
      <label for="radio014" class="radio_label">15/16</label>
      <br />
      

    </div>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
				<div class="tooltipdiv">Select Fraction :: Select Fraction for custom cut (if Needed) Default is 0</div>
  </div>
  <div class="cfclear"> </div>
</div>

<input value="" id="hidden_4" name="hidden_length_combined" type="hidden" />

<input value="" id="hidden_5" name="hidden_length_in_feet" type="hidden" />

<input value="" id="hidden_6" name="hidden_price" type="hidden" />

<input value="" id="hidden_3" name="formkey" type="hidden" />

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_5" type="submit" /><input type="reset" name="reset" value="Reset"/>
  </div>
  <div class="cfclear"> </div>
</div>

Javascript code I am attempting to use:

function updatethis(form) {
      form.elements['hidden_length_combined'].value =
      form.elements['length_tx1'].value;
      form.elements['length_tx1'].value = form.elements['hidden_length_combined'].value.concat(getCheckedValue(radio0));
      
 function getCheckedValue(radioObj) {
	if(!radioObj)
		return "";
	var radioLength = radioObj.length;
	if(radioLength == undefined)
		if(radioObj.checked)
			return radioObj.value;
		else
			return "";
	for(var i = 0; i < radioLength; i++) {
		if(radioObj[i].checked) {
			return radioObj[i].value;
		}
	}
	return "";
}
 



}    

Thank you for your time.

Hi mowlman,

Here's a modified version of your code that appears to be working OK. There's an alert to show the result for debugging: Form HTML

    <div class="form_item">
      <div class="form_element cf_textbox">
        <label class="cf_label" style="width: 150px;">Length</label>
        <input class="cf_inputbox required validate-number" maxlength="2" size="2" title="Enter whle number 1-96 for custom cut length" id="length_tx1" name="length_tx1" type="text";" />
      <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
                <div class="tooltipdiv">Length :: Enter inches 1-96</div>
      </div>
      <div class="cfclear"> </div>
    </div>

    <div class="form_item">
      <div class="form_element cf_radiobutton" id='fraction_tx1'>
        <label class="cf_label" style="width: 150px;">Select Fraction</label>
        <div class="float_left">
          <input value="1/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio00" name="radio0" type="radio" />
          <label for="radio00" class="radio_label">1/16</label>
          <br />
         
    <input value="1/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio01" name="radio0" type="radio" />
          <label for="radio01" class="radio_label">1/8</label>
          <br />
         
    <input value="3/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio02" name="radio0" type="radio" />
          <label for="radio02" class="radio_label">3/16</label>
          <br />
         
    <input value="3/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio03" name="radio0" type="radio" />
          <label for="radio03" class="radio_label">3/8</label>
          <br />
         
    <input value="5/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio04" name="radio0" type="radio"  />
          <label for="radio04" class="radio_label">5/16</label>
          <br />
         
    <input value="1/4" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio05" name="radio0" type="radio" />
          <label for="radio05" class="radio_label">1/4</label>
          <br />
         
    <input value="7/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio06" name="radio0" type="radio" />
          <label for="radio06" class="radio_label">7/16</label>
          <br />
         
    <input value="1/2" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio07" name="radio0" type="radio"  />
          <label for="radio07" class="radio_label">1/2</label>
          <br />
         
    <input value="9/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio08" name="radio0" type="radio"  />
          <label for="radio08" class="radio_label">9/16</label>
          <br />
         
    <input value="5/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio09" name="radio0" type="radio" />
          <label for="radio09" class="radio_label">5/8</label>
          <br />
         
    <input value="11/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio010" name="radio0" type="radio"  />
          <label for="radio010" class="radio_label">11/16</label>
          <br />
         
    <input value="3/4" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio" id="radio011" name="radio0" type="radio"  />
          <label for="radio011" class="radio_label">3/4</label>
          <br />
         
    <input value="13/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio012" name="radio0" type="radio" />
          <label for="radio012" class="radio_label">13/16</label>
          <br />
         
    <input value="7/8" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio013" name="radio0" type="radio"  />
          <label for="radio013" class="radio_label">7/8</label>
          <br />
         
    <input value="15/16" title="Select Fraction for custom cut (if Needed) Default is 0" class="radio fraction" id="radio014" name="radio0" type="radio"  />
          <label for="radio014" class="radio_label">15/16</label>
          <br />
         

        </div>
        <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
                <div class="tooltipdiv">Select Fraction :: Select Fraction for custom cut (if Needed) Default is 0</div>
      </div>
      <div class="cfclear"> </div>
    </div>

    <input value="" id="hidden_length_combined" name="hidden_length_combined" type="hidden" />

    <input value="" id="hidden_length_in_feet" name="hidden_length_in_feet" type="hidden" />

    <input value="" id="hidden_price" name="hidden_price" type="hidden" />

    <input value="" id="formkey" name="formkey" type="hidden" />

    <div class="form_item">
      <div class="form_element cf_button">
        <input value="Submit" name="button_5" type="submit" /><input type="reset" name="reset" value="Reset"/>
      </div>
      <div class="cfclear"> </div>
    </div>

Javascript:

window.addEvent('load', function() {
  $('length_tx1').addEvent('change', formCalc);
  $('fraction_tx1').addEvent('change', formCalc);
});
function formCalc() {
  var fraction_array = $$('input.fraction');
  var fraction = getCheckedValue(fraction_array);
  var combined =  $('length_tx1').value + ' ' + fraction;
  alert(combined);
  $('hidden_length_combined').value = combined;
         
  };     
function getCheckedValue(radioObj) {
  if(!radioObj) {
    return "";
  }
  var radioLength = radioObj.length;
  if( radioLength == undefined ) {
    if(radioObj.checked) {
      return radioObj.value;
    } else {
      return "";
    }
  } else {
    for(var i = 0; i < radioLength; i++) {
      if(radioObj[i].checked) {
        return radioObj[i].value;
      }
    }
    return "";
  }
}; 

The code uses the MooTools library which is usually loaded by ChronoForms. I've added several classes and ids to identify the various inputs, and I've switched the code to use addEvent rather than to have the script snippets in the inputs.

Bob

THANK YOU! so much Bob. I really appreciate you taking the time to post.

Would / Could I perform the following 2 things within the javascript code area or would it better be placed within the onsubmit code area?

I need to set the length_tx1 field value to the combined value (length and fraction) which is now the hidden_length_combined field. If I do it where the hidden field is being set, my length field updates properly but then my validation is set since length is no longer a 2 digit number.

I also need to perform a check on the length field and set the price ...something like:

/* Get Length entered and set price $1.50 per foot + $2 Custom cut Fee */

var per_ft_cost = 1.50;  
var cut_fee = 2.00;
var price = base_price + cut_fee;

    switch (TRUE){

        case ($length <= 0):            //less then 0 , -0
            echo $length;
        break;

        case ($length >= 1 AND $length <= 12):     //less then 12 and greater then 1
            echo $length;
            // Feet will be 1, so price should be (1 * 1.5) +2
            $price = (1 * per_ft_cost) + cut_fee;

        break;
        case ($length > 12 AND $length <= 24):     //less then 24 and greater then 12
	            echo $length;
	            $price = (2 * per_ft_cost) + cut_fee;

        break;
        case ($length > 24 AND $length <= 36):      //less then 36 and greater then 24
	            echo 'feet = 3';
	            $price = (3 * per_ft_cost) + cut_fee;

          
        default:                //default  ?????
            echo $length;
        break;
    }
}

Thank you again for your support.

Hi mowlman,

You can do it in the JavaScript. There are - as you have noticed - some problems with using fractions in place of decimals when it comes to doing the arithmetic.

I think that the logic that you need is this:

If the faction has a value, add 1" to the length to give you length_max

Divide length_max by 12 to get length_feet as decimal feet.

Use Math.ceil(length_feet) to round up to the nearest whole foot and use that for the price calculation.

Bob