Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove space in a data without visualise it

I have these input-boxes which I did some controls on them using jQuery. If the inserted number is longer than 3 digits it will add space to them on blur, and after re-entering to the input-box (focus) it will delete the spaces. These two functions work fine !

The problem is that when I want to send these data (click over Check Me button), due to the fact that on blur I added spaces to them, these entries are not considered as number (isNaN).

Problem

I want a solution to check these data (without changing them on the page), by using the same function on focus (included in my codes), in order to check them correctly and not getting error because of the spaces.

   $(function() {
     $('.ndInbox').blur(function() {
       try {
         // Get your formatted number
         var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
         if (isNaN(formatted) || $(this).val() == "") {
           return;
         }
         // Split off any decimal value (there should be one)
         var sections = formatted.split('.');
         // Replace every third digit with a space
         sections[0] = sections[0].replace(/\B(?=(\d{3})+\b)/g, " ");
         // Output the updated and rejoined sections
         $(this).val(sections.join('.'));
       } catch (err) {
         alert(err);
       }
     });
     $('.ndInbox').focus(function() {
       if ($(this).val() != "") {
         var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
         if (isNaN(formatted)) {
           return;
         }
         $(this).val(formatted);
       }
     });
   });

   $(document).ready(function() {
     $('#btn').click(function() {
       /*
              //it should happen here !!!
              $('.ndInbox').DontKnowWhat(function() {
                if ($(this).val() != "") {
                  var formatted = Number($(this).val().replace(/\s/g, '')).toFixed(2);
                  if (isNaN(formatted)) {
                    return;
                  }
                  $(this).val(formatted); // this one should not be displayed in page
                }
              });
              // till here
       */

       $("#avPurchase01").removeClass("ndLabelRed");
       $("#avPurchase02").removeClass("ndLabelRed");
       $("#avPurchase03").removeClass("ndLabelRed");

       if (isNaN($('#lpcfIn02Id').val())) {
         $("#avPurchase01").addClass("ndLabelRed");
       }
       if (isNaN($('#lpcfIn0sd').val())) {
         $("#avPurchase02").addClass("ndLabelRed");
       }
       if (isNaN($('#lpcfIn0232').val())) {
         $("#avPurchase03").addClass("ndLabelRed");
       }
     });
   });
.ndInbox {
  background-color: white;
  width: 390px;
  height: 42px;
  box-shadow: 0 2px 2px 0 #C2C2C2;
  border: none;
  outline: none;
  font-size: 18px;
  margin-bottom: 10px;
  font-family: 'PT Sans', sans-serif;
  padding-left: 10px;
}
.ndLabel {
  color: #999;
  font-size: 17px;
  font-family: 'PT Sans', sans-serif;
}
.ndLabelRed {
  color: red;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<table>
  <tr>
    <td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase01">Average, &euro;:</td>
    <td colspan="2">
      <input id="lpcfIn02Id" class="ndInbox" type="text" value="" />
    </td>
  </tr>
  <tr>
    <td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase02">Budget, &euro;:</td>
    <td colspan="2">
      <input id="lpcfIn0sd" class="ndInbox" type="text" value="" />
    </td>
  </tr>
  <tr>
    <td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase03">Salary, &euro;:</td>
    <td colspan="2">
      <input id="lpcfIn0232" class="ndInbox" type="text" value="" />
    </td>
  </tr>
</table>
<button id="btn">
  Check ME
</button>

jsFiddle Link

like image 379
ReshaD Avatar asked Feb 24 '26 10:02

ReshaD


1 Answers

You can create plugin that will return number:

  $.fn.number = function() {
    if ($(this).val() != "") {
      return Number($(this).val().replace(/\s/g, '')).toFixed(2);
    }
  };

and use it like this:

   if (isNaN($('#lpcfIn02Id').number())) {
     $("#avPurchase01").addClass("ndLabelRed");
   }
   if (isNaN($('#lpcfIn0sd').number())) {
     $("#avPurchase02").addClass("ndLabelRed");
   }
   if (isNaN($('#lpcfIn0232').number())) {
     $("#avPurchase03").addClass("ndLabelRed");
   }
like image 94
jcubic Avatar answered Feb 25 '26 23:02

jcubic