0

I am trying to multiply the user input on input field "full_day" by the "var fullprice", and display the result in readonly input field "total_full" what am i doing wrong that is causing it not to work?

<div id="wrapper">
<div id="header"></div>

<table width="899" border="1" align="left" cellpadding="1">
  <form action="" method="get" name="myform">

  <tr>
    <td width="275"><label>Company Name</label></td>
    <td width="180"><input type="text" name="companyname" id="companyname" /></td>
    <td width="27">&nbsp;</td>
    <td width="223">Enquiry Date</td>
    <td width="160"><input type="text" name="enquiry_date" id="enquiry_date" class="datepicker" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Conference Date In</td>
    <td><input type="text" name="conference_date_in" id="conference_date_in" class="datepicker" /></td>
    <td>&nbsp;</td>
    <td>Conference Date Out</td>
    <td><input type="text" name="conference_date_out" id="conference_date_out" class="datepicker" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Number of Delegates</td>
    <td><input type="text" name="no_of_delegates" id="no_of_delegates" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Accommodation:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><p>Check in Date</p></td>
    <td><input type="text" name="check_in_date" id="check_in_date" class="datepicker" /></td>
    <td><p>&nbsp;</p></td>
    <td><p>Check out Date</p></td>
    <td><p>
      <input type="text" name="check_out_date" id="check_out_date" class="datepicker" />
        </p></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Total Days Accommodation</td>
    <td><input type="text" name="total_days_acc" id="total_days_acc" /></td>
  </tr>
  <tr>
    <td>Number of Rooms:</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Single</td>
    <td><input type="text" name="no_of_rooms_single" id="no_of_rooms_single" /></td>
    <td>&nbsp;</td>
    <td>Double / Twin</td>
    <td><input type="text" name="no_of_rooms_double" id="no_of_rooms_double" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Contact Person</td>
    <td><input type="text" name="contact_person" id="contact_person" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Telephone Number</td>
    <td><input type="text" name="tel_no" id="tel_no" /></td>
    <td>&nbsp;</td>
    <td>Fax Number</td>
    <td><input type="text" name="fax_no" id="fax_no" /></td>
  </tr>
  <tr>
    <td>Cell Number</td>
    <td><input type="text" name="cell_no" id="cell_no" /></td>
    <td>&nbsp;</td>
    <td>Email</td>
    <td><input type="text" name="email" id="email" /></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Full Day Conference @ R260.00 p/p</td>
    <td><input type="text" name="full_day" id="full_day" /></td>
    <td>&nbsp;</td>
    <td>Total Full Day</td>
    <td><input type="text" name="total_full" id="total_full" readonly="readonly" /></td>
  </tr>
  <tr>
    <td>Half Day Conference @ R240.00 p/p</td>
    <td><input type="text" name="half_day" id="half_day" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Single Rooms @ R480.00 p/p</td>
    <td><input type="text" name="single_rooms" id="single_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Double / Twin Rooms @ R720.00 p/p</td>
    <td><input type="text" name="double_rooms" id="double_rooms" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Data Projector @ R400.00 rental p/day</td>
    <td><input type="text" name="data_proj" id="data_proj" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Sub Total</td>
    <td><input type="text" name="sub_total" id="sub_total" /></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </form>
</table>
</div>
</body>
</html>

<script type="text/javascript">

$(function() {
    $(".datepicker").datepicker({ minDate: -0, maxDate: "+100M +10D",dateFormat: 'dd-mm-yy'})
    ({
        changeMonth: true,
        changeYear: true,
    });
        });


var enquiry_date = $.datepicker.formatDate('dd-mm-yy', new Date());
document.getElementById('enquiry_date').value = enquiry_date;

var calcDate = function() {
    var start = $('#conference_date_in').datepicker('getDate');
    var end = $('#conference_date_out').datepicker('getDate');
    var days = (end - start) / 1000 / 60 / 60 / 24;

    if(days==0) days=1
    if( days >= 0 ) {
    document.getElementById('total_days').value = days;
    } 
        }


$('#conference_date_out').change(calcDate);
$('#conference_date_in').change(calcDate);



var calcDateAcc = function() {
    var startacc = $('#check_in_date').datepicker('getDate');
    var endacc = $('#check_out_date').datepicker('getDate');
    var daysacc = (endacc - startacc) / 1000 / 60 / 60 / 24;

    if(daysacc==0) daysacc=1
    if( daysacc >= 0 ) {
    document.getElementById('total_days_acc').value = daysacc;
    } 
        }


$('#check_in_date').change(calcDateAcc);
$('#check_out_date').change(calcDateAcc);

function calculateFull()
{
    var fulldays = document.getElementById("full_day").value;

    var fullprice = 260;

    var result =  fulldays * fullprice;

    document.getElementById("total_full").innerHTML = result;   
    }
    $('#full_day').change(calculateFull);
</script>
4

2 回答 2

0

document.getElementByid("full_day").value returns a string. You have to convert this string into a number before multiplying it with fullprice

var fulldays = parseInt(document.getElementById("full_day").value, 10);

And change document.getElementById("total_full").innerHTML = result; to document.getElementById("total_full").value = result;

于 2012-05-31T21:30:41.963 回答
0

total_full 是输入框,所以你应该设置 value 而不是 innetHTML

document.getElementById("total_full").innerHTML = result;

document.getElementById("total_full").value = result;
于 2012-05-31T21:32:20.943 回答