javascript - JS : Update Text Live on Page Everytime Input is Changed

Question

我目前有一个当用户单击按钮时附加的表单:

$('.popup6').on('click', function() {

        $(".cd-popup-container").append(
            "<p><h3><b>Place Employement Ad</b></h3></p>" +
            "<form class='center' action='" + postLink + "' method='post' accept-charset='utf-8' style='width: 75%;'>" +
                "<select class='form-control' required>" +
                "<option value='' disabled selected>Chose the Targetted Employee Category</option>" +
                "<option value='1'>1</option>" +
                "<option value='2'>2</option>" +
                "<option value='3'>3</option>" +
                "<option value='4'>4</option>" +
                "<option value='5'>5</option>" +
            "</select>" +
            "<input class='form-control' type='number' step='1' min= '1' max='1000' name='amount' placeholder='Amount of Employees Wanted' required><br><br>" +
            "Price: <span id='price'></span> "
            "<button class='btn btn-primary' type='submit'>Place Ad</button><br><br>" +
            "</form>" +
            "<a class='cd-popup-close popup-close img-replace'>Close</a>"
            );

        $(".cd-popup-container form").css("margin-top", "-50px");
    });

我需要这样做，以便 <span> id price显示实时更新的价格。

我需要价格等于select value * 100 * amount of employees from the number input .

我将如何继续这样做。

谢谢。如果我不够清楚，请告诉我。

Answer 1

我已将几个 change 事件绑定(bind)到您的代码中，这些事件将更新如上所述的价格。

这是一个工作 JsFiddle Example

$('.popup6').on('click', function () {


$(".cd-popup-container").html(
    "<p><h3><b>Place Employement Ad</b></h3></p>" +
    "<form class='center' action='" + "postLink" + "' method='post' accept-charset='utf-8' style='width: 75%;'>" +
    "<select class='form-control' required>" +
    "<option value='' disabled selected>Chose the Targetted Employee Category</option>" +
    "<option value='1'>1</option>" +
    "<option value='2'>2</option>" +
    "<option value='3'>3</option>" +
    "<option value='4'>4</option>" +
    "<option value='5'>5</option>" +
    "</select>" +
    "<input id='amount' class='form-control' type='number' step='1' min= '1' max='1000' name='amount' placeholder='Amount of Employees Wanted' required><br><br>" +
    "Price: <span id='price'></span> " +
"<button class='btn btn-primary' type='submit'>Place Ad</button><br><br>" +
    "</form>" +
    "<a class='cd-popup-close popup-close img-replace'>Close</a>");

$(".cd-popup-container form").css("margin-top", "-50px");


// grab the values from the form:
var getPrice = function () {
    // get form values:
    var _employees = parseInt($('form > select').find(":selected").val(), 10);
    var _amount = parseInt($('form > #amount').val(), 10);

    // check values are defined:
    if (_employees && _amount) {
        return _amount * 100 * _employees;
    } else {
        // what you wish to show if nothing is selected, change to null if you want to hide the price:
        return 0;
    }
};

// update the price form field:
var setPrice = function() {    
    var _newPrice = getPrice();     
    // update form price:
    if (typeof _newPrice === 'number') { 
        $('#price').show();
        $('#price').text(_newPrice);
     } else {
         // if 'getPrice' you return anything other than a number, hide the price:
         $('#price').hide();
     } 
};

// bind events to update the price when something changes:
$('form > select').on('change', function () {
    setPrice();
});

$('form > #amount').on('change', function () {
    setPrice();
});

});

注意:我对初始代码做了一些更改:

1. 将 .append 更改为 .html 以防止重复注入(inject) html(如果需要的话改回来)。

2. 在 html 表单中的“价格:...”后面添加了 +，因为如果没有它，就会发生错误。

3. 向金额输入添加了 id 属性。