How could customize join form depend on sex field

Hi All,

   I want to customize the join form depend on sex field chosen.

   If I choose male as sex for that particular radio button fields would display

   If I choose the female as a sex for that another particular radio button fields would display.

  How could I write a script on click or change function using javascript,jQuery for the join form.

 Depend on the sex field, values to be change and display.

 Thanks in Advance

do a search here in the forums. I believe this has been asked before. Hopefully you can find the answer.

I ran into a problem when I wanted to use some javascript to do some real-time validation.  The form builder does not use IDs on the fields so that presents a problem as usually we use IDs in the js for determining which things has focus etc.

You could do custom join forms for this - in which - in reference to GGs post - you could use IDs for your form fields and do the validation/checking. I have a post on how I did it for other forms (not the join form) but the concept would be the same.

http://www.boonex.com/forums/?action=goto&my_threads=1#topic/Hidden-Visible-Dependent-Fields.htm

http://www.boonex.com/forums/?action=goto&my_threads=1#topic/Dependent-Select-Fields.htm

By Editing the BxBaseFormView.php

//Added for radio button image

 function genInputImage(&$aInput)

    {

        $sDivider = isset($aInput['dv']) ? $aInput['dv'] : ' ';

        switch ($aInput['type']) {

            // standard inputs (and non-standard, interpreted as standard)

            case 'datetime':

                $this->_isDateTimeControl = true;

            case 'date':

                $this->_isDateControl = true;

            case 'text':

            case 'number':

            case 'email':

            case 'url':

            case 'checkbox':

            case 'radio':

            case 'image':

            case 'password':

            case 'slider':

            case 'range':

            case 'doublerange':

            case 'hidden':

                $sInput = $this->genInputStandard($aInput);

            break;

            case 'file':

                if (!isset($aInput['attrs']['size']))

                    $aInput['attrs']['size'] = 12;

                $sInput = $this->genInputStandard($aInput);

            break;

            case 'button':

            case 'reset':

            case 'submit':

                $sInput = $this->genInputButton($aInput);

            break;

            case 'textarea':

                $sInput = $this->genInputTextarea($aInput);

            break;

            case 'select':

                $sInput = $this->genInputSelect($aInput);

            break;

            case 'select_multiple':

                $sInput = $this->genInputSelectMultiple($aInput);

            break;

            case 'checkbox_set':

                $sInput = $this->genInputCheckboxSet($aInput);

            break;

            case 'radio_set':

                $sInput = $this->genInputRadioSet($aInput);

            break;

            case 'input_set': // numeric array of inputs

                $sInput = '';

                foreach ($aInput as $iKey => $aSubInput) {

                    if (!is_int($iKey) or !$aSubInput)

                        continue; // parse only integer keys and existing values

                    $sInput .= $this->genInput($aSubInput); // recursive call

                    $sInput .= $sDivider;

                }

            break;

            case 'custom':

                $sInput = isset($aInput['content']) ? $aInput['content'] : '';

            break;

            case 'canvas':

                //TODO: do we need canvas?

            break;

            case 'captcha':

                $sInput = $this->genInputCaptcha($aInput);

            break;

            case 'value':

                $sInput = $aInput['value'];

            break;

            default:

                //unknown control type

                $sInput = 'Unknown control type';

        }

        if($aInput['value'] =='male' || $aInput['value'] =='female'){

        // create input label

        $sInput .= $this->genLabel($aInput);

}else{

$sInput .= $this->genLabel($aInput);

$sInput .= $this->genLabelImage($aInput);

}

        return $sInput;

    }

  function genLabelImage(&$aInput)

    {

        if (!isset($aInput['label']) or empty($aInput['label']))

            return '';

        $sLabel   = $aInput['label'];

//$sValue   = $aInput['values'];

//echo $sValue;

        $sInputID = $this->getInputId($aInput);

//echo $sInputID; echo "bbfgh";

   // $sRet = '<label for="' . $sInputID . '">' . $sLabel . '</label>';

$sRet = '<img alt="" id="bodytypeimage_'.$sLabel.'" src="'.$site['url'].'media/images/bodytype/'.$sLabel.'.png">';

   return $sRet;

    }

And In page_81.html

<script>

    $("input:radio[name='Sex[0]']").change(function() {

   var sexval = $("input:radio[name='Sex[0]']:checked").val()

       //alert(sexval);

    if(sexval=='female'){

   $("#bodytypeimage_Average").attr("src","media/images/bodytype/Average_1.png");

   $("#bodytypeimage_Ample").attr("src","media/images/bodytype/Ample_1.png");

   $("#bodytypeimage_Athletic").attr("src","media/images/bodytype/Athletic_1.png");

   $("#bodytypeimage_Cuddly").attr("src","media/images/bodytype/Cuddly_1.png");

   $("#bodytypeimage_Slim").attr("src","media/images/bodytype/Slim_1.png");

        $("#bodytypeimage_VeryCuddly").attr("src","media/images/bodytype/VeryCuddly_1.png");

    }

      if(sexval=='male'){

   $("#bodytypeimage_Average").attr("src","media/images/bodytype/Average.png");

   $("#bodytypeimage_Ample").attr("src","media/images/bodytype/Ample.png");

   $("#bodytypeimage_Athletic").attr("src","media/images/bodytype/Athletic.png");

   $("#bodytypeimage_Cuddly").attr("src","media/images/bodytype/Cuddly.png");

   $("#bodytypeimage_Slim").attr("src","media/images/bodytype/Slim.png");

        $("#bodytypeimage_VeryCuddly").attr("src","media/images/bodytype/VeryCuddly.png");

    }

     }); 

</script>

By This modification  I customize the join page