Increment input values in +1 containing letters and numbers using Jquery?

Asked

Viewed 539 times

4

I have a table with data of the cheque sheets as: bank, account, agency and sheet number, everything was fine so far, but today a customer came with a ticket of the Italian and in it has 3 letters followed by a hyphen and the sequence of the number. example: ABC-7852

The numbers of the sheets are sequentially incremetado of +1, in the sheets of the Itaú the letters are not changed, tested using the function explode do php and I was able to make it work by disregarding everything before the (-) and then concatenating.

In the JQuery can use explode or a similar function? To repeat letters on all lines and only increment numerical values.

ABC-7852
ABC-7853
ABC-7854
ABC-7855

follows the current code. 

$(document).on('blur', '.ncheque', function() {
  var chqs = $('.ncheque');
  var index = null;
  var valor = parseInt(this.value);
  indice = chqs.index(this);
  if (valor) {
    $('.ncheque').each(function(index) {
      if (index > indice) {
        $(this).val(valor + index);
      }
    });
  } else {
    $('.ncheque').val('');
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-horizontal">
  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label" for="txtCh1"></label>
    <div class="col-md-4">
      <input id="txtCh1" name="txtCh1" type="text" placeholder="Folha cheque 1" class="form-control input-md ncheque">
      <input id="txtCh2" name="txtCh2" type="text" placeholder="Folha cheque 2" class="form-control input-md ncheque">
      <input id="txtCh3" name="txtCh3" type="text" placeholder="Folha cheque 3" class="form-control input-md ncheque">
      <input id="txtCh4" name="txtCh4" type="text" placeholder="Folha cheque 4" class="form-control input-md ncheque">
    </div>
  </div>
</div>

jquery

3 answers

6


The Javascript correspondent to explode of PHP is the split.

To be able to use both cases of having only numbers or numbers after letters (with the separator -) you can do it like this:

  var partes = this.value.split('-');
  var valor = parseInt(partes[1] || partes[0]);

and later to put back you can have this logic:

[partes[1] ? partes[0] : null, valor + index].filter(Boolean).join('-')

The idea is to put it again partes[0] in the case of partes[1] exist.

Example:

$(document).on('blur', '.ncheque', function() {
  var chqs = $('.ncheque');
  var index = null;
  var partes = this.value.split('-');
  var valor = parseInt(partes[1] || partes[0]);
  indice = chqs.index(this);
  if (valor) {
    $('.ncheque').each(function(index) {
      if (index > indice) {
        $(this).val([partes[1] ? partes[0] : null, valor + index].filter(Boolean).join('-'));
      }
    });
  } else {
    $('.ncheque').val('');
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-horizontal">
  <!-- Text input-->
  <div class="form-group">
    <label class="col-md-4 control-label" for="txtCh1"></label>
    <div class="col-md-4">
      <input id="txtCh1" name="txtCh1" type="text" placeholder="Folha cheque 1" class="form-control input-md ncheque">
      <input id="txtCh2" name="txtCh2" type="text" placeholder="Folha cheque 2" class="form-control input-md ncheque">
      <input id="txtCh3" name="txtCh3" type="text" placeholder="Folha cheque 3" class="form-control input-md ncheque">
      <input id="txtCh4" name="txtCh4" type="text" placeholder="Folha cheque 4" class="form-control input-md ncheque">
    </div>
  </div>
</div>

  • Thanks @Sergio I started programming direct on JQuery and did not know that could insert native functions within the function, thought that the JQ had its own functions. I thought that the JQ rewrote all javascript. My reasoning was wrong? This?

  • 2

    @Wagnerfernandomomesso jQuery is written in Javascript so you can always use native Javascript. Working with arrays and objects is better with native tools. Working with DOM is easier with jQuery.

5

Use split (explode) and join (implode)

var str = "ABC-7852";
var res = parseInt(str.split("-")[1]) + 1;
res = "ABC-" + res;
console.log(res);

4

The function name is Split. It can be read better in this LINK.

In it, you will have a certain String, and you can break it according to the character you want, in your case, the " - (dash) ".

The function will return an Array of X sizes where your string will be broken, in your case (ABC-7852), will be returned an array of size 2, more or less like this:

Array[0] = ABC, Array[1] = 7852

Finally, just contact both and return to the String you want, in the order you want. Example:

var string = "ABC-7852";
var retorno = string.split('-');
console.log(retorno);

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.