matthewinSpire's avatar

Button click not submitting form

I have created a checkout form for an e-commerce project I am working on.

Clicking on the "Place Order" button should trigger a set of actions, including processing the payment and adding the order, with associated information, to the database. At the moment, clicking on the "Place Order" button does absolutely nothing. I can't seem to figure out the reason as the code is similar to that which I have employed previously and which still works fine.

Here are the applicable portions of code:

Routes:

Route::post('/checkoutStore', 'CheckoutController@store');

Route::get('guestCheckout', 'CheckoutController@index') -> name('guestCheckout.index');

Route::get('/braintree/token', 'BraintreeController@token');

Route::get('thankyou', 'ConfirmationController@index') -> name('confirmation.index');

Controllers:

CheckoutController.php:

public function store(CheckoutRequest $request)
{
    $nonce = $request->payment_method_nonce;

    if ($nonce === null) {
        return back();
    }

    $result = Braintree_Transaction::sale([
        'amount' => getNumbers()->get('newTotal') / 100,
        'paymentMethodNonce' => $nonce,
        'options' => [
            'submitForSettlement' => true
        ]
    ]);

    if ($result->success === false) {
        return back()->withError('Something went wrong while processing your payment.');
    } else {
        $order = $this->addToOrdersTables($request, null);
        
        // Send an email to the customer, Chris, and Matt

        Cart::instance('default')->destroy();
        session()->forget('coupon');

        return redirect()->route('confirmation.index')->with('success_message', 'Thank you! Your payment has been successfully accepted!');
    }
}

Confirmation Controller:

public function index()
{
    if(! session()->has('success_message')) {
        return redirect('/');
    }

    return view('confirmation/thankyou');
}

View:

checkout.blade.php:

<form action="checkoutStore" class="form" id="checkout-payment" method="post">
              {{ csrf_field() }}
              <!-- Billing Address -->
              <div class="block-header mb-5">
                <h6>Billing Address</h6>
              </div>

              <div class="row">
                <div class="form-group col-md-6">
                  <label for="firstName" class="form-label">First Name</label>
                  <input id="firstName" type="text" name="firstName" placeholder="First Name" class="form-control">
                </div>

                <div class="form-group col-md-6">
                  <label for="lastName" class="form-label">Last Name</label>
                  <input id="lastName" type="text" name="lastName" placeholder="Last Name" class="form-control">
                </div>

                <div class="form-group col-md-6">
                  <label for="email" class="form-label">Email Address</label>
                  <input id="email" type="email" name="email" placeholder="Email" class="form-control">
                </div>

                <div class="form-group col-md-6">
                  <label for="address" class="form-label">Street Address</label>
                  <input id="address" type="text" name="address" placeholder="Street Address" class="form-control">
                </div>

                <div class="form-group col-md-3">
                  <label for="city" class="form-label">City</label>
                  <input id="city" type="text" name="city" placeholder="City" class="form-control">
                </div>

                <div class="form-group col-md-3">
                  <label for="zip" class="form-label">ZIP</label>
                  <input id="zip" type="text" name="zip" placeholder="ZIP Code" class="form-control">
                </div>

                <div class="form-group col-md-3">
                  <label for="state" class="form-label">State</label>
                  <input id="state" type="text" name="state" placeholder="State" class="form-control">
                </div>

                <div class="form-group col-md-3">
                  <label for="country" class="form-label">Country</label>
                  <input id="country" type="text" name="country" placeholder="Country" class="form-control">
                </div>

                <div class="form-group col-md-6">
                  <label for="phoneNumber" class="form-label">Phone Number</label>
                  <input id="phoneNumber" type="tel" name="phoneNumber" placeholder="Phone Number" class="form-control">
                </div>

                <div class="form-group col-md-6">
                </div>

                <div class="form-group col-12 mt-3 ml-3">
                  <input id="anotherAddress" type="checkbox" class="checkbox-template">
                  <label for="anotherAddress" data-toggle="collapse" data-target="#shippingAddress" aria-expanded="false" aria-controls="shippingAddress">Ship to a different address?</label>
                </div>
              </div>
              <!-- /Billing Address -->

              <!-- Shipping Address -->
              <div id="shippingAddress" aria-expanded="false" class="collapse">
                <div class="block-header mb-5 mt-3">
                  <h6>Shipping Address</h6>
                </div>

                <div class="row">
                  <div class="form-group col-md-6">
                    <label for="shippingFirstName" class="form-label">First Name</label>
                    <input id="shippingFirstName" type="text" name="shippingFirstName" placeholder="First Name" class="form-control">
                  </div>

                  <div class="form-group col-md-6">
                    <label for="shippingLastName" class="form-label">Last Name</label>
                    <input id="shippingLastName" type="text" name="shippingLastName" placeholder="Last Name" class="form-control">
                  </div>

                  <div class="form-group col-md-6">
                    <label for="shippingEmail" class="form-label">Email Address</label>
                    <input id="shippingEmail" type="email" name="shippingEmail" placeholder="Email" class="form-control">
                  </div>

                  <div class="form-group col-md-6">
                    <label for="shippingAddress" class="form-label">Street Address</label>
                    <input id="shippingAddress" type="text" name="shippingAddress" placeholder="Street Address" class="form-control">
                  </div>

                  <div class="form-group col-md-3">
                    <label for="shippingCity" class="form-label">City</label>
                    <input id="shippingCity" type="text" name="shippingCity" placeholder="City" class="form-control">
                  </div>

                  <div class="form-group col-md-3">
                    <label for="shippingZip" class="form-label">ZIP</label>
                    <input id="shippingZip" type="text" name="shippingZip" placeholder="ZIP" class="form-control">
                  </div>

                  <div class="form-group col-md-3">
                    <label for="shippingState" class="form-label">State</label>
                    <input id="shippingState" type="text" name="shippingState" placeholder="State" class="form-control">
                  </div>

                  <div class="form-group col-md-3">
                    <label for="shippingCountry" class="form-label">Country</label>
                    <input id="shippingCountry" type="text" name="shippingCountry" placeholder="Country" class="form-control">
                  </div>

                  <div class="form-group col-md-6">
                    <label for="shippingPhoneNumber" class="form-label">Phone Number</label>
                    <input id="shippingPhoneNumber" type="tel" name="shippingPhoneNumber" placeholder="Phone Number" class="form-control">
                  </div>

                  <div class="form-group col-md-6">
                  </div>
                </div>
              </div>
              <!-- /Shipping Address -->

              <div class="tab-content">
                <div id="paymentMethod" class="tab-block">
                  <div id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="card">
                      <div id="headingOne" role="tab" class="card-header">
                        <h6>
                          Payment
                        </h6>
                      </div>

                      <div class="card-body">
                        <form>
                          <div id="payment"></div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="CTAs d-flex justify-content-between flex-column flex-lg-row"><a href="/cart" class="btn btn-template-outlined wide prev"> <i class="fa fa-angle-left"></i>Back to Cart</a><button type="submit" class="btn btn-template wide next">Place Order<i class="fa fa-angle-right"></i></div>
            </form>

