форма не отправляется, когда я вызываю идентификатор в jquery, но когда я изменяю идентификатор на класс, форма отправляет

Question

это мой jquery, я не вижу никаких ошибок в моем jquery, но все же, когда я вызываю форму в моем jquery, функция не загружается и кнопка не будет срабатывать

это моя форма, как вы можетесм. идентификатор моей формы: lessonForm, но я не могу вызвать форму из своей функции, я не знаю, слеп я или нет, но я трачу часы только на то, чтобы это исправить, но все равно тот же результат

Когда я вызываюИдентификатор из моей формы кнопка не работает, я не могу найти решение проблемы, которая кажется

$(document).ready(function(){
		$(".ajaxloader").hide();
		$('#file').change(function(e){
		  var fileName = e.target.files[0].name;
		  $("#url").val(fileName);
		  var tmppath = URL.createObjectURL(e.target.files[0]);
		});
	});
	  function addLess() 
	  {
		  $('#lessonForm').unbind('submit').bind('submit',function(){
	      var lessonname = $("#lessonname").val();
	      var lessondesc = $("#lessondesc").val();
	      var url = $("#url").val();
	      var lessoncode = $("#lessoncode option:selected").val();
	

	      if (url == "")
	      {
	        $("#pw-msg").html("LESSON REQUIRED.");
	        $(".lead").html("OOPS!");
	        $('#prompt-warning').modal('show');
	      }

	      if(lessonname == "")
	      {
	      	$("#pw-msg").html("LESSON NAME REQUIRED.");
	      	$(".lead").html("OOPS!");
	      	$('#prompt-warning').modal('show');
	      }

	      if(lessondesc == "")
	      {
	      	$("#pw-msg").html("LESSON NAME REQUIRED.");
	      	$(".lead").html("OOPS!");
	      	$('#prompt-warning').modal('show');
	      }
	      if(lessoncode == "")
	      {
	      	$("#pw-msg").html("LESSON CODE REQUIRED.");
	      	$(".lead").html("OOPS!");
	      	$('#prompt-warning').modal('show');
	      }


	      if(url && lessonname && lessondesc && lessoncode) 
	      { 
	      	var form = $(this);
	        var formData = new FormData(this);
	        $(".formcontent").hide();
	        $(".ajaxloader").show();
	        $.ajax({
	          url : form.attr('action'),
	          type: form.attr('method'),
	          data: form.serialize(),
	          data: formData,
	          dataType: 'json',
	          cache: false,
	          contentType: false,
	          processData: false,
	          success:function(response)
	          {
	            if(response.success == true)
	            {
	              $(".ajaxloader").hide();
	              $("#lessonForm")[0].reset();
	              $("#addlesson").modal('hide');
	              $(".formcontent").show();
	              $("#ps-msg").html(response.messages);
	              $(".lead").html("SUCCESS");
	              $('#prompt-success').modal('show');
	            } 
	            // if
	            else if(response.success == false) 
	            {
	              $(".ajaxloader").hide();
	              $(".formcontent").show();
	              $("#pw-msg").html(response.messages);
	              $(".lead").html("OOPS!");
	              $('#prompt-warning').modal('show');
	            }  // if
	          },
	          error: function(XMLHttpRequest, textStatus, errorThrown) {
	            $(".ajaxloader").hide();
	            $(".formcontent").show();
	            $("#pw-msg").html("CONNECTION ERROR, TRY AGAIN.");
	            $(".lead").html("OOPS!");
	            $('#prompt-warning').modal('show');
	          } 
	        }); // /ajax 
	   	 } // if
	        return false;
	    }); //end bind unbind
	} //end func

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addlesson" tabindex="-1" role='dialog' aria-labelledby="addlesson1"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header text-center">
              <h5 class="modal-title" id="addlesson1">Add Lesson</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form class="form-horizontal" id="lessonForm" action="B/addLesson.php" method="POST" name="lessonForm" enctype="multipart/form-data">
                <div class="col-12 ajaxloader">
                  <div class="md-form mb-4">
                    <p class="card-text text-center mb-3">Adding Lesson...</p>
                    <i class="fa fa-spinner fa-spin fa-4x"></i>
                  </div>
                 </div>
                   <div class="file-field formcontent md-form">
                    <div class="btn btn-primary btn-sm float-left">
                      <span>Choose file</span>
                      <input type="file" name="file" id="file">
                    </div>
                    <div class="file-path-wrapper form-content">
                      <input class="file-path validate" type="text" placeholder="Upload your file" id="url" name="url">
                    </div>
                  </div>
                  <div class="col-12 formcontent">
                  <input type="text" name="lessoname" id="lessonname" class="form-control validate" placeholder="Lesson Name" required="" autofocus="" autocomplete="off">
                  </div>
                  <div class="col-12 formcontent mt-3 md-form">
                  <textarea  name="lessondesc" id="lessondesc" class="md-textarea w-100" rows="5"></textarea>
                  <label for="lessondesc">Lesson Description</label>
                  </div>
                  <div class="col-12 formcontent mb-3">
                  <select class="browser-default custom-select" name="lessoncode">
                  <option disabled="" selected="">Class List</option>
                   <?php  echo $classlist; ?>
                  </select>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" class="btn btn-dark btn-block" onclick="addLess();">Add Lesson</button>
                  </div>
              </form>
            </div>
          </div>
        </div>
      </div>

Answer 1

$( "#other" ).click(function() {
  $( "#target" ).submit(()=>{
    console.log('do something here');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="target" action="">
  <input type="text" value="Hello there">
  <button id="other"></button>
</form>

Попробуйте это

Answer 2

Вот в чем проблема. Вы можете увидеть две формы с одинаковым идентификатором sample-2, и событие будет привязано только к первой.Если вы нажмете на кнопки, вы увидите, что выходные данные генерируются для первого, но второй будет отправлен, поскольку события не присоединены ко второму.

var formSubmit = function (ev) {
  ev.preventDefault();
  $('#output').html('form submitted with id ' + this.id + ' with data ' + $(this).serialize());
  return false;
};

$(document).ready(function () {
  $('#sample-1').off('submit').on('submit', formSubmit);
  $('#sample-2').off('submit').on('submit', formSubmit);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="sample-1">
  <input type="hidden" name="form" value="sample-1" />
  <input type="submit" name="sample-1" value="Submit form with id sample-1" />
</form>

<form id="sample-2">
  <input type="hidden" name="form" value="sample-2 first form" />
  <input type="submit" name="sample-2-1" value="Submit first form with id sample-2" />
</form>

<form id="sample-2">
  <input type="hidden" name="form" value="sample-2 second form" />
  <input type="submit" name="sample-2-2" value="Submit second form with id sample-2" />
</form>

<hr />

<div id="output">You will see the output here.</div>