Javascript: How to overwrite a Laravel variable with JS variable

Things have not been working for me, and I don't see why.

Basically think Amazon checkout. I have a Blade file which when opened is filled with values from the DB of previous orders. The user can click a checkbox in the blade view and JS code will spontaneously delete that value from the page. The same JS then updates the total value. So you can do change quantities and delete orders to any of your other orders. So long as you are managing your order nothing is sent to the server and DB. Great. Now that you are done, I have a standard submit button which fires off an action to a route, and a controller to save the values in the page.

PROBLEM Xdebug shows me the incoming request values. However, the subtotal values have not been updated to show the changes. The request still shows the original values when the page was first opened. In other words the JS did not overwrite the initial values. When I check my JS code and product values in Chrome dev tools, the new updated values are there AND they have been applied to the correct HTML ID's! But when I hit submit they do not get collected, and sent with the POST and subsequently the incorrect values are saved to the DB

Blade Snippet Example: $quotation->services_total does not get updated by JS snippet below.

 <div class="row">
        <div class=" col-md-2  offset-md-8"><h5>Services:</h5></div>
         <div class=" col-md-2 mb-1 ">{{Form::text('services',(number_format($quotation->services_total,2)),['class'=>'form-control','id'=>'quote_services','readonly'=>'readonly', 'style'=>' text-align:right; '])  }}</div>
                    {{Form::hidden('services_hidden',$quotation->services_total,['id'=>'services_hidden'])  }}
         </div>

JS Snippet

if ((cost > 0) && (servicesTotal >= cost)) {
  serviceTotal = servicesTotal - cost;      
   $("#services_hidden").val(serviceTotal);    // NOTE Chrome dev tools - source, shows 'serviceTotal' is correct. 

    serviceTotalfixed = servicesTotal.toFixed(2); 
    $("#quote_services").val(serviceTotalfixed);
   }

Controller Function Snippet. -Abbreviated

 public function correctquote(Request $request)
    {
           $newQuotation['services_total'] = $request->get('services_hidden');  // Services_hidden is now the original value. Not the updated value. 
            $newQuotation['subtotal'] = $request->get('subtotal_hidden');
		    $newQuotation->save();
	}

LaryAI

2 years ago

Level 58

It seems like the issue you're facing is related to the form data not being updated with the JavaScript changes before the form is submitted. To ensure that the updated values are sent to the server, you need to make sure that the form inputs are correctly updated by your JavaScript code.

From your description, it looks like you're updating the value of a hidden input with the ID services_hidden and a text input with the ID quote_services. However, in your controller, you're trying to retrieve the value from services_hidden.

First, ensure that your JavaScript code is correctly updating the value of the hidden input. There's a typo in your JS snippet where you're assigning serviceTotal instead of servicesTotal. Here's the corrected JS snippet:

if ((cost > 0) && (servicesTotal >= cost)) {
  servicesTotal = servicesTotal - cost; // Corrected variable name
  $("#services_hidden").val(servicesTotal.toFixed(2)); // Update the hidden input with the fixed value

  var serviceTotalFixed = servicesTotal.toFixed(2); 
  $("#quote_services").val(serviceTotalFixed); // Update the text input
}

Next, ensure that the form containing these inputs is correctly submitted. If you're using AJAX to submit the form, make sure to serialize the form data or construct the data object with the updated values.

If you're submitting the form traditionally (without AJAX), the updated values should be sent as long as the inputs are within the <form> tags and have the name attribute set. For example:

<form method="post" action="/your-submit-route">
  <!-- Other form fields -->
  <input type="hidden" name="services_hidden" id="services_hidden" value="{{ $quotation->services_total }}">
  <!-- Make sure to include CSRF token for Laravel forms -->
  @csrf
  <!-- Submit button -->
  <button type="submit">Submit</button>
</form>

Finally, in your controller, you're correctly retrieving the value from the request with $request->get('services_hidden');. Just make sure that the form is being submitted with the updated values.

If you're still facing issues, check the following:

Ensure that the JavaScript code is executed before the form is submitted.
Verify that the form has the correct name attributes corresponding to the data you want to send.
Check that the form does not have any other inputs with the same name attribute that could be overriding the values.
If you're using AJAX, ensure that the data object includes the updated values and that the request is sent to the correct route.

By following these steps, you should be able to ensure that the updated JavaScript values are sent to the server when the form is submitted.

DhPandya

2 years ago

Level 12

@vincej Have you tried dd() your actual request response before assigning it to any of the variables? Are you getting the correct value for quote_services?

Snapey

2 years ago

Level 122

Hi vince.

Bear in mind that what you are updating has little to do with laravel. You are simply manipulating the form in Javascript and sending it to the server. Any issues with the data are purely javascript related.

Having said that, number #1 rule, "never trust user input". I would never trust subtotal or total from the user when it can be calculated server side.

1 like

vincej

2 years ago

Level 15

@Snapey HI Mark, Thanks for that. Understood. I have been struggling with this all of yesterday afternoon without success.

If i do all the recalculations server side, then surely that means every time a user adjusted the order there is a round trip to the server and a refresh, a very slow sequence no? I could perhaps remove the Laravel submit action and update the server through an inertia / ajax call instead, but again, only at the end of all the updates. BTW the total fields are set to read only. Bugger, I was hoping for a magic solution! :o)

Please or to participate in this conversation.