Jump to content

Recommended Posts

Hi

 

This script works well in IE - but not in Firefox, any ideas why?

 

Essentially, it takes (for example) the number of ads times the cost of the add and works out a total

Then it adds together the 4 totals to give a sub total

Then it applies a discount and then tax to give a final total

 

example

2 * 100 = 200

3 * 50 = 150

subtotal = 350

10% discount = 35

vat  (17.5%) = 55.13

total = 370.13

 

<script type="text/javascript">
function reCalcPP() { 
document.getElementById('credit_pp_total').value = (document.getElementById('credit_pp_num').value * document.getElementById('credit_pp_value').value)
}
function reCalcPR() {
document.getElementById('credit_pr_total').value = (document.getElementById('credit_pr_num').value * document.getElementById('credit_pr_value').value)
}
function reCalcJobs(){
document.getElementById('credit_jobs_total').value = (document.getElementById('credit_jobs_num').value * document.getElementById('credit_jobs_value').value)
}
function reCalcEvent() {
document.getElementById('credit_event_total').value = (document.getElementById('credit_event_num').value * document.getElementById('credit_event_value').value)
}

function reCalcTotal() {
  document.getElementById("subtotal").value = 
    parseInt(document.getElementById("credit_pp_total").value) +
    parseInt(document.getElementById("credit_pr_total").value) +
    parseInt(document.getElementById("credit_jobs_total").value) +
    parseInt(document.getElementById("credit_event_total").value) 

document.getElementById('total').value =
    (document.getElementById('subtotal').value -
    (document.getElementById('subtotal').value *
    (document.getElementById('discount').value/100))) *
    (1+(document.getElementById('vat').value/100))
}
</script>

 

The other thing, is that it doesn't like empty boxes. Some customers won't buy all 4 of the first 4 fields.

Any thoughts on how I can get around that?

 

Many many thanks :)

 

 

 

 

 

 

 

Link to comment
https://forums.phpfreaks.com/topic/216172-script-not-working-in-firefox/
Share on other sites

Your code assumes the fields have a value. You will want to typecast the value as an integer - and if NOT a number return an appropriate value. Most likely you are getting the error NaN and the code doesn't know what to do. Since you haven't provided the HTML that invokes the script I can't tell exactly how it is invoked and I'm not going to spend time trying to backward engineer your code to figure it out. (if you posted the form I would be a simple process of copying and pasting into an HTML document).

 

 

My apologies. I thought that the error lay in the code. (Rather than the mark-up)

 

I'm afraid I am unable to code javascript, this is code cobbled together from other sources.

 

...and yes, you were quite correct regarding the error NaN :)

 


<form action="" method="post">
<input type="hidden" name="creditRecordAdded" value="<?php echo $client_id; ?>">

<table border="1" width="100%">
<tr><td width="25%">Order Date </td><td><input type="text" name="credit_order_date" size="30"></td></tr>
<tr><td>Order Number </td><td><input type="text" name="credit_order_num" size="30"></td></tr>
<tr><td>Billing Info </td><td><textarea name="credit_bill_info" cols="50" rows="2"></textarea></td></tr>


