Can someone help how to display a specific form if a checkbox is checked (all this happen without submitting the form beforehand) in laravel?

Issue

So, here is how it works so far

@extends('layouts.main') 

@section('title', __('landingPage.create'))

@section('additional_css')
<link href="{{ asset('vendors/select2/css/select2.min.css') }}" rel="stylesheet">
@endsection

@section('script')'
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).prop("checked") == true){
                    alert("you checked checkbox.");
                }else if($(this).prop("checked") == false){
                    alert("you unchecked checkbox.");
                }
            });
        });
    </script>
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{ __('landingPage.tagline') }}</h3>  
                    </div>
                    
                    <!-- Header Card -->
                    <div class="card-body">
                        <div>
                            <form action="{{ route('landingPage.store') }}" enctype="multipart/form-data" method="post">
                                @csrf
                                <div class="form-group">
                                    <label>{{ __('landingPage.title') }}</label>
                                    <input type="text" name="title" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.shortDesc') }}</label>
                                    <input type="text" name="short_description" class="form-control" required>
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.images') }}:</label>
                                    <input type="file" name="image" class="form-control" required> 
                                </div>
                                <div class="form-group">
                                    <input type="checkbox" name="is_have_button" class="switch-input" value="1"/>
                                    <label>{{ __('landingPage.haveButton') }}</label>
                                </div>

                                <div class="form-group">
                                    <label>{{ __('landingPage.buttonTag') }}</label>
                                    <input type="text" name="button_attribute[tag]" class="form-control" value="{{ old('button_attribute[tag]') }}">
                                </div>
                                <div class="form-group">
                                    <label>{{ __('landingPage.buttonLink') }}</label>
                                    <input type="text" name="button_attribute[href]" class="form-control" value="{{ old('button_attribute[href]') }}">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-primary mr-3" style='float:left;'>{{ __('landingPage.store') }}</button>
                                </div>
                               
                            </form>

                            <div>
                                <a href="{{ route('landingPage.slider') }}"><button class="btn btn-danger mb-4" style='float:left;'>{{ __('landingPage.cancel') }}</button></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

So in that code, I wanted that the form text for button_attribute can only be displayed or at least can only be filled if the checkbox is checked (This should happen without pressing the submit button). My first idea is to change if the function of the script from displaying an alert to displaying the form, but it still always gives me an error.

Solution

In your Question you are asking for specific form but in your HTML code there is only one form and there is only on check box, if multiple form than there must be separate checkbox for each form. It is not clear what actually you want.

However, to hide form use following code:

@section('script')'
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).prop("checked") == true){
                         $("form").show();
                    alert("you checked checkbox.");
                }else if($(this).prop("checked") == false){
                          $("form").hide();
                    alert("you unchecked checkbox.");
                }
            });
        });
    </script>
@endsection

Answered By - Waqas Altaf