how to change the input value on blur?

Question

I am having one link as 'Add more' which adds input element as many as I want. I want to call blur function on that.

Following html gets added while click on 'Add more' link:

<input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="">

Blur event works only for first element which is there in DOM by default. When I add new element, blur event doesn't get bind to the element.

Following is the javascript code.

$(document).ready(function() {
    $(".timetoadd").blur(function(){
    this.value = parseFloat(this.value).toFixed(2);
    });
)};

It is in separate file called as backend.js. I am using webpack to minify the file and it is included in html file.

How to do that? Please help me out.

Answer 1

Here's an example I've made for you. Do this for your input. It should work fine

 function GetValue(e){ alert(e.target.value); }; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="inputgroup"> <input type="text" name="Dynamic_0" onblur="GetValue(event)"> <input type="text" name="Dynamic_1" onblur="GetValue(event)"> <input type="text" name="Dynamic_2" onblur="GetValue(event)"> </div> 

Answer 2

Use jQuery's on() method on a parent element with an additional selector as the second argument:

 $(document).ready(function() { $("#btnAdd").click(function() { $('<br/><input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="">').appendTo(document.body); }); $(document.body).on('blur', '.timetoadd', function(){ this.value = parseFloat(this.value).toFixed(2); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" id="btnAdd">Add more</button> <br/><input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value=""> 

Instead of document.body , you could also use any other parent that contains the inputs.

Answer 3

By adding the html attribute onblur and some javascript...

 function myFunc(input) { input.value = 0; } 

 <input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value="" onblur="myFunc(this)"> 

Answer 4

 // find elements var id = $("#id > div") var id1 = $("#id1") var input = $("input") var inputCopy; var button = $("button") // handle click and add class button.on("click", function() { $('<input required="" class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value=""><br>').appendTo(id); /* addMore(e.currentTarget, e.currentTarget.value); console.log('new input', e.currentTarget); */ }) $(document.body).on("blur", '.timetoadd', function() { this.value = parseFloat(this.value).toFixed(2); inputCopy = input; }) function addMore(e, value) { inputCopy = e.clone() id.prepend($(inputCopy)); } 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } #id { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #id.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #id.alt button { background: #fff; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="id"> <button>Add more</button> <div> <input required class="form-control js-validate-hoursToAdd timetoadd" step="0.01" name="calculations[settingIndex][hoursToAdd][calculationIndex]" type="number" value=""> </div> </div> 

JSFiddle : https://jsfiddle.net/kutec/c4pvLoua/