通过“输入”字段和下拉列表动态更新字段

Question

I'm trying to dynamically update a text field through an input field. This will then be linked to a dropdown selection with values. I also need to show a due date to show 30 days in advance from today's date.

Here is my HTML:

<div>
    <label for="payment">Payment:</label>
    <input type="text" name="amount" id="amount" onChange="myfunction()"/>
    <br /><br />
    <label for="delivery">Delivery:</label>
    <select id="delivery" name="delivery">
        <option value="1">Fast</option>
        <option value="2">Medium</option>
        <option value="3">Slow</option>
    </select>    
</div>
<br />
<div>
Payment Breakdown: <br /><br />
Payment:
<div name="amount" id="amount"></div>
Freight:   
<div name="delivery" id="delivery"></div> 
Total Payment:
<div name="total" id="total"></div>
Due Date:    
<div name="date" id="date"></div>    
</div>

I'm struggling with the Javascript part though and fitting it all together.

I've gotten as far as this and now I'm stuck. (Not very far I know)

function myFunction()
{
var amount = document.getElementById("amount");
var delivery = parseInt($(this).find("option:selected").val());
total = amount + delivery
$("#total").html(total);
};

I've looked at examples on Stackoverflow and Google but nothing seems similar to what I'm trying to achieve. Although I know the answer is out there, I'm not sure if I'm asking the right question.

Cheers

Answer 1

I would change it to this. Here I have an updateCost() function which is called when the amount is changed or the delivery is changed. I also added code to handle the due date.

Remove the inline onchange event from the amount:

<input type="text" name="amount" id="amount"/>

Javascript:

function updateCost()
{
    var amount = $('#amount').val();
    var delivery = parseInt($('#delivery').val());

    var total = amount + delivery
    $("#total").html(total);
    $("#amountdiv").html(amount);
    $("#deliverydiv").html(delivery);

    // handle the due date
    var todayPlus30 = new Date();
    todayPlus30.setDate(todayPlus30.getDate()+30);
    var dateStr = todayPlus30.getDate() + "/" + (todayPlus30.getMonth()+1) + "/" + todayPlus30.getFullYear();

    $('#date').html(dateStr);
}

$(document).ready(function(){
    $('#amount').change(function(){ updateCost(); });
    $('#delivery').change(function(){ updateCost(); });
});

Your original code has a few problems:

1. The wrong case on the inline function call
2. The use of this within the function when this is not actually any of your elements (you didn't pass it as an argument).
3. The use of amount in the calculation when amount is an input element, not a value.
4. From a usability point of view, it would only try to update when the amount is changed, I think it would be better to update on both change of the amount and delivery.