为什么通过单击“添加产品”按钮我在第一个索引处收到的类别为空？

问题描述 投票：0回答：1

为什么通过单击“添加产品”按钮，我在第一个索引处收到的类别名称为空。 1.它从类别列的索引 2 开始文本。 2.当我首先从下拉列表中更改值时，它会在类别列中显示以前的值，然后通过单击“添加产品”按钮，它会给出选定的值。3。 3.我附上图片和代码，这样会更清楚。

索引 1 处没有类别名称：

首先更改 dropdwon 它给出以前的值：

@extends('layouts.home')
@section('content')

<style>
.btn-circle.btn-xl { 
            width: 100px; 
            height: 40px; 
            padding: 6px 0px; 
            border-radius: 20px; 
            font-size: 12px; 
            text-align: center; 
           margin-top:2%;
           margin-left:2%;
        } 
        .btn-circle.btn-sm { 
            width: 40px; 
            height: 40px; 
            padding: 6px 0px; 
            border-radius: 20px; 
            font-size: 10px; 
            text-align: center; 
        } 
  @media screen{

    
  }
  @media print {
    .btn{
      display:none;
      border:0px;
    }
    .form-control{
      border:0px;
    }
    .input-group-text{
      border:0px;
      background-color: white;
    }
   

  }
 
  .ml-0 {
  margin-left:60%  !important;
}
.mb-0 {
  margin-bottom:20%  !important;
  
}

    </style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
  
    <!-- Main content -->
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- jquery validation -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="text-center">Purchase Products</h4>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <div class="card-body">
              <form action="{{route('product.store')}}" method="post"  enctype="multipart/form-data">
              
              
                @csrf
                 <div class="row">
                
                  <div class="form-group col-md-4">
                     <label for="first_name"> Date</label>
            <input type="date" class="form-control" id="date" required="" name="date">
                  </div>
                
                  
                  <div class="form-group col-md-4">
                   <label for="email">Product Code No.</label>
            <input type="text" class="form-control" id="code" name="code" required>
                  </div>
                  <div class="form-group col-md-4">
                  <label for="last_name">Supplier</label>
                  <select class="form-control" id="supid"  name="supid" required>
    <option value="">Add Supplier</option>    
    @foreach($sup as $supid): 
    <option value="{{$supid->supplierid}}">{{$supid->name}}</option>
    @endforeach                 
    </select>
                  </div>
                  <div class="form-group col-md-4">
                  <label for="last_name">Catogory</label>
                  <select class="form-control" id="catid"   required>
                  <option value="0" disabled="true" selected="true">Select catagory</option>
          
    </select>
                  </div>
                  <div class="form-group col-md-4">
                  <label for="last_name">Product Name</label>
                  <select class="form-control" id="pid"  name="pid" required>
                  <option value="0" disabled="true" selected="true">Select product</option>
    </select>
    </div>
                  <div class="form-group col-md-3 mt-4">
                   
                  <button type="button" onclick="addrow(this)" id="find" class="btn btn-secondary btn-circle btn-xl"><i class="fas fa-plus-circle nav-icon"></i>Add Products</button> 
                  </div>
                  
                  </div>
                </div>