JavaScript associated with the view:

<script>
  $.ajax({
    url: '{{ url('braintree/token') }}'
  }).done(function (response) {
    braintree.setup(response.data.token, 'dropin', {
      container: 'payment',
      form: 'checkout-payment'
    });
  });
</script>

Any help/suggestions are appreciated!

0 likes
5 replies
Cronix's avatar

First, make your form's action /checkoutStore with a slash to make absolute url

Second, is that all of your complete javascript for the page? When is it the ajax supposed to fire? When the form is submitted, or when the page loads, or ?

matthewinSpire's avatar

@Cronix first suggestion done.

Second suggestion, that is currently the complete JavaScript for the page. That ajax is meant to fire when the page loads as it is responsible for loading the Braintree Drop-in UI. The

<form>
  <div id="payment"></div>
</form>

is tied to the parent form, with id of checkout-payment.

@jlrdw I don't have one, but you saying that makes me think I should. The reason I don't is that there is another form (different part of the same project) which is setup similarly and does not have a click event, so I didn't see why it would be necessary here.

Cronix's avatar

Ok, try wrapping it in the domready event.

<script>
$(function() {
    // your ajax code
});
</script>

I suspect it's hitting this

$nonce = $request->payment_method_nonce;

    if ($nonce === null) {
        return back();
    }

And $request->payment_method_nonce is being set via the braintree ajax call? I don't see that nonce field in the form.

matthewinSpire's avatar
matthewinSpire
OP
7 years ago
Best Answer
Level 1

The issue was that the Drop-in UI was wrapped in form tags and because the action was associated with an outer form (for lack of a better term), the action wasn't triggered because it didn't think the Drop-in UI information (credit card #, expiration, etc.) was filled in. The following change:

<div class="card-body">
   <form>
     <div id="payment"></div>
   </form>
 </div>

to

<div class="card-body">
   <div id="payment"></div>
</div>

seems to have solved this particular issue. Now there is another issue that I'm encountering, which is: SQLSTATE[HY000]: General error: 1364 Field 'billing_first_name' doesn't have a default value (SQL: insert into orders...

Troubleshooting on that is currently ongoing.

Please or to participate in this conversation.