I hope that someone could please help me out with an issue that I have been struggling with for quite some time now after doing a lot of research and implementing different codes and nothing seems to work.
I am using Livewire Multi Step Booking Form : https://www.positronx.io/laravel-livewire-wizard-form-tutorial-with-example/
In the first step, first 2 input fields are Pick Up Location and Drop Off Location. (Location Restricted to Italy only)
When I remove the Livewire Scripts, the Google Map Autocomplete with full address fills the input field with needed value, but then the form can't proceed to STEP 2.
When I add the Livewire scripts, then the form works, but Pick Up Location and Drop Off Location will clear the Autocomplete address and only submit what was typed before the auto suggest gave the full address.
I have added dd($validatedData); at the Wizard.php to see what happens when proceeding to STEP 2.
I would really appreciate any support or advice to fix the above mentioned issue.
Live Test URL : https://teqcube.com/stackoverflow
Download Views files with commented code (Trial and Error functions) : https://teqcube.com/stackoverflow/download/views.zip
COMPOSER.JSON
"php": "^7.2.5|^8.0",
"laravel/framework": "^7.29",
"livewire/livewire": "^2.0",
RESOURCES/VIEWS/LAYOUTS/GENERAL.BLADE.PHP
<body onload="initAutocomplete()">
RESOURCES/VIEWS/DEFAULT.BLADE.PHP
@section('header-scripts')
<script type="text/javascript">
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete1 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete1')), {
types: ['geocode']
});
autocomplete1.setComponentRestrictions(
{'country': ['it']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
// autocomplete.addListener('place_changed', fillInAddress);
autocomplete2 = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete2')), {
types: ['geocode']
});
autocomplete2.setComponentRestrictions(
{'country': ['it']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
// autocomplete2.addListener('place_changed', fillInAddress2);
}
</script>
@endsection
RESOURCES/VIEWS/LIVEWIRE/WIZARD.BLADE.PHP
<div class="row setup-content {{ $currentStep != 1 ? 'display-none' : '' }}" id="step-1">
<div class="col-md-12">
<h3> Step 1</h3>
<!-- https://stackoverflow.com/questions/20416058/adding-multiple-instances-of-google-places-on-same-page -->
<!-- PICKUP LOCATION -->
<div class="form-group col-md-6">
<label for="trip_pickup_location">Pick-up Destination</label>
<input type="text" wire:model="trip_pickup_location" class="controls autocomplete form-control-lg form-control" id="autocomplete1" autocomplete="off" placeholder="Pick-up Destination">
@error('trip_pickup_location') <span class="error">{{ $message }}</span> @enderror
</div>
<!-- DROPOFF LOCATION -->
<div class="form-group col-md-6">
<label for="trip_dropoff_location">Drop-off Destination</label>
<input type="text" wire:model="trip_dropoff_location" class="controls autocomplete form-control-lg form-control" id="autocomplete2" autocomplete="off" placeholder="Drop-off Destination">
@error('trip_dropoff_location') <span class="error">{{ $message }}</span> @enderror
</div>
<!-- PICKUP LOCATION -->
<!-- <div class="form-group col-md-6">
<label for="trip_pickup_location">Pick-up Destination</label>
<input type="text" wire:model="trip_pickup_location" onfocus="geolocate()" class="controls autocomplete form-control-lg form-control" id="autocomplete1" autocomplete="off" placeholder="Pick-up Destination">
@error('trip_pickup_location') <span class="error">{{ $message }}</span> @enderror
</div> -->
<!-- DROPOFF LOCATION -->
<!-- <div class="form-group col-md-6">
<label for="trip_dropoff_location">Drop-off Destination</label>
<input type="text" wire:model="trip_dropoff_location" onfocus="geolocate()" class="controls autocomplete form-control-lg form-control" id="autocomplete2" autocomplete="off" placeholder="Drop-off Destination">
@error('trip_dropoff_location') <span class="error">{{ $message }}</span> @enderror
</div> -->
<div class="form-group">
<label for="description">Pickup Date:</label>
<input type="text" wire:model="trip_pickup_date" class="form-control" id="trip_pickup_date" />
@error('trip_pickup_date') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Pick Up Time:</label>
<input type="text" wire:model="trip_pickup_time" class="form-control" id="trip_pickup_time" />
@error('trip_pickup_time') <span class="error">{{ $message }}</span> @enderror
</div>
<div class="form-group">
<label for="description">Pax Amount:</label>
<input type="text" wire:model="trip_pax_amount" class="form-control" id="trip_pax_amount" />
@error('trip_pax_amount') <span class="error">{{ $message }}</span> @enderror
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" wire:click="firstStepSubmit"
type="button">
Next
</button>
</div>
</div>
