I am trying to make a registration form where different options become available depending on the radio button selected. However when i try what i can find on the internet i get an error. For the HTML part i use:
<input type="radio" id="Swimmer" name="userType" value="swimmer" onclick="swimmerCheck()">
<label for="Swimmer">Swimmer</label><br>
<input type="radio" id="Coach" name="userType" value="coach">
<label for="Coach">Coach</label><br>
<input type="radio" id="Admin" name="userType" value="admin">
<label for="Admin">Admin</label><br>
<div id="fedNumber" style="display: none;">
<x-label for="federation_number" value="{{ __('Fed Numb') }}" />
<x-input id="federation_number" class="block mt-1 w-full" type="text" name="federation_number" :value="old('federation_number')" autofocus autocomplete="name" />
</div>
And at the bottom, for the script i use:
@push('script')
<script>
console.log('hello');
function swimmerCheck() {
if (document.getElementById('Swimmer').@checked(true)) {
console.log('Checked');
}
else console.log('Not checked');
}
</script>
@endpush
But when i press the button and look at my console, it gives an error regarding the onclick, saying it can’t read the properties.
I have made sure that the @Stack(‘script’) is also in the external style and the ‘Hello’ console log does work, so the script does really get through.
2
Answers
So apperently Larvel didn't like my code in my custom blade file but it did work when i put it in a script in the head of the original styling page. So no use of @Stack and @Push.
Add
@stack('script')
on your parent blade file.