Поле ввода становится обязательным, если другое поле не является нулевым - PullRequest
Новая
       9

Поле ввода становится обязательным, если другое поле не является нулевым

0 голосов
/ 07 ноября 2018

У меня есть форма с несколькими строками с парой полей ввода «Продукт» и «Количество». Я хочу, чтобы поле количества было обязательным, если поле продукта не равно нулю в той же строке. Я использовал функцию Jquery, которая показана ниже. Но это не работает должным образом. Надеюсь, кто-нибудь мне поможет. 

$('.productSelect').change(function () {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null ) {
    $('#quantity'+ numberPart).prop('required',true);
  }
});

   <form role="form" action="#" method="post" role="form" id="orderform">             

                            <tr>

                              <td><select class="form-control select2 productSelect" name="product1" style="width: 100%" id="product1">
                                <option disabled selected value> -- select a Product -- </option>
                                <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>

                              </select>
                            </td>
                            <td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>

                          </tr>

                          <tr>
                            <td><select class="form-control select2 productSelect" name="product2" style="width: 100%" id="product2">
                              <option disabled selected value> -- select a Product -- </option>
                              <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>
                            </select>
                          </td>
                          <td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>

                        </tr>

                        <tr>
                          <td><select class="form-control select2 productSelect" name="product3" style="width: 100%" id="product3">
                            <option disabled selected value> -- select a Product -- </option>
                            <option value="1"> Product 1 </option>
                                <option value="2"> Product 2 </option>
                                <option value="3"> Product 3 </option>
                          </select>
                        </td>
                        <td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>

                      </tr>

     <div class="col-md-6">
    <div class="box-header">
      <input class="btn btn-primary" name="sub" type="submit"  value="Submit"/>
    </div>
  </div>

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Вы разделяете идентификатор, но на вашем селекторе, вы не включаете его.

Правильный путь

$('#quantity' + numberPart[1]).prop('required', true);

$('.productSelect').change(function() {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null) {
    $('#quantity' + numberPart[1]).prop('required', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form role="form" action="<?php echo base_url(); ?>index.php/order/addOrder" method="post" role="form" id="orderform">

  <tr>

    <td>
      <select class="form-control select2 productSelect" name="product1" style="width: 100%" id="product1">
        <option disabled selected value> -- select a Product -- </option>
        <option value="1"> Product 1 </option>
        <option value="2"> Product 2 </option>
        <option value="3"> Product 3 </option>

      </select>
    </td>
    <td><input class="form-control error1" name="quantity1" id="quantity1" type="text" /></td>

  </tr>

  <tr>
    <td>
      <select class="form-control select2 productSelect" name="product2" style="width: 100%" id="product2">
        <option disabled selected value> -- select a Product -- </option>
        <option value="1"> Product 1 </option>
        <option value="2"> Product 2 </option>
        <option value="3"> Product 3 </option>
      </select>
    </td>
    <td><input class="form-control error1" name="quantity2" id="quantity2" type="text" /></td>

  </tr>

  <tr>
    <td>
      <select class="form-control select2 productSelect" name="product3" style="width: 100%" id="product3">
        <option disabled selected value> -- select a Product -- </option>
        <option value="1"> Product 1 </option>
        <option value="2"> Product 2 </option>
        <option value="3"> Product 3 </option>
      </select>
    </td>
    <td><input class="form-control error1" name="quantity3" id="quantity3" type="text" /></td>

  </tr>

  <div class="col-md-6">
    <div class="box-header">
      <input class="btn btn-primary" name="sub" type="submit" value="Submit" />
    </div>
  </div>
0 голосов
/ 07 ноября 2018

Split создает массив со значениями до и после параметра разделения.

Это означает, что numberpart - это массив, если вы зарегистрируетесь, он будет выглядеть так: 

(2) ["produc", "1"]

Следовательно, вы ищете значение "numberPart [1]" 

$('.productSelect').change(function () {

  var elementID = $(this).attr("id");
  var numberPart = elementID.split("t", 2);

  if ($(this).val() != null ) {
    $('#quantity'+ numberPart[1]).prop('required',true);
  }
});
...