I have Form in Div & that Div in loop to display saved data, I want to check if in any From any fiedls is changed i can detect the changes

Question

This code is in loop

<div class="card card-fluid">
@php $counterId++; 
    $formId = 'startLog'.$counterId;
@endphp
{!! Form::open(['id'=>$formId,'class'=>'ajax-form','method'=>'POST', 'onSubmit' => 'return false']) !!}
    <div class="card-body">
        <div class="row white-box">                        
            <div class="col-md-4">
                <input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
            </div> 
            <div class="col-md-2" style="margin-right: -50px;">
                <select class="custom-select-timer" name="update_memberProject[]">
                    <option selected disabled>Projects</option>                         
                    <option>1st</option>
                    <option>2nd</option>
                    <option>3rd</option>
                </select>
            </div> 
            <div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 50px;">
        
                <input type="checkbox" name="bill">
                <label style="margin-left: 8px;">Check Bill </label>
            </div>
        </div>
    </div>
{!! Form::close() !!}

all i want if any change in form either select new option or check box or text field i can catch that chages please help

Answer 1

You can select all input in jquery and test the tagname modified.

//i have added event 'input' if you want to test every modification of input Text
// if you want to test the input Text after validation, keep only the event change
$("select, input[type=checkbox], input[type=text]").on('change, input', function(e){
  console.log($(this).prop("tagName") + " has been changed");
  console.log("formid: "  + $(this).parents("form:first").attr("id"));
  //following the The tag, you could navigate along the properties of tag and its children
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="card-body">
        <div class="row white-box">                        
            <div class="col-md-4">
                <input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
            </div> 
            <div class="col-md-2" style="margin-right: -50px;">
                <select class="custom-select-timer" name="update_memberProject[]">
                    <option selected disabled>Projects</option>                         
                    <option>1st</option>
                    <option>2nd</option>
                    <option>3rd</option>
                </select>
            </div> 
            <div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">
        
                <input type="checkbox" name="bill">
                <label style="margin-left: 8px;">Check Bill </label>
            </div>
        </div>

you can simplify the test of change/input and just keep the test of tag modified:

$("form").on('change, input', 'input, textarea, select', function(e){
  console.log($(this).prop("tagName") + " has been changed");
  console.log("formid: " + $(this).parents("form:first").attr("id"));
  //following the The tag, you could navigate along the properties of tag and its children
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<form action="/ma-page-de-traitement" method="post" id="form1">
    <div class="card-body">
        <input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
            <div class="col-md-2" style="margin-right: -50px;">
                <select class="custom-select-timer" name="update_memberProject[]">
                    <option selected disabled>Projects</option>
                    <option>1st</option>
                    <option>2nd</option>
                    <option>3rd</option>
                </select>
            </div>

            <div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">

                <input type="checkbox" name="bill">
                    <label style="margin-left: 8px;">Check Bill </label>
            </div>
            <div>
                <label for="mail">e-mail :</label>
                <input type="email" id="mail" name="user_mail">
                <div>
                    <label for="msg">Message :</label>
                    <textarea id="msg" name="user_message"></textarea>
                </div>
            </div>
    </div>
</form>

<form action="/ma-page-de-traitement" method="post" id="form2">
    <div class="card-body">
        <input type="text" class="task-name" name="task_name" value="" placeholder="write about your task">
            <div class="col-md-2" style="margin-right: -50px;">
                <select class="custom-select-timer" name="update_memberProject[]">
                    <option selected disabled>Projects</option>
                    <option>1st</option>
                    <option>2nd</option>
                    <option>3rd</option>
                </select>
            </div>

            <div class="col-md-1 bill_icon" style="border-left: lightgray 1px dotted; max-width: 150px;">

                <input type="checkbox" name="bill">
                    <label style="margin-left: 8px;">Check Bill </label>
            </div>
            <div>
                <label for="mail">e-mail :</label>
                <input type="email" id="mail" name="user_mail">
                <div>
                    <label for="msg">Message :</label>
                    <textarea id="msg" name="user_message"></textarea>
                </div>
            </div>
    </div>
</form>