andrewJay's avatar

Can't get the hidden input value with laravel

Hey I want to get the value of this input and store it in a variable but it gives me null

  <input type="hidden" name="getPrice" value="{{$products->price}}">

 public function payment_process(Request $request){
    

        dd($request->input('getPrice'));


...

In HTML page $products->price seems right but when I want to store it somewhere it shows me that is a null value.

0 likes
4 replies
rodrigo.pedra's avatar

Weird, from what you describe it should work

Is your <input> inside the same <form> tag in your blade template? If you can please post more of your template file.

Try dd($request->all()) in your controller to check if all fields you expect are being sent.

andrewJay's avatar

That input is outside of a tag

@extends('layouts/app')
@section('content')

<style>
  .thumbnail{
   width:250px;
   height:360px;
}
  </style>
    <div class="container">
        
      <div class="pull-right">

          <div class="py-5 text-center">
                <div class="thumbnail">
            <img src="/storage/images/{{$products->image}}" style="max-height: 220px;" class="d-block mx-auto mb-4">
            <h3>{{$products->title}}</h3>
            <h4>Total Price : ${{$products->price}}</h4> 
            <input type="hidden" name="getPrice" value="{{$products->price}}">
            

        </div>
    </div>
    <div id="charge-error" class="alert alert-danger {{!Session::has('error') ? 'hidden' : ''}}">
    {{Session::get('error')}}
    </div>
      </div>
     

        <div class="col-md-8 order-md-1">
          <h4 class="mb-3">Billing address</h4>
        <form class="needs-validation" accept-charset="UTF-8"  data-stripe-publishable-key="test_public_key" method="post" action="{{action('PagesController@payment_process')}}" id="checkout-form">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">First name</label>
                <input type="text" class="form-control" name="firstName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">Last name</label>
                <input type="text" class="form-control" name="lastName" placeholder="" value="" required>
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>
            </div>


            <div class="mb-3">
              <label for="email">Email <span class="text-muted">(Optional)</span></label>
              <input type="email" class="form-control" name="email" placeholder="[email protected]">
              <div class="invalid-feedback">
                Please enter a valid email address for shipping updates.
              </div>
            </div>

            <div class="mb-3">
              <label for="address">Address</label>
              <input type="text" class="form-control" name="address" placeholder="1234 Main St" required>
              <div class="invalid-feedback">
                Please enter your shipping address.
              </div>
            </div>

            <div class="mb-3">
              <label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
              <input type="text" class="form-control" name="address2" placeholder="Apartment or suite">
            </div>

            <div class="mb-3">
                    <label for="country">Country</label>
                    <input type="text" class="form-control" name="country" placeholder="Your Country">
                  </div>

                  <div class="mb-3">
                        <label for="State">State</label>
                        <input type="text" class="form-control" name="state" placeholder="Your State">
                      </div>

                      <div class="mb-3">
                            <label for="zip-code">ZIP POSTAL CODE</label>
                            <input type="text" class="form-control" name="zip" placeholder="Your Postal Code">
                          </div>
 

            <hr class="mb-4">

            <h4 class="mb-3">Payment</h4>

            <div class="d-block my-3">
              <div class="custom-control custom-radio">
                <input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
                <label class="custom-control-label" for="credit">Credit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
                <label class="custom-control-label" for="debit">Debit card</label>
              </div>
              <div class="custom-control custom-radio">
                <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
                <label class="custom-control-label" for="paypal">Paypal</label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="cc-name">Name on card</label>
                <input type="text" class="form-control" id="card-name" placeholder="" required>
                <small class="text-muted">Full name as displayed on card</small>
                <div class="invalid-feedback">
                  Name on card is required
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="cc-number">Credit card number</label>
                <input type="text" class="form-control" id="card-number" placeholder="" required>
                <div class="invalid-feedback">
                  Credit card number is required
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-3 mb-3">
                <label for="cc-expiration">Expiration Month</label>
                <input type="text" class="form-control" id="card-expiry-month" placeholder="month" required>
                <div class="invalid-feedback">
                  Expiration month date required
                </div>
              </div>
              <div class="col-md-3 mb-3">
                    <label for="cc-expiration">Expiration Year</label>
                    <input type="text" class="form-control" id="card-expiry-year" placeholder="year" required>
                    <div class="invalid-feedback">
                      Expiration year date required
                    </div>
                  </div>
              <div class="col-md-3 mb-3">
                <label for="cc-expiration">CVV</label>
                <input type="text" class="form-control" id="card-cvc" placeholder="" required>
                <div class="invalid-feedback">
                  Security code required
                </div>
              </div>
            </div>
            <hr class="mb-4">
        <button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout ${{$products->price}}</button>
      @csrf
    </form>
        </div>
      </div>

      <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2017-2018 Company Name</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="#">Privacy</a></li>
          <li class="list-inline-item"><a href="#">Terms</a></li>
          <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
      </footer>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../assets/js/vendor/popper.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <script src="../../assets/js/vendor/holder.min.js"></script>
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (function() {
        'use strict';

        window.addEventListener('load', function() {
          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          var forms = document.getElementsByClassName('needs-validation');

          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
    </script>


    <br />
@endsection

@section('scripts')
    <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript" src="{{URL::to('js/checkout.js')}}"></script>
@endsection
rodrigo.pedra's avatar

So move it inside the <form> tag otherwise it won't be sent with the form data on submission.

This is a HTML thing not a Laravel related thing.

Consider you have two forms on the same page, how should the browser know which field belongs to which form?

EDIT

Also, as it is hidden field already there won't be any visual changes.

shez1983's avatar

@shockwave619 just do as is suggested - you can duplicate things one to show user and one to send it via the form.

also on the side note - you probably dont want to be sending a hidden value for price in any case - its a massive risk because people can change the value.. instead you already have the products stored in session somewhere? so u can re-calculate the price in the B/E

Please or to participate in this conversation.