locked
how can fire onchange event after we type in textbox of an html RRS feed

  • Question

  • User-1355965324 posted

    I have an html code having hidden textbox inside the table element. But  When we  focus the textbox , automatically the textbox would be enabled and then it would be hidden. The problem is if I type  or change the value of textbox and if I forget to press the  tab, then the changes will not be reflected in to its    controller  with the changed value. I dont know how  to fire on change  in the hidden textbox  once after we type anything here.

    It would be very appreciated if you can give a help

    Here is the code

    Model class

    EmpModel.cs
    public decimal NormalHrs { get; set; }
    public decimal SickHrs{ get; set; }

    html

    @model EmpModel
    
    <table id="attendance" class="cell-border" style="width:100%">
    	<thead >
                  <tr> 
                  <td>Normal Hrs </td>
                  <td>Sick Hrs </td>
                 </tr>
    	<tbody>
                 <tr> 
    	        <td><a href="#">@Model.NormalHrs</a><input asp-for="@Model.NormalHrs" type="hidden" /></td>
    	        <td><a href="#">@Model.SickHrs</a><input asp-for="@Model.SickHrs" type="hidden"/></td>
                 </tr>
                  </tbody>	
    </table>
    
    <script type="text/javascript">
        $(document).ready(function () {
    }
    	TextEdit();
    </script>
    

    Javascript file

    function TextEdit() {
    	 $('.text a').editable({
          	  type: 'text',
           	 name: 'text',
            	mode: 'inline',
            	success: function (response, newValue) {
                $(this).parent('td').find('a').append(newValue);
                $(this).parent('td').find('input[type=hidden]').val(newValue);
            }
        });
    	    $('#attendance a').editable({
    	        type: 'number',
    	        step: 'any',
    	        name: 'name',
    	        title: 'Enter Time',
    	        mode: 'inline',
    	        maxlength: '6',
    	        success: function (response, newValue) {
    	            if ($.isNumeric(newValue)) {
                  	  var newControl = '<input class="borderless-text" id="' + $(this).parent('td').find('input[type=hidden]').attr('id') + '" name="' + $(this).parent('td').find('input[type=hidden]').attr('id') + '" value="' + newValue + '" type="text" />';
    	                $(this).parent('td').find('a').empty();
    	                $(this).parent('td').find('a').append(newControl);
    	                $(this).parent('td').find('input[type=hidden]').val(parseFloat(Math.round(newValue * 100) / 100).toFixed(2));
                }
    
            }
    
        });
    $('.editable').on('hidden', function (e, reason) {
    
            if (reason === 'save' || reason === 'nochange') {
                var $next;
    
                var proc = 0;
                if (document.getElementsByTagName("input")[1].getAttribute('data-mode') === "first") {
                    document.getElementsByTagName("input")[1].setAttribute("data-mode", "");
                    if ($(this).closest('td').is(':first-child')) {
                        proc = 1;
                    }
                    else {
                        if ($(this).closest('td').prev().find('.editable').length)
                            $next = $(this).closest('td').prev().find('.editable');
                        else
                            $next = $(this).closest('td').prev().closest('td').prev().find('.editable');
                    }
                }
                else {
                    if ($(this).closest('td').next().find('.editable').length)
                        $next = $(this).closest('td').next().find('.editable');
                    else
                        $next = $(this).closest('td').next().closest('td').next().find('.editable');
                }
                if (document.getElementsByTagName("input")[0].getAttribute('data-mode') === "cancel") {
                    proc = 1;
                    document.getElementsByTagName("input")[0].setAttribute("data-mode", "");
                }
    
                //  $next = $(this).closest('table').children('tr:first').children('td:first').find('.editable');*/
                if (proc === 0) {
                    setTimeout(function () {
                        $next.editable('show');
    
                    }, 300);
                }
            }
        });
    }

    With Thanks

    Pol

    Wednesday, March 31, 2021 9:44 AM

All replies

  • User1312693872 posted

    Hi,polachan

    I dont know how  to fire on change  in the hidden textbox  once after we type anything here.

    You can use an addEventListener, then once you input a word, the logic in it will be called:

    <a href="#" id="test">@Model.NormalHrs</a>
    document.getElementById("test").addEventListener("input", function () {
                    alert("fired");
                }, false);

    Best Regards,

    Jerry Cai

    Thursday, April 1, 2021 2:42 AM
  • User-1355965324 posted

    Jerry, Please can I ask you to give some more  details  in your code. 

    How can I get the  getElementbyId object in a vraible of the focused row and column of the table  Attendance. I will focus to that column either by mouse or tab. Pleasse can you help ?

    Where is  location  to place your code either inside the TextEdit) function or Just  inside the script .  Please can you help with code

    Many Thanks

    Thanks

    Friday, April 2, 2021 11:59 AM
  • User-474980206 posted

    The library you are using only commits the value on blur or input of enter. You will need to modify the code to commit on each character input or find a better library.

    Friday, April 2, 2021 2:41 PM
  • User-1355965324 posted

    You are right Bruce

    Please can you help with some code to commit on each character input.  The following line of code should be called in each charecter input

      if ($.isNumeric(newValue)) {
                    var newControl = '<input class="borderless-text" id="' + $(this).parent('td').find('input[type=hidden]').attr('id') + '" name="' + $(this).parent('td').find('input[type=hidden]').attr('id') + '" value="' + newValue + '" type="text" />';
                    $(this).parent('td').find('a').empty();
                    $(this).parent('td').find('a').append(newControl);
                    $(this).parent('td').find('input[type=hidden]').val(parseFloat(Math.round(newValue * 100) / 100).toFixed(2));
                }

    Friday, April 2, 2021 3:04 PM
  • User-474980206 posted

    just branch the code and add the key code handling. You might also do a pull request

     https://github.com/shokai/jQuery.editable

    or find a better library. this one hasn't been maintained.

    Friday, April 2, 2021 3:23 PM