javascript - 在 Laravel 中访问 JavaScript 变量

Question

我陷入了 laravel 项目的一个问题。我有一个票务页面，显示数据库车辆表中的巴士名称、巴士目的地、票值(value)。除此之外，还有一个用 JavaScript 制作的订票模板，用于计算数量和座位，并给出计数值和所选座位以及该页面。我想要做的是从 JavaScript 变量中获取这两个值，并将它们传递到订单表的数据库，就像显示的车辆表的其他值一样。我希望 var str 和 var rTotal 的值与使用 screen shot of front end 形式的隐藏字段发送的其他变量一起发送到数据库中

@extends ('layouts.app')
@section('content')
 <div id="all">
      <div id="content">
        <div class="container">
          <div class="row bar">
            <div class="col-lg-9">
              <div id="productMain" class="row">
                <div class="col-md-9 col-sm-6">
                   <div class="plane">
  <div class="cockpit">
    <h1>Please select a seat</h1>
  </div>
  <div class="exit exit--front fuselage">   
  </div>
   <form id="frmCareer" method="get" action="prjFormEvent.js">
    <strong><label id="lblRealistic">"R" Section</label></strong>   
<div id="realisticTotal"></div>
<a href="#" onclick="getValue();return false;">Get Value</a>
  <ol class="cabin fuselage">
    <li class="row row--1">
      <ol class="seats" type="A">
        <li class="seat">
          <input type="checkbox" name="chkRealistic" onclick="getRealistic()" class="checks" value="1A" id="1A" />
          <label for="1A">1A</label>
        </li>
        <li class="seat">
          <input type="checkbox" name="chkRealistic" onclick="getRealistic()" class="checks" value="1B" id="1B" />
          <label for="1B">1B</label>
        </li>
        <li class="seat">
          <input type="checkbox" name="chkRealistic" onclick="getRealistic()" class="checks" value="1C" id="1C" />
          <label for="1C">1C</label>
        </li>
        <li class="seat">
          <input type="checkbox"name="chkRealistic" onclick="getRealistic()" class="checks" value="1D" disabled id="1D" />
          <label for="1D">Occupied</label>
        </li>
        <li class="seat">
          <input type="checkbox" name="chkRealistic" onclick="getRealistic()" class="checks" value="1E" id="1E" />
          <label for="1E">1E</label>
        </li>
        <li class="seat">
          <input type="checkbox" name="chkRealistic" onclick="getRealistic()" class="checks" value="1F" id="1F" />
          <label for="1F">1F</label>
        </li>
      </ol>
    </li>
  </ol>
  <div class="exit exit--back fuselage">

  </div>
</div>
        <script>
            function getValue() {

                var checks = document.getElementsByClassName('checks');
                var str = '';

                for ( i = 0; i < 6; i++) {

                    if ( checks[i].checked === true ) {
                        str += checks[i].value + " ";
                    }

                }
                document.getElementById("lblRealfisti").innerHTML = str

            }
var getCareer = new Array();
getCareer["1A"] = 1;
getCareer["1B"] = 1;
getCareer["1C"] = 1;
getCareer["1D"] = 1;
getCareer["1E"] = 1;
getCareer["1F"] = 1;

