Calculate using radio button

ka

kayrie 10 Oct, 2011

hye guys,

i have a form that user can submit value that calculate a total of days using radio button.
[attachment=0]radio.png[/attachment]
How can i make it relate with the value user input inside textbox and the value then multiply with the value that i assign in that radio button and the total is stored in database as totalamount_id?

Thank you. really appreciate your help here..

Gr

GreyHead 10 Oct, 2011

Hi Kayrie,

What is the Form HTML for these elements?

Bob

ka

kayrie 10 Oct, 2011

Hye bob,

This is the code.

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Days</label>
    <input class="cf_inputbox validate-number validate-digits" maxlength="150" size="30" title="" id="text_30" name="day_id" type="text"/>


  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Staying Status</label>
    <div class="float_left">
      <input value="60" title="" class="radio" id="radio10" name="radio1" type="radio" />
      <label for="radio10" class="radio_label">Day</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">Staying Status :: Please indicate here if less than one week</div>
  </div>
  <div class="cfclear"> </div>
</div>

ka

kayrie 10 Oct, 2011

Hye bob,

I have another option if the value directly show at next text box as preview at image below..
how does i can make it pop-up the total at the Total Amount field?
[attachment=0]help.png[/attachment]
This is the code

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Days</label>
    <input class="cf_inputbox validate-number validate-digits" maxlength="150" size="30" title="" id="text_30" name="day_id" type="text"/>


  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Staying Status</label>
    <div class="float_left">
      <input value="60" title="" class="radio" id="radio10" name="radio1" type="radio" />
      <label for="radio10" class="radio_label">Day</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">Staying Status :: Please indicate here if less than one week</div>
  </div>
  <div class="cfclear"> </div>
</div>





<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total amount:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="totalamount1_id" name="totalamount1_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

Gr

GreyHead 10 Oct, 2011

Hi Kayrie,

Here is the basic JavaScript - use in a JS Load action. It will need to be extended to work in the full form.

window.addEvent('domready', function() {
  $('text_30').addEvent('change', calculate);
  $('radio10').addEvent('click', calculate);

  function calculate() {
    if ( parseInt($('text_30').value) > 0 && $('radio10').checked ) {
      $('totalamount1_id').value = parseInt($('text_30').value) * parseInt($('radio10').value);
    }
  };
});

Bob

ka

kayrie 10 Oct, 2011

Hye bob,

It works. Really appreciate it. Thank You.

ka

kayrie 10 Oct, 2011

Hye bob,

I tried to add the week and month field. it look like this :
[attachment=0]please.png[/attachment]
in JS Load action i create code like this one :

window.addEvent('domready', function() {
  $('text_30').addEvent('change', calculate);
  $('radio10').addEvent('click', calculate);
  $('text_31').addEvent('change', calculate);
  $('radio20').addEvent('click', calculate);
  $('text_32').addEvent('change', calculate);
  $('radio30').addEvent('click', calculate);

  function calculate() {
    if ( parseInt($('text_30').value) > 0 && $('radio10').checked ) {
      $('totalamount1_id').value = parseInt($('text_30').value) * parseInt($('radio10').value);
    else if ( parseInt($('text_31').value) > 0 && $('radio20').checked ) {
      $('totalamount2_id').value = parseInt($('text_31').value) * parseInt($('radio20').value);
    else if ( parseInt($('text_32').value) > 0 && $('radio30').checked ) {
      $('totalamount3_id').value = parseInt($('text_32').value) * parseInt($('radio30').value);
}

  };
});

and in form html :

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Days</label>
    <input class="cf_inputbox validate-number validate-digits" maxlength="150" size="30" title="" id="text_30" name="day_id" type="text"/>


  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Staying Status</label>
    <div class="float_left">
      <input value="60" title="" class="radio" id="radio10" name="radio1" type="radio" />
      <label for="radio10" class="radio_label">Day</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">Staying Status :: Please indicate here if less than one week</div>
  </div>
  <div class="cfclear"> </div>
</div>





<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total amount:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="totalamount1_id" name="totalamount1_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Week</label>
    <input class="cf_inputbox validate-number validate-digits" maxlength="150" size="30" title="" id="text_31" name="week_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Staying Status</label>
    <div class="float_left">
      <input value="300" title="" class="radio" id="radio20" name="radio2" type="radio" />
      <label for="radio20" class="radio_label">Week</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">Staying Status :: Please indicate here if less than one month</div>
  </div>
  <div class="cfclear"> </div>
</div>



<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total amount:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="totalamount2_id" name="totalamount2_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>


<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total Month</label>
    <input class="cf_inputbox validate-number validate-digits" maxlength="150" size="30" title="" id="text_32" name="month_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Statying Status</label>
    <div class="float_left">
      <input value="1000" title="" class="radio" id="radio30" name="radio3" type="radio" />
      <label for="radio30" class="radio_label">Month</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">Statying Status :: Please indicate here if more than one month</div>
  </div>
  <div class="cfclear"> </div>
</div>




<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Total amount:</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="totalamount3_id" name="totalamount3_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

Sorry actually i'm still new in programming. Tried to learn. But sometime get stuck in making coding.
Really appreciate your help here.
Thank You.

Gr

GreyHead 10 Oct, 2011

Hi Kayrie,

Think through the logic, you may not want the 'elseif's - just 'if' will be better I think

Bob

ka

kayrie 11 Oct, 2011

Hye bob,

Thank a lot. Really appreciate..

ka

kayrie 02 Nov, 2011

Hye bob,

what wrong with this code?

window.addEvent('domready', function() {
  $('text_20').addEvent('change', calculate);
  $('text_9').addEvent('change', calculate);
  
  function calculate() {
    if ( parseInt($('text_20').value) > 0 && $('text_9').checked ) {
      $('L_totalavailable_id').value = parseInt($('text_20').value) - parseInt($('text_9').value);
    
}



  };
});

Thank You

Gr

GreyHead 02 Nov, 2011

Hi Kayrie,

Looks OK to me.

Bob

ka

kayrie 03 Nov, 2011

Hye bob,

Actually not really ok i think because the total does not come up at that textbox field.
Here the field i made :
[attachment=0]2.png[/attachment]

and here the html code :

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Current Balance</label>
    <input class="cf_inputbox validate-alphanum" maxlength="150" size="30" title="" id="text_20" name="currentbalance_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Applied</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="" id="text_9" name="applied_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Balance Day (s)</label>
    <input class="cf_inputbox validate-alphanum" maxlength="150" size="30" title="" id="text_21" name="balance_id" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

i tried to make field name current balance minus the totals applied and the answer will came up at balance field.

really appreciate your help.
Thank You.

ka

kayrie 09 Nov, 2011

hi guys,

i need help on this...
seems like i find out that the new value just cannot update....

sum1 expert help me ...
thanks

ka

kayrie 16 Nov, 2011

Anyone? Plz..

ka

kayrie 17 Nov, 2011

Can anyone give some opinion here?Please..

nm

nml375 17 Nov, 2011

Hi kayrie,
The problem with the last Form/script, is that text_9 is not a checkbox, but a text entry. Thus, $('text_9') will not have the checked() method. You probably want to modify your calculate-function like below:

function calculate() {
  if ( parseInt($('text_20').value) > 0 && parseInt($('text_9').value) > 0 ) {
    $('L_totalavailable_id').value = parseInt($('text_20').value) - parseInt($('text_9').value);
  }
}

/Fredrik