<tr><td colspan="2">
<table width="98%" align="center" border="1">
<tr><td colspan="4"><b>Package</b></td></tr>
<tr>
<td colspan="2">Start Date : <input type="text" name="credit_start_date" size="10"></td>
<td colspan="2">End Date : <input type="text" name="credit_end_date" size="10"></td>
</tr>
<tr>
<td>PP</td><td><input type="text" name="credit_pp_num" size="4" onBlur="reCalcPP()"></td><td>@ <input type="text" name="credit_pp_value" size="10" onBlur="reCalcPP()"></td><td> = <input type="text" name="credit_pp_total" size="10" id="credit_pp_total"></td>
</tr>
<tr>
<td>PR</td><td><input type="text" name="credit_pr_num" size="4" onBlur="reCalcPR()"></td><td>@ <input type="text" name="credit_pr_value" size="10" onBlur="reCalcPR()"></td><td> = <input type="text" name="credit_pr_total" size="10" id="credit_pr_total"></td>
</tr>
<tr>
<td>Jobs</td><td><input type="text" name="credit_jobs_num" size="4" onBlur="reCalcJobs()"></td><td>@ <input type="text" name="credit_jobs_value" size="10" onBlur="reCalcJobs()"></td><td> = <input type="text" name="credit_jobs_total" size="10"  id="credit_jobs_total"></td>
</tr>
<tr>
<td>Events</td><td><input type="text" name="credit_event_num" size="4" onBlur="reCalcEvent()"></td><td>@ <input type="text" name="credit_event_value" size="10" onBlur="reCalcEvent()"></td><td> = <input type="text" name="credit_event_total" size="10" id="credit_event_total"></td>
</tr>
</table>
</td>
</tr>

<tr><td>Subtotal</td><td><input type="text" name="credit_subtotal" id="subtotal" size="30" onBlur="reCalcTotal()"></td></tr>
<tr><td>Discount (%) </td><td><input type="text" name="credit_discount" id="discount" size="30" onBlur="reCalcTotal()"></td></tr>
<tr><td>VAT (%) </td><td><input type="text" name="credit_vat" id="vat" size="30" value="17.5" onBlur="reCalcTotal()"></td></tr>
<tr><td>Total  </td><td><input type="text" name="credit_total" id="total" size="30"></td></tr>

<tr><td>Invoice Date</td><td><input type="text" name="credit_inv_date" size="30"></td></tr>
<tr><td>Invoice Number </td><td><input type="text" name="credit_inv_no" size="30"></td></tr>
<tr><td>Paid Date</td><td><input type="text" name="credit_paid_date" size="30"></td></tr>
<tr><td>Contact  </td><td><input type="text" name="credit_contact" size="30"></td></tr>
<tr><td>Contact Number</td><td><input type="text" name="credit_contact_num" size="30"></td></tr>
<tr><td>Contacted On</td><td><input type="text" name="credit_contacted" size="30"></td></tr>
<tr><td>Notes </td><td><textarea name="credit_notes" cols="40" rows="5"></textarea></td></tr>

<tr><td colspan="2" align="center"><input type="submit" value="Add a new credit record"></td></tr>
</table></form>


 

The problem is in the javascript, but the javascript doesn't have much meaning without the HTML form to put it into context.

 

Try this

<html>
<head>

<script type="text/javascript">
function getIntValue(fieldObj)
{
    if(isNaN(parseInt(fieldObj.value)))
    {
        fieldObj.value = '';
        return 0;
    }
    return parseInt(fieldObj.value);
}

function reCalcType(typeName)
{
    var qty = getIntValue(document.getElementById('credit_'+typeName+'_num'));
    var amt = getIntValue(document.getElementById('credit_'+typeName+'_value'));
    document.getElementById('credit_'+typeName+'_total').value = (amt * qty);
    reCalcTotal();
    return;
}

function reCalcTotal(fieldObj)
{
    //Calc subtotal
    var pp_total    = getIntValue(document.getElementById('credit_pp_total'));
    var pr_total    = getIntValue(document.getElementById('credit_pr_total'));
    var jobs_total  = getIntValue(document.getElementById('credit_jobs_total'));
    var event_total = getIntValue(document.getElementById('credit_event_total'));
    var subTotal = (pp_total + pr_total + jobs_total + event_total);
    document.getElementById('subtotal').value = subTotal;
    
    //Calc total
    var disc = getIntValue(document.getElementById('discount'));
    var vat  = getIntValue(document.getElementById('discount'));
    document.getElementById('total').value = (subTotal - (subTotal * (disc/100) * (1+(vat/100)) ) );
    return;
}

