Блог

Как мы можем применить функцию onChage для ввода в jquery

Как я могу применить функцию onchange к флажку, дате и имени и обновить данные в объекте initialState

если флажок установлен, то его значение true, а если флажок снят, то значение false

это мой javascript

     const sectionWork = (event) => {
       event.preventDefault();
       let initialState = {
         check: false,
         Date: "",
         name: ""
       }
       $("#exampleCheck1").on('change', function() {
         if ($(this).is(':checked')) {
           $(this).attr('value', 'true');
         } else {
           $(this).attr('value', 'false');
         }
         initialState.check = $(this).val();
       });
       $('#exampleInputDate').on('change', function() {
               initialState.Date = $(this).val()
       });
        $('#naming').on('change', function() {
             initialState.name = $(this).val()
        });
        console.log(initialState)

    }
  

     <form onsubmit="sectionWork(event)">
        <div class="form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
        </div>
        <div class="form-group">
            <label for="exampleInputDate">Date</label>
            <input type="date" id="exampleInputDate" name="date">
        </div>
        <div class="form-group">
            <label for="exampleName">Name</label>
            <input type="text" aria-placeholder="Enter Name"  name = "naming" class="form-control" id="naming" >
        </div>

        <button type="submit" class="btn btn-primary">Releasing</button>
    </form>
  

Вы должны сделать эти обработчики событий глобальной областью действия, за пределами конкретного обработчика событий (вот обработчик onsubmit sectionWork )

 let initialState = {
  check: false,
  Date: "",
  name: ""
}
$("#exampleCheck1").on('change', function() {
  if ($(this).is(':checked')) {
    $(this).attr('value', 'true');
  } else {
    $(this).attr('value', 'false');
  }
  initialState.check = $(this).val();
});
$('#exampleInputDate').on('change', function() {
  initialState.Date = $(this).val()
});
$('#naming').on('change', function() {
  initialState.name = $(this).val()
});

const sectionWork = (event) => {
  event.preventDefault();
  console.log(initialState)

}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form onsubmit="sectionWork(event)">
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <div class="form-group">
    <label for="exampleInputDate">Date</label>
    <input type="date" id="exampleInputDate" name="date">
  </div>
  <div class="form-group">
    <label for="exampleName">Name</label>
    <input type="text" aria-placeholder="Enter Name" name="naming" class="form-control" id="naming">
  </div>

  <button type="submit" class="btn btn-primary">Releasing</button>
</form>