Script not working in Firefox

tHud · October 18, 2010

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

Psycho · October 18, 2010

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

tHud · October 18, 2010

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>

Psycho · October 18, 2010

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>

tHud · October 19, 2010

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>

Psycho · October 20, 2010

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>

DavidAM · October 20, 2010

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.

Psycho · October 20, 2010

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.

tHud · October 21, 2010

Wow! Thanks - that's totally solved it.

I really appreciate the help

...thanks also to David for READONLY

Sign In

Script not working in Firefox

Recommended Posts

tHud

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

tHud

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

tHud

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

DavidAM

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

tHud

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information