I am facing issue with form, I am not able to submit changes, the submit button is not reflecting any changes and I am uploading image in form and trying to show under it using js but it's returning no image.

                                        <form method="POST" action="{{ route('store.portfolio') }}" enctype="multipart/form-data">
                                            @csrf


                                        <div >
                                            <label for="example-text-input" >Portfolio Name</label>
                                            <div >
                                                <input  name="portfolio_name" id="portfolio_name"type="text" value="">
                                                @error('portfolio_name')
                                                <span >{{ $message }}</span>

                                                @enderror
                                            </div>
                                        </div>
                                        <!-- end row -->

                                        <div >
                                            <label for="example-text-input" >Portfolio Title</label>
                                            <div >
                                                <input  name="portfolio_title" id="portfolio_title"type="text" value="">
                                            </div>
                                        </div>
                                        <!-- end row -->

                                        <div >
                                            <label for="example-text-input" >Portfolio Description</label>
                                            <div >
                                            <form method="post">
                                            <textarea id="elm1" name="area">

                                            </textarea>
                                             </form>
                                            </div>
                                        </div>
                                        <!-- end row -->
 
                                        <div >
                                            <label for="example-number-input" >Portfolio Image</label>
                                            <div >
                                                <input  type="file" name="portfolio_image" id="image">
                                            </div>
                                        </div>
                                        <!-- end row -->
                                        <div >
                                            <label for="example-number-input" ></label>
                                            <div >
                                            <img id="showimage"  src="{{ url('uploads/no_image.jpg') }}">
                                            </div>
                                        </div>
                                        <!-- end row -->
                                        <input id="submit" type="submit"  value="Update Portfolio Page">

                                        </form>
                                    </div>
                                </div>
                            </div> <!-- end col -->
                        </div>
        
    </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#portfolio_image').change(function(e){
            var reader = new FileReader();
            reader.onload = function(e){
                $('#showimage').attr('src',e.target.result);
            }
            reader.readAsDataURL(e.target.files['0']);
        });
    });
</script>

When I select any image from my local system it should reflect just below the image selector

(https://i.stack.imgur.com/LrGit.png)

I am creating admin panel so that it reflect changes on front end but it's not working. The same code I tried with different page and it's working. I am not sure what I am missing here. Can anyone please look into it and help thank you

CodePudding user response：

You have 2 forms inside of each other this is simply not recommended see Can you nest html forms?, so the submit button is unsure which form it needs to submit, what you can do is simply set an identity to the form, and call the from the submit button or remove the inner form.

To Identify a form, you can set an id="formName" and the submit will call form="formName"

To correct your code:

<form method="POST" id="form1" action="{{ route('store.portfolio') }}" enctype="multipart/form-data">
   @csrf
   <!-- Code here -->
   <form method="post">
      <textarea id="elm1" name="area"></textarea>
   </form>
   <input id="submit" type="submit" form="form1"  value="Update Portfolio Page">
</form>

Better approach:

<form method="POST" id="form1" action="{{ route('store.portfolio') }}" enctype="multipart/form-data">
   @csrf
   <!-- Code here -->
   <input id="submit" type="submit" form="form1"  value="Update Portfolio Page">
</form>

CodePudding user response：

you can directly render this via Load file change.

<input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile (event)" >
<img id="output" width="200" />

    
var loadFile = function(event) {
    var image = document.getElementById('output');
    image.src = URL.createObjectURL(event.target.files[0]);
};

CodePudding user response：

// $('#portfolio_image').change(function(e){ portfolio_image is a name . given id is image

$('#image').change(function(e) {

alert("hii") }