Validate javascript line

Question

Validate javascript line

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I'm trying to do a row-by-row validation on a table as follows: If the product is marked as yes on one vendor, it can not be marked for another vendor. Can someone help me please? Follow template ...

$("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' +
        '<td>' +
        '<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        '<td>' +
        '<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        '<td>' +
        '<select class="form-control" id="autoriza">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
  });

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        <tbody id="mytbody">

        </tbody>
      </table>
    </div>
  </div>
</div>

javascript

asked by anonymous 26.12.2018 / 19:11

3 answers

2

The sensible thing for this type of form would be to use input type radio

When a RADIO option is selected, it will only be deselected when another RADIO option with the same NAME is selected.

See how it works

Produto A <input type="radio" name="prodA" value="Forn01"/>
<input type="radio" name="prodA" value="Forn02"/>
<input type="radio" name="prodA" value="Forn03"/>
<br>
Produto B <input type="radio" name="prodB" value="Forn01"/>
<input type="radio" name="prodB" value="Forn02"/>
<input type="radio" name="prodB" value="Forn03"/>
<br>
Produto C <input type="radio" name="prodC" value="Forn01"/>
<input type="radio" name="prodC" value="Forn02"/>
<input type="radio" name="prodC" value="Forn03"/>

So your code would look like this: see this form being retrieved in PHP

$("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' + 
        '<td>' + 
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn01">'+
        '</td>' +
        '<td>' + 
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn02">'+
        '</td>' +
        '<td>' +
        '<input type="radio" name="prod'+vIdProduto +'" value="Forn03">'+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
    <form action="" method="post">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        
        <tbody id="mytbody">

        </tbody>

      </table>
              <input type="submit">
        </form>
    </div>
  </div>
</div>

26.12.2018 / 23:10

0

First we will remove the id="autoriza" from your select , as they are duplicated and this is a problem.

Now we'll add a new class to your select so that we can recognize them in JavaScript. Put all the same as the code below:

<select class="form-control select-comprar">

Finally, add JavaScript to handle enabling and disabling selects:

$('.select-comprar').on('change', function () {
    if ($(this).val() == "Sim") {
        controlarHabilitacaoSelectComprar(false, $(this));
    }
    else {
        controlarHabilitacaoSelectComprar(true, $(this));
    }
});

function controlarHabilitacaoSelectComprar(habilitar, coluna) {
    //Pegamos todas as colunas da mesma linha do select que alteramos o valor
    var siblings = coluna.parent().siblings();

    //Iremos realizar um loop em todos os selects que possuirem a classe que definimos como "select-comprar"
    siblings.find('.teste-select').each(function () {
        if (habilitar) {
            $(this).removeAttr('disabled');
        }
        else {
            $(this).attr('disabled', 'disabled');
            $(this).val('Não');
        }
    });
}

26.12.2018 / 20:05

Return array of properties in laravel Python Numpy library

score 0 · Accepted Answer

As already mentioned, repeating id's is incorrect and causes problems. In fact you will not even need id's in the selects, so remove them all.

Just create this event that will disable the other selects on the same line by selecting one of the options:

$(document).on("change", "#mytbody select", function(){

   if($(this).val() == "Sim"){
      $(this).closest("tr").find("select").not(this).prop("disabled", true);
   }else{
      $(this).closest("tr").find("select").prop("disabled", false);
   }

});

If you re-select the "Buy" option (which has an empty value), the other options are enabled again.

I did not understand the function of the "No" option. Not only would the option "Yes" and what was not marked with "Yes" leave empty in the "Buy" option?

See:

$(document).on("change", "#mytbody select", function(){
   
   if($(this).val() == "Sim"){
      $(this).closest("tr").find("select").not(this).prop("disabled", true);
   }else{
      $(this).closest("tr").find("select").prop("disabled", false);
   }
   
});

   $("button").click(function() {
  $('#selectProduto').change(function(){
    $('#msg').html('');
  });

  var vIdProduto = $('#selectProduto option:selected').val();
  var vProduto = $('#selectProduto option:selected').text();
  var mensagem = $('#msg');
  var linha = '<tr class="selected" id="linha' + vIdProduto + '">' +
        '<td>' +
        '<input class="idprod" type="hidden" name="idproduto' + vIdProduto + '" value="' + vIdProduto + '">' + vProduto +
        '</td>' +
        '<td>' +
        '<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        '<td>' +
        '<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        '<td>' +
        '<select class="form-control">
          <option value="">Comprar</option>
          <option value="Sim">Sim</option>
          <option value="Não">Não</option>
        </select>'+
        '</td>' +
        ' </tr>'

  if($("tr#linha" + vIdProduto).length === 0) {
    $('#mytbody').append(linha);
  } else {
    $('#msg').html("<b class='text-danger'>&#9888; Produto " + vIdProduto + " já foi adicionado!</b>");
  }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class="col-md-10">
      <select class="form-control" id="selectProduto">
        <option value="A">Produto A</option>
        <option value="B">Produto B</option>
        <option value="C">Produto C</option>
      </select>
    </div>

    <div class="col-md-2">
      <button type="button" name="button">Adicionar</button>
    </div>

    <div class="col-md-12">
      <span id="msg"></span><br>
    </div>

    <div class="col-md-12">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Produto</th>
            <th>Forn01</th>
            <th>Forn02</th>
            <th>Forn03</th>
          </tr>
        </thead>
        <tbody id="mytbody">

        </tbody>
      </table>
    </div>
  </div>
</div>