0

necesito su ayuda la situación es que al momento de ingresar datos en un "input" sea item_1 o item_2 necesito que en el otro ya no se pueda digitar(a menos que se vacié el otro).

Este es el código:

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center"></h3>
   <br />
   <h4 align="center">Enter Item </h4>
   <br />
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Enter Item_1</th>
       <th>Enter Item_2</th>

       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){
 
 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_1[]" class="form-control item_1" /></td>';
  html += '<td><input type="text" name="item_2[]" class="form-control item_2" /></td>';

  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });
 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_1').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 1 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 2 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
</script>

2 respuestas 2

1

Para ello deberías controlar en el evento keyup de cada input que cuando se escriba algo si el valor del input es diferente a vació se bloquee el otro input, una forma sería de la siguiente manera

$(document).ready(function(){
 
 $(document).on('click', '.add', function(){
  var html = '';
  var table = $('#item_table')[0];
  
  html += `<tr>`;
  html += `<td><input type="text" name="item_1[]" class="form-control item_1" /></td>`;
  html += `<td><input type="text" name="item_2[]" class="form-control item_2" /></td>`;

  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $(table).append(html);
 });
 
  $(document).on('keyup', '.item_1',function() {
    var tr = $(this).parents('tr')[0];
    var input2 = tr.getElementsByClassName('item_2');
    
    $(input2).removeAttr('disabled');
    if($(this).val()) {
      $(input2).attr('disabled','disabled');
    }
  });
  $(document).on('keyup', '.item_2',function() {
    var tr = $(this).parents('tr')[0];
    var input1 = tr.getElementsByClassName('item_1');
    
    $(input1).removeAttr('disabled');
    if($(this).val()) {
      $(input1).attr('disabled','disabled');
    }
  });
 
 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });
 
 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_1').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 1 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  $('.item_2').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item 2 at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });
 
});
<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center"></h3>
   <br />
   <h4 align="center">Enter Item </h4>
   <br />
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Enter Item_1</th>
       <th>Enter Item_2</th>

       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

Como puedes ver se ha intentado que sea de la manera más dinámica posible, obteniendo el tr "parents('tr')[0]" del input y buscando directamente el otro input para así efectuar el bloqueo.

1
  • 1
    funciona perfecto,muchas gracias
    – outsider
    Commented el 24 nov. 2018 a las 5:53
0

En el siguiente ejemplo, al introducir algún carácter en uno de los dos input el otro se desactiva. Al borrar los caracteres, ambos inputs vuelven a estar activos.


Solución Vainilla JS

A continuación un código para controlar que sólo se introduce contenido en uno de dos inputs.

<input type="text" id="input-1" onkeyup="useInput(this)" />
<input type="text" id="input-2" onkeyup="useInput(this)" />

<script type="text/javascript">

    function enableInput(input_id) {
        document.getElementById(input_id).disabled = false;
    }
    function disableInput(input_id) {
        document.getElementById(input_id).disabled = true;
    }
    function useInput(input_element) {
        var input_id    = input_element.id,
            input_value = input_element.value,
            other_input_id;

        if (input_id == 'input-1') {

            other_input_id = 'input-2';
            if (input_value !== '') {
                disableInput(other_input_id);
            } else {
                enableInput(other_input_id);
            }

            return; // use here to avoid nesting next block in an else
        }

        if (input_id == 'input-2') {

            other_input_id = 'input-1';
            if (input_value !== '') {
                disableInput(other_input_id);
            } else {
                enableInput(other_input_id);
            }

            return; // no neccesary here, but yes if we add more inputs
        }

    }
</script>


Limitaciones

El ejemplo controla los eventos de introducción / borrado de contenido mediante la pulsación de teclas. Si se introdujera o cortará el contenido en uno de los inputs sin usar el teclado (copia y pega mediante el uso de menús por ejemplo), el JS no se ejecutaría, siendo para el caso necesario ampliar el código para controlar otros eventos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.