HTML форма не видит скрипт JQuery

Question

Помогите, пожалуйста, разобраться в проблеме. На локальной машине (XAMPP) пишу небольшой сайт. Есть страница PHP на которой написана форма с отправкой через скрипт JQuery. В написании скрипта сам не силен, поэтому взял из интернета и адаптировал под свои нужны. Но вся проблема в том, что при отправке формы сама форма не видит скрипт JQuery и просто пытается отправить форму через GET запрос, хотя я указываю POST.

Для проверки написал простейшую форму и обработчик. Скрипт брал из сети. Но даже эта форма пытается отправиться как GET. Насколько я понимаю, происходит это потому, что форма не видит скрипт и по умолчанию отправляет как GET.

UPD: ссылки на JQuery на странице подключены:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Помогите, пожалуйста, понять в чем ошибка.

HTML-форма:

<form id="form1">
<input type="text" name="imp1" />
<button type="submit" name="ok">отправить</button>
</form>

Скрипт JQuery:

$("#form1").submit(function(event) {

    $data = $(this).serialize();

    $.ajax({
      url: "form1proc.php",
      type: "POST",
      data: $data, 
      dataType: "html",
      success: function(data){ 
        
      }
    });
  });

Обработчик PHP:

$f1=$_POST['imp1'];
echo $f1;

Answer 1

скрипт должен быть после формы, проверь

UPD: type: 'POST' не будет работать, как правильно заметил комментатор выше. надо написать method: 'POST'

также данные отправить в виде FormData

const data = new FormData(this);

вот что должно получиться

$("#form1").submit(function(event) {

  const $data = new FormData(this);
  $.ajax({
     url: "form1proc.php",
     method: "POST",
     data: $data, 
     dataType: "html",
     success: function(data){ 
    
     }
   });
 });

Answer 2

$("#form1").submit(function(event) {
  event.preventDefault();
  ...

Answer 3

Вам нужно определить событие по которому на submit будет навешено событие. Лучше на $(document).ready():

$(document).ready(function() {
  $("#form1").submit(function(event) { 
    // ... 
  }
}

БЛОГ НА HUSL

HTML форма не видит скрипт JQuery

Ответы (3 шт):