<body>
  <div class="container border ">
    <h1 class="text-center">INVOICE</h1>
    
    <div class="" >
      <table class="table table-bordered" id="myTable" id="table-2>tbody" >
        <thead class="table-dark">
          <tr>
            <th scope="col" >#SR</th>
            <th scope="col">CATAGORY</th>
            <th scope="col">PRODUCT NAME</th>
            <th scope="col">PCS/PKTS</th>
            <th scope="col">UNIT PRICE</th>
            <th scope="col" class="">TOTAL PRICE</th>
            <th scope="col"> Action</th>
          </tr>
        </thead>
        
        <tbody id="imi">
          <tr id="add" class="d-none" class="tabRow" id="imgbox" name="imisix">
            <td class="serialNo"  id="serialNo"></td>
            
            <td id="show_cat" name="show_cat"></td>
            <td></td>
            <td><input type="text" class="form-control" placeholder="total" name="total" ></td>
            <td><input type="text" class="form-control" placeholder="discount" name="discount" onkeyup="discount(this)"
                onblur="calcSum()"></td>
            <td><input type="text" class="form-control" placeholder="discount" name="disc"  id="abcd"
                class="txtCal"></td>
            <td><button type="button" class="btn btn-danger btn-circle btn-sm" class="NoPint" onclick="delrow(this)">delete row</button></td>
          </tr>
          
        </tbody>
       
      </table>
      
    </div>
    <form>
  <div class="">
      <div class="row" class="">
        <div class="ml-0" style="">
        <label class="sr-only" for="inlineFormInputGroupUsername2"></label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">Total</div>
          </div>
          <input type="text" class="form-control" name="total_amount" disabled id="total_amount" placeholder="Username">

        </div>
      </div>
</div>
<div class="row" class="">
  <div class="ml-0" style="">
        <label class="sr-only" for="inlineFormInputGroupUsername2"></label>
        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">GST</div>
          </div>
          <input type="text" class="form-control" name="GSTimi" onblur="calcGST()" id="GST_amount"
            placeholder="Username">

        </div>
      </div>
</div>
<div class="row" >
      <div class="ml-0" style="">
        <label class="sr-only" for="inlineFormInputGroupUsername2"></label>

        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
            <div class="input-group-text">Total With GST</div>
          </div>
          <input type="text" class="form-control" name="GST_amount" disabled onblur="totalGST()" id="total_GST"
            placeholder="Username">

        </div>
    </div>
    
    </div>
    
    
    </div>
   
  </form>
