Динамически обновлять поля с помощью поля ввода и раскрывающегося списка

Question 1

Я пытаюсь динамически обновить текстовое поле через поле ввода. Затем это будет связано с раскрывающимся списком со значениями. Мне также нужно указать срок, чтобы показать за 30 дней до сегодняшней даты.

Вот мой 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>

Я борюсь с частью Javascript и собираю все вместе.

Я дошел до этого и теперь застрял. (Не очень далеко я знаю)

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

Я просмотрел примеры в Stackoverflow и Google, но ничего не похоже на то, что я пытаюсь достичь. Хотя я знаю, что ответ есть, я не уверен, что задаю правильный вопрос.

Ура

javascript jquery html ajax

3

Janatan 12 Фев 2013 в 16:49

Answer

Я бы поменял это на это. Здесь у меня есть функция updateCost(), которая вызывается при изменении суммы или доставки. Я также добавил код для обработки установленного срока.

Удалите из суммы встроенное событие onchange:

<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(); });
});

В вашем исходном коде есть несколько проблем:

Неправильный регистр при вызове встроенной функции
Использование this в функции, когда this на самом деле не является каким-либо из ваших элементов (вы не передали его в качестве аргумента).
Использование amount в вычислениях, когда amount является входным элементом, а не значением.
С точки зрения удобства использования он будет пытаться обновляться только при изменении суммы, я думаю, что было бы лучше обновлять как изменение суммы, так и доставку.

1

MrCode 12 Фев 2013 в 18:47

Спасибо @MrCode, хотя как уже упоминалось. Почему значения не отображаются в блоках «количество» и «доставка» при выходе из поля ввода.

–

Janatan

12 Фев 2013 в 17:28

Я пробовал это, и это не сработало до того, как вы отредактировали свой пост. Думал, что делаю что-то не так. Странно, ведь выпадающий список тоже отключает. Fiddle

–

Janatan

12 Фев 2013 в 17:36

У вас есть текстовое поле и div с одним и тем же идентификатором amount. Измените div на id="amountdiv". Я обновил ответ изменением jQuery. То же самое с delivery, вы должны изменить на deliverydiv. Сценарий: jsfiddle.net/3TMK8/3

–

MrCode

12 Фев 2013 в 18:42

Question 2

Я бы поменял это на это. Здесь у меня есть функция updateCost(), которая вызывается при изменении суммы или доставки. Я также добавил код для обработки установленного срока.

Удалите из суммы встроенное событие onchange:

<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(); });
});

В вашем исходном коде есть несколько проблем:

Неправильный регистр при вызове встроенной функции
Использование this в функции, когда this на самом деле не является каким-либо из ваших элементов (вы не передали его в качестве аргумента).
Использование amount в вычислениях, когда amount является входным элементом, а не значением.
С точки зрения удобства использования он будет пытаться обновляться только при изменении суммы, я думаю, что было бы лучше обновлять как изменение суммы, так и доставку.

1

MrCode 12 Фев 2013 в 18:47

Спасибо @MrCode, хотя как уже упоминалось. Почему значения не отображаются в блоках «количество» и «доставка» при выходе из поля ввода.

–

Janatan

12 Фев 2013 в 17:28

Я пробовал это, и это не сработало до того, как вы отредактировали свой пост. Думал, что делаю что-то не так. Странно, ведь выпадающий список тоже отключает. Fiddle

–

Janatan

12 Фев 2013 в 17:36

У вас есть текстовое поле и div с одним и тем же идентификатором amount. Измените div на id="amountdiv". Я обновил ответ изменением jQuery. То же самое с delivery, вы должны изменить на deliverydiv. Сценарий: jsfiddle.net/3TMK8/3

–

MrCode

12 Фев 2013 в 18:42

Динамически обновлять поля с помощью поля ввода и раскрывающегося списка

1 ответ

Похожие вопросы

Новые вопросы

javascript