Forums

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..

Hi Kayrie,

What is the Form HTML for these elements?

Bob

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>

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>

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

Hye bob,

It works. Really appreciate it. Thank You.

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.

Hi Kayrie,

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

Bob

Hye bob,

Thank a lot. Really appreciate..

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

Hi Kayrie,

Looks OK to me.

Bob

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.

hi guys,

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

sum1 expert help me ...
thanks

Anyone? Plz..

Can anyone give some opinion here?Please..

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