function tt(fieldObj)
{
  alert(fieldObj.value*2);
}
</script>

</head>
<body>

<form action="" method="post">
<input type="hidden" name="creditRecordAdded" value="<?php echo $client_id; ?>">

<table border="1" width="100%">
  <tr><td width="25%">Order Date </td><td><input type="text" name="credit_order_date" size="30"></td></tr>
  <tr><td>Order Number </td><td><input type="text" name="credit_order_num" size="30"></td></tr>
  <tr><td>Billing Info </td><td><textarea name="credit_bill_info" cols="50" rows="2"></textarea></td></tr>

  <tr>
    <td colspan="2">
      <table width="98%" align="center" border="1">
        <tr><td colspan="4"><b>Package</b></td></tr>
        <tr>
          <td colspan="2">Start Date : <input type="text" name="credit_start_date" size="10"></td>
          <td colspan="2">End Date : <input type="text" name="credit_end_date" size="10"></td>
        </tr>
        <tr>
          <td>PP</td>
          <td><input type="text" name="credit_pp_num" size="4" onChange="reCalcType('pp')" /></td>
          <td>@ <input type="text" name="credit_pp_value" size="10" onChange="reCalcType('pp')" /></td>
          <td> = <input type="text" name="credit_pp_total" size="10" id="credit_pp_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>PR</td><td><input type="text" name="credit_pr_num" size="4" onChange="reCalcType('pr')" /></td>
          <td>@ <input type="text" name="credit_pr_value" size="10" onChange="reCalcType('pr')" /></td>
          <td> = <input type="text" name="credit_pr_total" size="10" id="credit_pr_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>Jobs</td><td><input type="text" name="credit_jobs_num" size="4" onChange="reCalcType('jobs')" /></td>
          <td>@ <input type="text" name="credit_jobs_value" size="10" onChange="reCalcType('jobs')" /></td>
          <td> = <input type="text" name="credit_jobs_total" size="10" id="credit_jobs_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>Events</td><td><input type="text" name="credit_event_num" size="4" onChange="reCalcType('event')" /></td>
          <td>@ <input type="text" name="credit_event_value" size="10" onChange="reCalcType('event')" /></td>
          <td> = <input type="text" name="credit_event_total" size="10" id="credit_event_total" disabled="disabled" /></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Subtotal</td>
    <td><input type="text" name="credit_subtotal" id="subtotal" size="30" onChange="reCalcTotal()" disabled="disabled" /></td>
  </tr>
  <tr>
    <td>Discount (%) </td><td><input type="text" name="credit_discount" id="discount" size="30" onChange="reCalcTotal()" /></td></tr>
  <tr>
    <td>VAT (%) </td>
    <td><input type="text" name="credit_vat" id="vat" size="30" value="17.5" onChange="reCalcTotal()" /></td>
  </tr>
  <tr>
    <td>Total  </td>
    <td><input type="text" name="credit_total" id="total" size="30"disabled="disabled" /></td>
  </tr>
  <tr>
    <td>Invoice Date</td>
    <td><input type="text" name="credit_inv_date" size="30"></td>
  </tr>
  <tr>
    <td>Invoice Number </td>
    <td><input type="text" name="credit_inv_no" size="30"></td>
  </tr>
  <tr>
    <td>Paid Date</td>
    <td><input type="text" name="credit_paid_date" size="30"></td>
  </tr>
  <tr>
    <td>Contact  </td>
    <td><input type="text" name="credit_contact" size="30"></td>
  </tr>
  <tr>
    <td>Contact Number</td>
    <td><input type="text" name="credit_contact_num" size="30"></td>
  </tr>
  <tr>
    <td>Contacted On</td>
    <td><input type="text" name="credit_contacted" size="30"></td>
  </tr>
  <tr>
    <td>Notes </td>
    <td><textarea name="credit_notes" cols="40" rows="5"></textarea></td></tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="Add a new credit record"></td></tr>
