javascript function in form

I have this form in a page block:

$aForm = array(
            'form_attrs' => array(
                'name'     => 'form_general_health',
                'method'   => 'post',
            ),

            'params' => array (
              
                      'db' => array(
                    'table' => 'general_health', // table name
                    'key' => 'general_health_id', // key field name
                    'uri' => '', // uri field name
                    'uri_title' => '', // title field to generate uri from
                    'submit_name' => 'submit_general_health_form', // some filed name with non empty value to determine if the for was submitted,
                                                       // in most cases it is submit button name
                ),
                'csrf' => array(
                      'disable' => true, //if it wasn't set or has some other value then CSRF checking is enabled for current form, take a look at sys_security_form_token_enable to disable CSRF checking completely.
                )
              ),
            'inputs' => array(
                'header1' => array(
                    'type' => 'block_header',
                    'caption' => _t("_General_health_txt"),
                ),
                'Ht_Ft' => array(
                    'type' => 'text',
                    'name' => 'Height_Feet',
                    'attrs' => array(
                    'id' => 'Height_Feet',
                    'onblur' => '',
                    ),
                    'caption' => _t("_Height_Feet"),
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Ht_In' => array(
                    'type' => 'text',
                    'name' => 'Height_Inches',
                    'attrs' => array(
                    'id' => 'Height_Inches',
                    ),
                    'caption' => _t("_Height_Inches"),
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Weight' => array(
                    'type' => 'text',
                    'name' => 'Weight',
                    'attrs' => array(
                    'id' => 'Weight',
                    ),
                    'caption' => _t("_Weight"),
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'BMI' => array(
                    'type' => 'text',
                    'name' => 'BMI',
                    'attrs' => array(
                    'id' => 'BMI',
                    'readonly' => true,
                    ),
                    'caption' => _t("_BMI"),
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Weight_Is' => array(
                    'type' => 'text',
                    'name' => 'WeightOpinion',
                    'caption' => _t("_Weight Opinion"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Appetite_Is' => array(
                    'type' => 'text',
                    'name' => 'Appetite',
                    'caption' => _t("_Appetite"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Nutrition_Is' => array(
                    'type' => 'text',
                    'name' => 'Nutrition',
                    'caption' => _t("_Nutrition"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Sleep_Hours' => array(
                    'type' => 'text',
                    'name' => 'SleepHours',
                    'caption' => _t("_Sleep_Hours"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Sleep_Is' => array(
                    'type' => 'text',
                    'name' => 'SleepHoursOpinion',
                    'caption' => _t("_Sleep_Is"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Sleep_Interference' => array(
                    'type' => 'text',
                    'name' => 'SleepInterferance',
                    'caption' => _t("_Sleep_Interference"),
                    'value' => '',
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Known_Med' => array(
                    'type' => 'textarea',
                    'name' => 'KnownMed',
                    'caption' => _t("_Known_Med"),
                    'value' => $KnownMed,
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'General_Health' => array(
                    'type' => 'textarea',
                    'name' => 'GeneralHealth',
                    'caption' => _t("_General Health"),
                    'value' => $GeneralHealth,
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'Client' => array(
                    'type' => 'hidden',
                    'name' => 'client_id',
                    'value' => $client,
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),
                'header1_end' => array(
                    'type' => 'block_end'
                ),
             'submit_send' => array(
            'type' => 'submit',
            'colspan' => true,
            'name' => 'submit_general_health_form',
            'value' => _t("_Submit_general_health"),
        ),
             ),
        );

        $oForm = new BxTemplFormView ($aForm);
        $oForm->initChecker();


        if ($oForm->isSubmittedAndValid ()) {
           
           
    $sClient = $_POST['client_id'];

            // add additional vars to database, in this case creation date field is added
            $aValsAdd = array (
            'input_by' => $_COOKIE['memberID'],
            );
if ($oForm->insert ($aValsAdd)) {
                header ("Location: theraprep-medications?client=$sClient");
            }
        }

        return array($sStatusText . $oForm->getCode(), array(), array(), false);

Need to know where to put this function:

<script type="text/javascript" language="javascript">
function f_calBMI() {
    var v_heightF = document.getElementById("Height_Feet").value;
    var v_heightI = document.getElementById("Height_Inches").value;
    var v_weight = document.getElementById("Weight").value;
    var v_height = 0 ;
    var v_bmi = "" ;
    if ((v_heightF != "") && (v_weight!= "") && !isNaN(v_heightF) && !isNaN(v_weight)) {
        //calculate height
        if (v_heightI != "" && !isNaN(v_heightI)) {
        v_height = parseFloat(v_heightF)*12 + parseFloat(v_heightI) ;
        }     
        else { v_height = parseFloat(v_heightF)*12 ;}         
        v_bmi = parseFloat(v_weight)*703/(v_height*v_height) ;
        v_bmi = Math.round(parseFloat(v_bmi)*10) ;
        v_bmi = v_bmi/10 ;
        document.getElementById("BMI").value = v_bmi ;
        } else {
            document.getElementById("BMI").value = "";   
            }
            }

window.onload = function() {
   
f_calBMI() ;
    document.getElementById("Height_Feet").onblur = f_calBMI ;
    document.getElementById("Height_Inches").onblur = f_calBMI ;
    document.getElementById("Weight").onblur = f_calBMI ;
    document.getElementById('form_general_health').onclick = f_calBMI ;
                                    }   

</script>

This function calculates the input of the Height and Weight of a person to come up with their Body Mass Index. So, what it does is, after the height and weight fields have been filled in, it automatically calculates and displays the BMI in the BMI field. But without a button click, using onblur instead.

I have gotten all the fields duplicated from my old style input fields to dolphin style input fields, but the function is not working, nor can i see it when using firebug.

Any help is appreciated and Thanks in advance.

Before the form.

Do this. Store the form in a var. Use heredoc method to preserve quotes.

$myJavaScript = <<<CODE
put your javascript code here.
CODE;

Now replace this line where your form is returned. From this

        return array($sStatusText . $oForm->getCode(), array(), array(), false);

To This

        return array($sStatusText . $myJavaScript . $oForm->getCode(), array(), array(), false);

you are a freaking genius - thanks again so so so so so so much!!!!!!!!!!!!!

another quick question, semi related - its on this same form. is it possible to reduce the size of a field. For example, a state field - I am only using the 2 character abbreviations, so can I shrink the field to just 2 characters?

If the id your passing in the form builder is actually setting the ID then you can add CSS to general.css or common.css or adv_forms.css to target that ID and change the width.

i tried this, and all i got was the info inside the field was cut off, but the field itself was not made smaller

#Height_Feet {
    width: 2px;   
}

You have to target the normal class for the text box to over ride it. Like so.

#Height_Feet .input_wrapper_text {
      width: 22px;
}

2px is too small.

ok, cool - i tried 2 just to see what would happen - will try new modification now - thanks again

that didnt work, but no biggie - i can play around with it later and see if i can figure it out.

Well i can't provide an exact target unless i can see the page the form is on so i can use firebug to find the exact target. Plus the css file you put it in may not actually be used on the page. I provide 3 possible placements for it, but which one would be best would depend on what other classes may be included on the page. I am guessing with this as i am working blind.

Or use an inline style, inline styles always override an external style.

@Deano - for example, look at pedit.php the Zip code field.technically, you dont need more than 10 characters, so how would I reduce that field.

You can't. That form field does not have it's own unique ID to single it out. This is the final output on the page.

<input class="form_input_text bx-def-font" type="text" value="####" name="zip[0]" max="32" min="1">

There is no id param. Without it, it cannot be singled out.

So i have to ask is the id param actually assigning a id. Like this one.

                'Ht_Ft' => array(
                    'type' => 'text',
                    'name' => 'Height_Feet',
                    'attrs' => array(
                    'id' => 'Height_Feet',
                    'onblur' => '',
                    ),
                    'caption' => _t("_Height_Feet"),
                      'db' => array (
                        'pass' => 'Xss',  // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
                    ),
                ),

Does the final output actually have id="Height_Feet" in the <input> tag. If not, then it will not work.

<input id="Height_Feet" class="form_input_text bx-def-font" type="text" name="Height_Feet" onblur="" maxlength="2"></input>

thats from firebug

I think i got that backwards before. Selectors need to be in proper order.

Try this at the end of forms_adv.css

.input_wrapper_text #Height_Feet {
      width: 22px;
}

Crap now that i think of it, that most likely won't work either as it will target the input and it's the wrapper that needs to be changed. So i don't think there is a way to do it.

i had tried it your second way, the first time, and then you posted your first way, so i got kinda happy, thinking I had it backwards originally. - lol