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 >
            <div >
                <div >
                    <div >
                        <h3 >{{ __('landingPage.tagline') }}</h3>  
                    </div>
                    
                    <!-- Header Card -->
                    <div >
                        <div>
                            <form action="{{ route('landingPage.store') }}" enctype="multipart/form-data" method="post">
                                @csrf
                                <div >
                                    <label>{{ __('landingPage.title') }}</label>
                                    <input type="text" name="title"  required>
                                </div>
                                <div >
                                    <label>{{ __('landingPage.shortDesc') }}</label>
                                    <input type="text" name="short_description"  required>
                                </div>
                                <div >
                                    <label>{{ __('landingPage.images') }}:</label>
                                    <input type="file" name="image"  required> 
                                </div>
                                <div >
                                    <input type="checkbox" name="is_have_button"  value="1"/>
                                    <label>{{ __('landingPage.haveButton') }}</label>
                                </div>

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

                            <div>
                                <a href="{{ route('landingPage.slider') }}"><button  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.

CodePudding user response：

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