</table>
</form>
</body>
</html>

mjdamato, I really appreciate you taking time to reply; also for totally correcting my script. :)

 

However :( I'm afraid there are a number of issues.

 

The first 4 fields each add up nicely, but when it gets to the subtotal things sort of go wrong...

 

If the subtotal is 1000

discount 10 (%)

vat 17.5 (%)

The total comes out at 883 (instead of 1057.50)

 

I have no idea why this is, as the math is correct (having been previously used in a simpler format).

 

The other thing is, that the fields marked disabled = "disabled" don't seem to submit (via php to my MYSQL db)

When I removed the disabled = "disabled" - they submit ok - is this normal?

 

Unfortunately, this still doesn't work in Firefox :(

 

Honestly, I do appreciate the help - I'm not complaining, I would just like to get to the bottom of things.

 

Thanks again.

 

 

 

Header...


<script type="text/javascript">
function getIntValue(fieldObj)
{
    if(isNaN(parseInt(fieldObj.value)))
    {
        fieldObj.value = '';
        return 0;
    }
    return parseInt(fieldObj.value);
}

function reCalcType(typeName)
{
    var qty = getIntValue(document.getElementById('credit_'+typeName+'_num'));
    var amt = getIntValue(document.getElementById('credit_'+typeName+'_val'));
    document.getElementById('credit_'+typeName+'_tot').value = (amt * qty);
    reCalcTotal();
    return;
}

function reCalcTotal(fieldObj)
{
    //Calc subtotal
    var pp_tot    = getIntValue(document.getElementById('credit_pp_tot'));
    var pr_tot    = getIntValue(document.getElementById('credit_pr_tot'));
    var job_tot   = getIntValue(document.getElementById('credit_job_tot'));
    var event_tot = getIntValue(document.getElementById('credit_event_tot'));
    var subTotal  = (pp_tot + pr_tot + job_tot + event_tot);
    document.getElementById('subtotal').value = subTotal;
   
    //Calc total
    var disc = getIntValue(document.getElementById('discount'));
    var vat  = getIntValue(document.getElementById('vat'));

    document.getElementById('total').value = (subTotal - (subTotal * (disc/100) * (1+(vat/100)) ) );
//   document.getElementById('total').value = disc * subTotal * vat;

    return;
}

function tt(fieldObj)
{
  alert(fieldObj.value*2);
}
</script>


 

 

 

Form...


<form action="" method="post">
<input type="hidden" name="creditRecordAdded" value="<?php echo $client_id; ?>">

<table border="1" width="100%">
<tr><td width="25%">Order Date <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span>Please use the format xx/xx/xxxx</span></a></span></td><td><input type="text" name="credit_order_date" size="30"></td></tr>
<tr><td>Order Number <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span><u>Their</u> purchase order number.</span></a></span></td><td><input type="text" name="credit_order_num" size="30"></td></tr>
<tr><td>Billing Info <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span>This information will show up on the invoice.<br><br>i.e.<br>overall package information<br>number of adverts<br>number of press releases etc.</span></a></span></td><td><textarea name="credit_bill_info" cols="50" rows="2"></textarea></td></tr>



<tr><td colspan="2">
<table width="98%" align="center" border="1">
<tr><td colspan="4"><b>Package</b></td></tr>
<tr>
<td colspan="2">Start Date : <input type="text" name="credit_start_date" size="10"></td>
<td colspan="2">End Date : <input type="text" name="credit_end_date" size="10"></td>
</tr>

<tr>
<td>PP</td><td><input type="text" name="credit_pp_num" size="4" onChange="reCalcType('pp')"></td>
<td>@ <input type="text" name="credit_pp_val" size="10" onChange="reCalcType('pp')"></td>
<td> = <input type="text" name="credit_pp_tot" size="10" id="credit_pp_tot" ></td>
</tr>
<tr>
<td>PR</td><td><input type="text" name="credit_pr_num" size="4" onChange="reCalcType('pr')"></td>
<td>@ <input type="text" name="credit_pr_val" size="10" onChange="reCalcType('pr')"></td>
<td> = <input type="text" name="credit_pr_tot" size="10" id="credit_pr_tot"></td>
</tr>
<tr>
<td>Jobs</td><td><input type="text" name="credit_job_num" size="4" onChange="reCalcType('jobs')"></td>
<td>@ <input type="text" name="credit_job_val" size="10" onChange="reCalcType('job')"></td>
<td> = <input type="text" name="credit_job_tot" size="10" id="credit_job_tot" disabled="disabled"></td>
</tr>
<tr>
<td>Events</td><td><input type="text" name="credit_event_num" size="4" onChange="reCalcType('event')"></td>
<td>@ <input type="text" name="credit_event_val" size="10" onChange="reCalcType('event')"></td>
<td> = <input type="text" name="credit_event_tot" size="10" id="credit_event_tot" disabled="disabled"></td>
</tr>
</table>
</td></tr>

<tr>
<td>Subtotal</td><td><input type="text" name="credit_subtotal" id="subtotal" size="30" onChange="reCalcTotal()" disabled="disabled"></td>
</tr>

<tr>
<td>Discount (%) </td>
<td><input type="text" name="credit_discount" id="discount" size="30" onChange="reCalcTotal()"></td>
</tr>

<tr>
<td>VAT (%) </td>
<td><input type="text" name="credit_vat" id="vat" size="30" value="17.5" onChange="reCalcTotal()"></td>
</tr>

<tr>
<td>Total </td>
<td><input type="text" name="credit_total" id="total" size="30" disabled="disabled"></td>
</tr>

<tr><td>Invoice Date</td><td><input type="text" name="credit_inv_date" size="30"></td></tr>
<tr><td>Invoice Number <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span>Adding an invoice number here - makes the invoice active.<br><br>i.e. This record will now be removed from the <i>Orders that have not been invoiced</i> screen.</span></a></span></td><td><input type="text" name="credit_inv_no" size="30"></td></tr>
<tr><td>Paid Date</td><td><input type="text" name="credit_paid_date" size="30"></td></tr>
<tr><td>Contact  <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span>This is the name that will appear above the company address details on the invoice.</span></a></span></td><td><input type="text" name="credit_contact" size="30"></td></tr>
<tr><td>Contact Number</td><td><input type="text" name="credit_contact_num" size="30"></td></tr>
<tr><td>Contacted On</td><td><input type="text" name="credit_contacted" size="30"></td></tr>
<tr><td>Notes <span class="link"><a href="javascript: void(0)"><img src="includes/img/liitlehelp.gif" width="13" height="13" border="0"><span>These are for personal use and do not appear on the invoice.</span></a></span></td><td><textarea name="credit_notes" cols="40" rows="5"></textarea></td></tr>

<tr><td colspan="2" align="center"><input type="submit" value="Add a new credit record"></td></tr>
</table></form>


If the subtotal is 1000

discount 10 (%)

vat 17.5 (%)

The total comes out at 883 (instead of 1057.50)

OK, first, I made a mistake by applying the discount as the vat:

var vat  = getIntValue(document.getElementById('discount'));

Second, I used the function getIntValue for all the fields, which was another mistake since all the values won't be ints (only the quantity fields). So we need another function to get float values.

Third, the math wasn't right in my code. It was difficult to interpret the match from what you have. I have rewritten the formula to be simpler: total = (subTotal * (1-disc/100) * (1+vat/100))

 

 

When I removed the disabled = "disabled" - they submit ok - is this normal?

 

Yes it is. You should NOT be relying upon javascript calculated values anyway. A malicious user can hijack your form and make the total whatever they want it to be. You need to be recacluating on the server-side. If you do want the user to be able to edit those fields, then by all means make the fields editable. But, I don't think that is what you are wanting. If you don't want the user to be able to edit those values but you think you can safely rely upon JS calculated values that the user could potentially modify, then you could always create a second set of fields for those values and make them hidden fields. It is still a security risk though.

 

Unfortunately, this still doesn't work in Firefox

 

I just realized none of your fields actually have IDs!!! IE will interpret the field name as an ID if no ID exists. That is one problem with IE is that it will try and "correct" errors and make it seem like the code is correct when it isn't.

 

This has all the corrections and will work in FF.

<html>
<head>

<script type="text/javascript">
function getIntValue(fieldObj)
{
    if(isNaN(parseInt(fieldObj.value)))
    {
        fieldObj.value = '';
        return 0;
    }
    return parseInt(fieldObj.value);
}
function getFloatValue(fieldObj)
{
    if(isNaN(parseFloat(fieldObj.value)))
    {
        fieldObj.value = '';
        return 0;
    }
    return parseFloat(fieldObj.value);
}
function reCalcType(typeName)
{
    var qty = getIntValue(document.getElementById('credit_'+typeName+'_num'));
    var amt = getFloatValue(document.getElementById('credit_'+typeName+'_value'));
    document.getElementById('credit_'+typeName+'_total').value = (amt * qty);
    reCalcTotal();
    return;
}
function reCalcTotal(fieldObj)
{
    //Calc subtotal
    var pp_total    = getFloatValue(document.getElementById('credit_pp_total'));
    var pr_total    = getFloatValue(document.getElementById('credit_pr_total'));
    var jobs_total  = getFloatValue(document.getElementById('credit_jobs_total'));
    var event_total = getFloatValue(document.getElementById('credit_event_total'));
    var subTotal = (pp_total + pr_total + jobs_total + event_total);
    document.getElementById('subtotal').value = subTotal;
    
    //Calc total
    var disc = getFloatValue(document.getElementById('discount'));
    var vat  = getFloatValue(document.getElementById('vat'));
    var total = (subTotal * (1-disc/100) * (1+vat/100));
    document.getElementById('total').value = total;
    return;
}
function tt(fieldObj)
{
  alert(fieldObj.value*2);
}
</script>

</head>
<body>
  
<form action="" method="post">
<input type="hidden" name="creditRecordAdded" value="<?php echo $client_id; ?>">

<table border="1" width="100%">
  <tr><td width="25%">Order Date </td><td><input type="text" name="credit_order_date" size="30"></td></tr>
  <tr><td>Order Number </td><td><input type="text" name="credit_order_num" size="30"></td></tr>
  <tr><td>Billing Info </td><td><textarea name="credit_bill_info" cols="50" rows="2"></textarea></td></tr>

  <tr>
    <td colspan="2">
      <table width="98%" align="center" border="1">
        <tr><td colspan="4"><b>Package</b></td></tr>
        <tr>
          <td colspan="2">Start Date : <input type="text" name="credit_start_date" size="10"></td>
          <td colspan="2">End Date : <input type="text" name="credit_end_date" size="10"></td>
        </tr>
        <tr>
          <td>PP</td>
          <td><input type="text" name="credit_pp_num" id="credit_pp_num" size="4" onChange="reCalcType('pp')" /></td>
          <td>@ <input type="text" name="credit_pp_value" id="credit_pp_value" size="10" onChange="reCalcType('pp')" /></td>
          <td> = <input type="text" name="credit_pp_total" id="credit_pp_total" size="10" id="credit_pp_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>PR</td><td><input type="text" name="credit_pr_num" id="credit_pr_num" size="4" onChange="reCalcType('pr')" /></td>
          <td>@ <input type="text" name="credit_pr_value" id="credit_pr_value" size="10" onChange="reCalcType('pr')" /></td>
          <td> = <input type="text" name="credit_pr_total" id="credit_pr_total" size="10" id="credit_pr_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>Jobs</td><td><input type="text" name="credit_jobs_num" id="credit_jobs_num" size="4" onChange="reCalcType('jobs')" /></td>
          <td>@ <input type="text" name="credit_jobs_value" id="credit_jobs_value" size="10" onChange="reCalcType('jobs')" /></td>
          <td> = <input type="text" name="credit_jobs_total" id="credit_jobs_total" size="10" id="credit_jobs_total" disabled="disabled" /></td>
        </tr>
        <tr>
          <td>Events</td><td><input type="text" name="credit_event_num" id="credit_event_num" size="4" onChange="reCalcType('event')" /></td>
          <td>@ <input type="text" name="credit_event_value" id="credit_event_value" size="10" onChange="reCalcType('event')" /></td>
          <td> = <input type="text" name="credit_event_total" id="credit_event_total" size="10" id="credit_event_total" disabled="disabled" /></td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>Subtotal</td>
    <td><input type="text" name="credit_subtotal" id="subtotal" size="30" onChange="reCalcTotal()" disabled="disabled" /></td>
  </tr>
  <tr>
    <td>Discount (%) </td><td><input type="text" name="credit_discount" id="discount" size="30" onChange="reCalcTotal()" /></td></tr>
  <tr>
    <td>VAT (%) </td>
    <td><input type="text" name="credit_vat" id="vat" size="30" value="17.5" onChange="reCalcTotal()" /></td>
  </tr>
  <tr>
    <td>Total  </td>
    <td><input type="text" name="credit_total" id="total" size="30"disabled="disabled" /></td>
  </tr>
  <tr>
    <td>Invoice Date</td>
    <td><input type="text" name="credit_inv_date" size="30"></td>
  </tr>
  <tr>
    <td>Invoice Number </td>
    <td><input type="text" name="credit_inv_no" size="30"></td>
  </tr>
  <tr>
    <td>Paid Date</td>
    <td><input type="text" name="credit_paid_date" size="30"></td>
  </tr>
  <tr>
    <td>Contact  </td>
    <td><input type="text" name="credit_contact" size="30"></td>
  </tr>
  <tr>
    <td>Contact Number</td>
    <td><input type="text" name="credit_contact_num" size="30"></td>
  </tr>
  <tr>
    <td>Contacted On</td>
    <td><input type="text" name="credit_contacted" size="30"></td>
  </tr>
  <tr>
    <td>Notes </td>
    <td><textarea name="credit_notes" cols="40" rows="5"></textarea></td></tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" value="Add a new credit record"></td></tr>
</table>
</form>

</body>
</html>

When I removed the disabled = "disabled" - they submit ok - is this normal?

 

Yes it is. You should NOT be relying upon javascript calculated values anyway. A malicious user can hijack your form and make the total whatever they want it to be. You need to be recacluating on the server-side. If you do want the user to be able to edit those fields, then by all means make the fields editable. But, I don't think that is what you are wanting. If you don't want the user to be able to edit those values but you think you can safely rely upon JS calculated values that the user could potentially modify, then you could always create a second set of fields for those values and make them hidden fields. It is still a security risk though.

 

I agree with everything mjdamato said except for adding hidden fields.  If you want fields to be visible and be posted, but don't want the user to modify them, I believe you can use READONLY instead of DISABLED.  However, as mjdamato said, it is a simple matter for a malicious user to change the form (or use CURL) to post values that are completely different from what should be in the field.  You MUST do the calculations on the SERVER after the form is posted.

If you want fields to be visible and be posted, but don't want the user to modify them, I believe you can use READONLY instead of DISABLED.

 

Ah yes, forgot about that. Although I don't like the fact that readonly fields display as normal fields whereas disabled fields "look" disabled. By making them readonly they can appear as editable to the user - so I'll usually use some style properties to make the readonly fields appear "disabled" to the user.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.