function getRealistic()
{
    var rTotal = 0;

    var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];

    for (var sel = 0; sel < selectedRealistic.length; sel++)
    {
      if (selectedRealistic[sel].checked)    
          rTotal += getCareer[selectedRealistic[sel].value]        
    }      
    document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
}
        </script>
     </div>
                <div class="col-md-3 col-sm-6">
                  <div class="box">
                                          <div class="sizes">
                                            <form>
                                                  <h3>{{$product->name}}</h3>
                        <h3>{{$product->departure}}</h3>
                        <h3>{{$product->destination}}</h3>
                        <h3>{{$product->date_arrival}}</h3>
                        <h3>{{$product->price}}</h3>
                        <h3>{{$product->description}}</h3>
                        <strong><label id="lblRealisti"></label></strong>                     
                      </div>
                      <p class="price">{{$product->price}}</p>
                      <p class="text-center">
                        <form action="{{route('cart.store')}}" method="post">
                              {{ csrf_field() }}                    
                          <input type="hidden" name="id" value="{{$product->id}}">
                          <input type="hidden" name="name" value="{{$product->name}}">
                          <input type="hidden" name="price" value="{{$product->price}}">
                          <input type="hidden" name="price" value="{{$product->seats}}">                     
                  <button type="submit">click me</button>
                       </form>
                      </p>

                  </div>
                  <div data-slider-id="1" class="owl-thumbs">
                    <button class="owl-thumb-item"><img src="img/detailsquare.jpg" alt="" class="img-fluid"></button>
                    <button class="owl-thumb-item"><img src="img/detailsquare2.jpg" alt="" class="img-fluid"></button>
                    <button class="owl-thumb-item"><img src="img/detailsquare3.jpg" alt="" class="img-fluid"></button>
                  </div>
                </div>
              </div>  
              <div id="product-social" class="box social text-center mb-5 mt-5">
                <h4 class="heading-light">Show it to your friends</h4>
                <ul class="social list-inline">
                  <li class="list-inline-item"><a href="#" data-animate-hover="pulse" class="external facebook"><i class="fa fa-facebook"></i></a></li>
                  <li class="list-inline-item"><a href="#" data-animate-hover="pulse" class="external gplus"><i class="fa fa-google-plus"></i></a></li>
                  <li class="list-inline-item"><a href="#" data-animate-hover="pulse" class="external twitter"><i class="fa fa-twitter"></i></a></li>
                  <li class="list-inline-item"><a href="#" data-animate-hover="pulse" class="email"><i class="fa fa-envelope"></i></a></li>
                </ul>
              </div>           
             <div class="container">
      <div class="container hotelbook-section">
      <div class="section-padding"></div>
        <div class="section-header">
          <h3>Book your seat</h3>
          <span>We're gonna dreams come true</span>
        </div>
            <div class="row text-center">
 @foreach($mightAlsoLike as $product)
    <div class="col-lg-3 col-md-6 mb-4">
          <div class="card">
            <img class="card-img-top" src="/img/projects/new/bus1.jpeg" alt="">
            <div class="card-body">
              <h4 class="card-title"><img src="/img/line-chart.png" alt="">&nbsp; {{ $product->departure }}</h4>
              <h4 class="card-title"><img src="/img/line-chart.png" alt="">&nbsp;{{ $product->destination }}</h4>
              <h4 class="card-title"><img src="/img/line-chart.png" alt="">&nbsp;{{ $product->date_arrival}}</h4>
              <p class="card-text"><img src="/img/coins.png" alt="">RS&nbsp;{{ $product->price }}</p>
            </div>
            <div class="card-footer">
              <a href="#" class="btn btn-primary">Book Me</a>
            </div>
          </div>
        </div>

 @endforeach 
</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    @endsection

Answer 1

将两个隐藏字段添加到您的表单中:

 <input type="hidden" id="str" name="str" value=""> 
 <input type="hidden" id="rTotal" name="rTotal" value=""> 

然后在 getValue 和 getRealistic 函数中设置字段的值:

document.getElementById('str').value = str;
document.getElementById('rTotal').value = rTotal;

所以你最终会得到这样的函数:

function getValue() {
  var checks = document.getElementsByClassName('checks');
  var str = '';
  for ( i = 0; i < 6; i++) {
    if ( checks[i].checked === true ) {
       str += checks[i].value + " ";
    }
  }
  document.getElementById("lblRealfisti").innerHTML = str
  document.getElementById('str').value = str;
}


function getRealistic() {
  var rTotal = 0;
  var selectedRealistic = document.forms["frmCareer"]["chkRealistic"];
  for (var sel = 0; sel < selectedRealistic.length; sel++) {
    if (selectedRealistic[sel].checked)    
      rTotal += getCareer[selectedRealistic[sel].value]        
    }      
  }
  document.getElementById("lblRealistic").innerHTML = rTotal+ "/9 Checked"
  document.getElementById('rTotal').value = rTotal;
}