I am interested in implementing a feature that automatically saves form data when changes are made. My solution involves creating a dynamic form utilizing

When creating a dynamic form in HTML using Laravel and then calling it through JQuery, I encountered an issue where the first form created showed an undefined form ID, but subsequent forms displayed their form IDs. How can this issue be resolved? Below is the code I am working with:

@for($i =1;$i<=60; $i++) 
    <form action="{{ route('assign-files') }}" method="POST" id="formfile{{$i}}">
        @csrf()
        <div class="form-group row">
            <input type="hidden" name="campaign_id" value="{{$campaignObj->campaign_id}}" id='campignId'>
            <input type="hidden" name="order" value="{{$i}}" id="fileId">
            <label for="inputEmail3" class="col-2 col-form-label">Day {{$i}}</label>
            <div class="col-6">
                <select class="form-select recordingForm_id" aria-label="Default select example" id="recordingForm_id{{$i}}" name="campaign_type_id">
                    <option selected>Select</option>
                    @foreach($recordingObj as $recording)
                    @if(checkFileOnCompain($campaignObj->campaign_id, $recording->id, $i))
                    <option value="{{$recording->id}}" selected>{{$recording->file_name}}</option>
                    @else
                    <option value="{{$recording->id}}">{{$recording->file_name}}

                    </option>
                    @endif
                    @endforeach
                </select>
            [</div>][1]
        </div>
    </form>
@endfor
//jQuery code
<script type='text/javascript'>
    $(document).ready(function() {
     var recordingForm_id ='';
     var selectVal='';
     var formId ='';
     var campignId='';
     var fileId='';
        $('.recordingForm_id').change(function() {
            var recordingForm_id = $(this).attr('id');
            var selectVal = $("#"+recordingForm_id+" option:selected").val();
            var formId = $('#'+ recordingForm_id).parent().parent().parent().attr('id');
            var campignId = $('#campignId').val(); 
            var fileId = $('#fileId').val();
    
         $('#'+formId).submit();
    
    });
    
});
</script>

Answer №1

Give this approach a try

Adjust the attribute id='campignId' to class='campignId' and on selection change, locate the parent form and if the selected value is not null, submit the form

@for($i =1;$i<=60; $i++) 
    <form action="{{ route('assign-files') }}" method="POST" id="formfile{{$i}}">
        @csrf()
        <div class="form-group row">
            <input type="hidden" name="campaign_id" value="{{$campaignObj->campaign_id}}" class='campignId'>
            <input type="hidden" name="order" value="{{$i}}" class="fileId">
            <label for="inputEmail3" class="col-2 col-form-label">Day {{$i}}</label>
            <div class="col-6">
                <select class="form-select recordingForm_id" aria-label="Default select example" id="recordingForm_id{{$i}}" name="campaign_type_id">
                    <option selected>Select</option>
                    @foreach($recordingObj as $recording)
                    @if(checkFileOnCompain($campaignObj->campaign_id, $recording->id, $i))
                    <option value="{{$recording->id}}" selected>{{$recording->file_name}}</option>
                    @else
                    <option value="{{$recording->id}}">{{$recording->file_name}}</option>
                    @endif
                    @endforeach
                </select>
            </div>
        </div>
    </form>
@endfor

jQuery function

<script type='text/javascript'>
    $(document).ready(function() {
     var selectVal='';
     var formId ='';
        $('.recordingForm_id').change(function() {
            var selectVal = $(this).find(":selected").val();
            var formId = $(this).parents('form').attr('id');

            if(selectVal === ""){
                $('#'+formId).submit();
            }
    
        });
    
     });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Can someone identify the error in my HTML code? I keep getting an "Uncaught TypeError: Cannot read property 'getElementsByClassName' of null" error on the second line of the script tag. Additionally, my implemented active header code is not funct ...

Interested in accessing JSON data from another domain? CORS has got you covered

Over at localhost:8080/abc/v1/doc, I get some json data when accessed directly from the browser's address bar. Here are the response headers: Response Headers Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Cont ...

What is the best way to choose a random number using jQuery?

<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...

Experiencing difficulties in arranging Bootstrap columns based on media queries

I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should di ...

Capturing mouse clicks in Javascript: a guide to detecting when the mouse moves between mousedown and mouseup events

I have been working on a website that features a scrolling JavaScript timeline, inspired by the code found in this tutorial. You can check out the demo for this tutorial here. One issue I've encountered is when a user attempts to drag the timeline an ...

How to retrieve FormData data using Axios

One challenge I'm facing is with an application that I have developed using VueJS, where users can upload files and send them to the backend. The process involves using Axios to send the file as FormData. However, once the file is received on the back ...

Unable to display information from a repeated `textarea` in ngRepeat

Check out my code on Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L I'm trying to log the content of each textarea when typing, using the printStuff() function: $scope.printStuff = function(customize, item) { console.log(customize[item.inde ...

Choosing the content of a parent's sibling

My current project involves working on this code. The objective is to set up an alert message whenever the user clicks on a link with the class "click_me". The alert should display the content of its parent's siblings, specifically either "Hello Frien ...

Add Django template without adding an extra line break

In my main.html template, I have the following code: <p>{% include "pouac.html" %}{% include "pouac.html" %}</p> The file pouac.html contains just one line: <span>pouac</span> When rendered, the main.html template generates two ...

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

How to retrieve all text from a tag excluding text within a certain nested tag

Objective: My goal is to extract all text within a tag excluding any text found in a header tag. Input html: The HTML is generated by JSP and can be quite lengthy, with 500 or more rows. <td class="aaaColumn"> <h4>Header text:</h4> ...

Is there a way to showcase English and CJK text vertically with CSS?

This particular issue was first discussed 14 years ago on Stack Overflow, but a definitive solution still remains elusive. My goal is to have both CJK and Latin characters displayed vertically, with their bottoms facing the right side. While writing-mode ...

Exploring the utilization of attributes with slots in Vue.js

Can attributes be set on a slot so that the element from the parent inherits those attributes? Parent <vDropdown> <button slot="button">new button</button> <ul>content</ul> </vDropdown> Dropdown.vue <d ...

Troubleshooting: Date picker malfunction in ASP.NET web form with jQuery

I have been struggling to get the date picker working in my asp.net web form. I have tried changing the code multiple times, testing with other examples, and even creating a new page for testing, but it still isn't functioning properly. <%@ Page L ...

A clever way to transfer data between HTML and Java classes

I have recently built a HTML form with multiple fields for adding new items to a list. Here is a snippet of the code: <form v-on:submit.prevent="addItem" class="mt-3"> <div class="container"> <div class="input-field"> <div ...

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

Transferring values with jQuery

I attempted to customize the appearance of the select dropdown options, but unfortunately, the value of the options is not being transferred to the new jQuery-created class. Due to this issue, I am unable to achieve the desired outcome. The expected behavi ...

On the initial click of the button, the color will switch, and on the subsequent click,

I have created a basic HTML structure with a paragraph and a button. Upon clicking the button, I need different actions to take place. Specifically, on the first click, I want to change the color of the paragraph. On the second click, I aim to alter the fo ...

The functionality of the Ajax form is limited to a single use

Here's how my script is currently looking. Yes, it comes from a plugin. No, I'm not very familiar with ajax. Is there a way for me to make this form refresh and be ready to accept input again after the first submission? <script> jQuery(do ...