</div>
</body>

                <!-- /.card-body -->
               
                <div class="form-group">
                  <button type="submit" class="btn btn-primary ">Submit</button>
                </div>
                 
              </form>
             </div>
              
            </div>
            <!-- /.card -->
            </div>
          <!--/.col (left) -->
          <!-- right column -->
          
          <!--/.col (right) -->
        </div>
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    
    <!-- /.content -->
  </div>


  
  <script>
    $(document).on('change','#supid',function(){
        var _token = $('input[name="_token"]').val();
    
    var suplierId = $('#supid').val();
    //alert(productId)
   // console.log(productId); 
  var op=" ";
    $.ajax({
        method:'GET',
        data:{'suplierId':suplierId,_token:_token},
        url:"{{ route('get.catagory') }}",
    success:function(data){
        op+='<option value="" selected   disabled>select catagory</option>';
                    for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].catagoriesid+'">'+data[i].name+'</option>';

          
          }
          $('#catid').html(" ");
                   $('#catid').append(op);
       console.log(data);
    }
        })
    
});
$(document).on('change','#catid',function(){
        var _token = $('input[name="_token"]').val();
    
    var catidId = $('#catid').val();
  //  alert(catidId)
   // console.log(productId); 
  var op=" ";
    $.ajax({
        method:'GET',
        data:{'catidId':catidId,_token:_token},
        url:"{{ route('get.productname') }}",
    success:function(data){
        op+='<option value="0" selected name="catid" disabled>select product</option>';
                    for(var i=0;i<data.length;i++){
                    op+='<option value="'+data[i].productsid+'">'+data[i].product_name+'</option>';      
          }
          $('#pid').html(" ");
                   $('#pid').append(op);
     //  alert(data);
    }
        })
    
});
 // document.getElementById("imi").children[0].style.background="red";;
  // var childdd= document.getElementById("imi").children;
  // console.log(childdd);
  function getPrice(imi) {
     // alert('s');
     let u = $(imi).parent().parent().index();
     alert(u);
     // document.getElementById("imgbox2").style.visibility = "visible";
     let x = document.getElementsByName("price")[u].value;
     //let x= $("#price").val();
     // alert(x);
     let y = document.getElementsByName("quantity")[u].value;

     let z = x * y;
     document.getElementsByName("total")[u].value = z;
     //let u=imi.value;
     //let b=z-10;
     //alert(z)
     //document.getElementById("disc").value=b; 
     //z= discount=(x*y)/100-x;

   }
   function discount(imi) {
     let e = $(imi).parent().parent().index();
   alert(e)
     z = document.getElementsByName("total")[e].value;
     //let z=x*y;
     //alert(z);
     let u = document.getElementsByName("discount")[e].value;
     let b = z - z * (u / 100);
     //alert(b)
     document.getElementsByName("disc")[e].value = b;
     //alert(z)
   }
   
     function addrow(imi) {
       var v = $("#add").clone().appendTo("#imi");

       $(v).find("input").val('');
       $(v).removeClass("d-none");

       let shx =  $("#catid option:selected").text();
document.getElementById("show_cat").innerHTML=shx;
        function addSerialNumber() {

$(' table tbody tr').each(function(index) {
// alert(index)
   $(this).find('td:nth-child(1)').html(index);
});
};

addSerialNumber();

       
     
// alert(index)

 // $(this).find('td:nth-child(2)').html(res);
 


 
// function showcat(imi) {
//       //  let e = $(this).index();
//        // alert(e)
//      //  let shx= document.getElementById("catid").innerHTML;
//        let shx=  $("#catid option:selected").text();
//       console.log(shx)
//       document.getElementById("show_cat").innerHTML=shx;
//     //  show_cat
// }
// showcat();

      
     }
     
   
    

   // var display=d.options[d.selectedIndex(1)].text;
     
      
    // // Let's test it out
    // alert(shx);





     function delrow(v) {
       //alert(v)
       var f = $(v).parent().parent().remove();
//alert(f)
       var calculated_total_sum = 0;
       // alert( calculated_total_sum)
       $('input[name="disc"]').each(function () {
         var get_textbox_value = $(this).val();
         // alert( get_textbox_value)
         if ($.isNumeric(get_textbox_value)) {
           calculated_total_sum += parseFloat(get_textbox_value);
          // alert(calculated_total_sum)
         }
       });
       document.getElementById("total_amount").value = (calculated_total_sum);

     }
     function calcSum() {
       var calculated_total_sum = 0;

       $('input[name="disc"]').each(function () {
         var get_textbox_value = $(this).val();
         //alert( get_textbox_value)
         if ($.isNumeric(get_textbox_value)) {
           calculated_total_sum += parseFloat(get_textbox_value);
           //alert(calculated_total_sum)
         }
       });
       document.getElementById("total_amount").value = calculated_total_sum;
     }

     function calcGST() {
       GST = parseFloat(document.getElementById("GST_amount").value);
       // alert(GST)
       previoussum = parseFloat(document.getElementById("total_amount").value);
       //alert(previoussum)
       TOTAL = previoussum * (GST / 100);
       totalwithgst = TOTAL + previoussum
       document.getElementById("total_GST").value = totalwithgst;

     }

     function myFunction()
{
window.print();
}
    $(document).ready(function(){
      
        $('#btnnn').prop("disabled", true);
        $('#GST_amount').keyup(function(){
        //  alert('hh')
           if($(this).val()!=''){
            $('#btnnn').prop("disabled", false);
           }
        });
    });

//var f= $(v).parent().parent().remove()
//discountamount(;
 @if(Session::has('message'))
     swal({
  title: "Good job!",
  text: "Data Entered  Successfully!",
  icon: "success",
});
  @endif
</script>
@endsection

我尝试使用 .each 循环来解决问题，但问题仍然存在。我不希望我的第一个类别列为空，并且通过收费类别它会给出正确的文本。

javascript php jquery ajax laravel
1个回答
0
投票

问题已通过添加下面的代码解决了

let cat_selected =  $("#catid option:selected").text();
      // alert(cat_selected)
       let pid_selected =  $("#pid option:selected").text();
       $(v).find('td:nth-child(2)').html(cat_selected);
       $(v).find('td:nth-child(3)').html(pid_selected);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.