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事件绑定到您的代码中，这些事件会更新价格。

这是一个有效的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();
});

});

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

将.append更改为.html以防止重复注入的html（如果需要，可以更改）。
在＆＃34; Price：...＆＃34;之后添加了+在你的html表单中，如果没有它就会发生错误。
为金额输入添加了id属性。

JS：在页面上更新文本实时更改每次输入

1 个答案: