在laravel中访问JavaScript变量

Question

我陷入了laravel项目的困境。我有一个票务页面，该页面显示数据库的车辆表中的巴士名称，巴士目的地，机票价格值。除此之外，还有一个用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

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

<?php

    if (isset($_POST['data'])) {
        require('search.php');
        $search = new search;
        $search->gettingvalues($_POST['data']);
        header('Content-Type: application/json; charset=utf-8');
        die();
    }
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input').keyup(function(){
            var value= $('input').val();
            $.ajax({
                type: "POST",
                url: "",
                data: {data: value},
                datatype: "json",
                success: function(json_data) {
                  var img = [];
                  var username = [];
                  var name = [];
                  $.each(json_data, function(index, element) {
                    img.push(element.img);
                    username.push(element.username);
                    name.push(element.name);
                  })
                  $('#feedback').html('');
                  $('#feedback').html(name+username+img);
                }
            });
        });
    });
</script>
<input type="text" name="search" placeholder="looking for?">
<div id="feedback"></div>

然后在 <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;