CODEWITHSUNDEEP
javascriptjquery
Pabi
Pabi

Reputation: 994

JS: Update Text Live on Page Everytime Input is Changed

I currently have a form that I append when a user clicks a button:

$('.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");
    });

And I need to make it so that the <span> with id price shows the price live updated.

I need the price to equal to the select value * 100 * amount of employees from the number input.

How would I go along doing that.

Thank you. Let me know if I wasn't clear enough.

Upvotes: 1

Views: 1307

Answers (1)

Matt D. Webb
Matt D. Webb

Reputation: 3314

I have bound a couple of change events into your code, these will update the price as mentioned.

Here is a working 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();
});

});

Note: I made a few to changes to the initial code:

  1. Changed .append to .html to prevent repeated injected html (change back if desired).

  2. Added a + after "Price: ... " in your html form as an error occurs without it.

  3. Added an id attribute to the input for amount.

Upvotes: 2

Related Questions