Компилятор не определяет ajax, как решить?

Сделал, так же, ругается на jqyery min, который на сервере гугл и снова на $ajax


Вот полный JS код:
Может опять где-то ошибся?

const itemInputs = document.querySelectorAll(".item-input"),
      btnSubmit = document.querySelector(".btn-submit");

function formValidator() {

  let correctInputs = 0;

  for (let el = 0; el < itemInputs.length; el++) {

    if ((el == 2 || el == 0) && itemInputs[el].value.match(/[А-я]/)) {
      correctInputs++;
    }
    if (el == 1 && +itemInputs[el].value.match(/\d{11}/)) {
      correctInputs++;
    }
    if (el == 3 && (+itemInputs[el].value < 300 && +itemInputs[el].value > 0)) {
      correctInputs++;
    }
  }
  return correctInputs == 4 ? true : false;
}

document.querySelector(".form").addEventListener("change", () => {
  let correctInputs = 0;
  for (let i = 0; i < itemInputs.length; i++) {
        if (itemInputs[i].value.length != 0) {
          correctInputs++;
        }
  }
  if (correctInputs == 4) {
     if (formValidator() == true) {
      btnSubmit.classList.add("btn-active");
      btnSubmit.removeAttribute("disabled");
     }
  }
});

function resetForm() {

  document.querySelector('.form').reset();
  btnSubmit.classList.remove("btn-active");
  btnSubmit.setAttribute("disabled", "");

}

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);
  });

  $ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });
});

SonyFan23, весь код код где вызывается функция и отправляется запрос со знаком $ должен быть в $(document).ready(function(){
//ваш весь jq код
});

Сергей Котов, а сейчас разве не так?

SonyFan23, я же 18 часов назад написал в чем дело, $ajax неправильно, правильно $.ajax , через точку!

Нет такого объекта $ajax в принципе, есть объект $ и у него есть функция ajax() , вызывается так $.ajax!

Alex Plotnikov, ой точна бл

Alex Plotnikov, да, спасибо!
Только теперь ругается на fullName как будто переменная не объявлена:

data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber }

хотя fullName объявлена.
Попробовал перенести

const itemInputs = document.querySelectorAll(".item-input"),
      btnSubmit = document.querySelector(".btn-submit");

itemInputs - это все инпуты на странице
внутрь $(document).ready(function () {
Проблема та же

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);
  });

  $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { "fullName": fullName, "phone": phone, "street": street, "houseNumber": houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });
});

PHP, в который идет отправка:

if($_SERVER['REQUEST_METHOD'] == 'POST') { // была ли отправлены форма 
  $fullName = $_POST['fullName'];
  $phone = $_POST['phone'] ;
  $street = $_POST['street'];
  $houseNumber = $_POST['houseNumber'];

  echo $full_name, $phone,  $street , $house_number;

  }

Подскажи, пожалуйста, что не так

SonyFan23,
кавычки не нужны при передачи параметров

$.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: { fullName: fullName, phone: phone, street: street, houseNumber: houseNumber },
    dataType: "html",
    success: function () {
      console.log("Вывод чипсов");
    }
  });

Сергей Котов, все равно ругается

SonyFan23, покажи скрин ошибки

Сергей Котов,

SonyFan23, fullName в консоль выводится? попробуй без camelCase

пользуйся console.log и смотри что в объектах, тебе интерпретатор прямо пишет, что не так.

Сергей Котов, зачем ему пробовать без camelCase если он в camelCase определяет переменные? что за совет из разряда "в бубен постучи" ?

SonyFan23, смотри внимательно свой код, когда происходит отправка?

отправка происходит на ready, а переменные заполняются на click.... ясен перень что на момент ready переменные еще is not defined

Alex Plotnikov, скорее всего эта и за let и имеет ограниченую область видемости

Alex Plotnikov, то есть надо сделать примерно так?

btnSubmit.addEventListener("click", () => {

  let fullName = itemInputs[0].value,
    phone = itemInputs[1].value,
    street = itemInputs[2].value,
    houseNumber = itemInputs[3].value;

  $(document).ready(function () {

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: { fullName: fullName, phone: phone, street: street, houseNumber: houseNumber },
      dataType: "html",
      success: function () {
        console.log("Вывод чипсов");
      }
    });
  });
});

Никита, нет

$(document).ready(function(){
btnSubmit.addEventListener("click", () => {
   var fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$.ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {ajax: 'yes',
            fullName: fullName, 
            phone: phone, 
            street: street, 
            houseNumber: houseNumber 
   },
  success: function (data) {
    console.log(data);
  }
});
});

if(isset($_POST['ajax'])) {
 echo $_POST['fullName'], $_POST['phone'] , $_POST['street'], $_POST['houseNumber'];
 echo 'все норм!';
  }

Сергей Котов, сыпятся ошибки: что с var, что с let.
А если так:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullName = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      houseNumber = itemInputs[3].value;
    console.log(fullName, phone, street, houseNumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullName: fullName,
        phone: phone,
        street: street,
        houseNumber: houseNumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

То AJAX частично работает:

53 строка - это console.log(fullName, phone, street, houseNumber);
67 строка - это
console.log(data);

Никита,

$(document).ready(function(){
btnSubmit.addEventListener("click", () => {
   var fullName = itemInputs[0].value,
       phone = itemInputs[1].value,
       street = itemInputs[2].value,
       houseNumber = itemInputs[3].value;
       console.log(fullName,phone,street,houseNumber);
});


$.ajax({
  url: "php/data_processing.php",
  type: "POST",
  cache: false,
  data: {ajax: 'yes',
            name: fullName, 
            phone: phone, 
            street: street, 
            hnumber: houseNumber 
   },
  success: function (data) {
    console.log(data);
  }
});
});

if(isset($_POST['ajax'])) {
 echo $_POST['name'], $_POST['phone'] , $_POST['street'], $_POST['hnumber'];
  }

Никита, закономерность лога в том где CamelCase там не работает написал все в нижнем регистре

Сергей Котов, сомневаюсь, что с camelCase, что без него ошибки:
Вот твой вариант:

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    var fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);
  });


  $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: {
      ajax: 'yes',
      fullname: fullname,
      phone: phone,
      street: street,
      housenumber: housenumber
    },
    success: function (data) {
      console.log(data);
    }
  });
});

И что выдает:


А вот мой вариант:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

И уже без camelCase и результат такой же как и с ним:

Alex Plotnikov, у вас случайно нет никаких мыслей на этот счет?

Никита, странно по каким то причинам сервер не выплевыевает fullname и housenumber. Нужно покапаться в post

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
         document.write(data);
      }
    });
  });
});

if(isset($_POST['ajax'])) {
 print_r($_POST);
//или вардамп 
  }

Сергей Котов, все-таки, вы оказались правы, дело в camelCase. Я просто забыл PHP сохранить. И работает этот вариант:

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);

    $.ajax({
      url: "php/data_processing.php",
      type: "POST",
      cache: false,
      data: {
        ajax: 'yes',
        fullname: fullname,
        phone: phone,
        street: street,
        housenumber: housenumber
      },
      success: function (data) {
        console.log(data);
      }
    });
  });
});

Большое спасибо за помощь!

Никита, уже лучше

Сергей Котов, вот скажи, когда сработает ajax в твоем коде?

Сергей Котов,

btnSubmit.addEventListener("click", () => {
  $(document).ready(function () {

что это? вы вообще понимаете что тут происходит?

Никита, мысли одни, вы городите то, что не понимаете, что вы, что Котов не понимает, читайте документацию, готовый вариант писать на такие простые задачи, комильфо....

Alex Plotnikov, я не знаю никогда так не делал. но автор вопроса говорит что так работает. ready function отвечает за выполнения скриптов после того как весь DOM загрузится. так что я хз лично ему jQuery нужен был для ajax который и находится в контейнере ready.

Сергей Котов, просто $_post выведите, без условий

Никита, этот вариант неправильный, вы ждете клика, а потом еще ready , неужели так сложно понять что происходит в простейшем коде?

Alex Plotnikov, лол проверка не обходима

Alex Plotnikov, да я не понимаю может покажите как надо?

Сергей Котов, ready это не проверка!!!! это СОБЫТИЕ ! учите мат часть

Сергей Котов, сначала ready, по этому событию вешаем других слушателей, но никак не наоборот)))

ajax нужно вызывать по событию click, а у вас там в ваших простынях он вызывается после ready

Alex Plotnikov, блин я не хочу сдесь срач разводит я помог как смог. Скиньте более корректный код и дело с концом.

Сергей Котов, корректный код вам мамка в рот положит, разжеванным, останется только скопипастить, так не интересно)

Alex Plotnikov, в общем если весь код в Ready поместить то у него переменные not defined, я хз думал и за let, потому что у него ограниченая область видемости. пробовал var. тоже самое но имено и за такой говно конструкции все заработало

Alex Plotnikov, понятно, только вот как перестроить код - я не знаю, код Сергея не работает нормально

Сергей Котов, еще раз, помещаем весь код в ready, но !!! когда происходит вызов ajax? неужели не видно? не стоит ли его (вызов ajax) перенести внутрь обработки события click?

сначала ready, по нему вешаем событие на click, по click парсим значения и отправляем ajax! У вас же по ready было вешание события на click и далее, даже без тригера события клик была отправка ajax!, естественно там не будет переменных, т.к. события click еще не наступило, а ready наступило!

как вы так делаете, вы не видите очередность выполнения кода?

Alex Plotnikov, ааааааааа блииин вот точна я дурак сори

Alex Plotnikov, щя

$(document).ready(function () {
 //ready event fired, document ready

  btnSubmit.addEventListener("click", () => {
   //event listener on btnSubmit fires click event
  

   // Set Variables 
    var fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
    console.log(fullname, phone, street, housenumber);
    
    //Send aajax
    $.ajax({
    url: "php/data_processing.php",
    type: "POST",
    cache: false,
    data: {
      ajax: 'yes',
      fullname: fullname,
      phone: phone,
      street: street,
      housenumber: housenumber
    },
    success: function (data) {
      console.log(data);
    }
  }); 

   
  });

//previous place of ajax
  console.log('print imediately after ready events fired')

});

надеюсь у всех вопросы отпали теперь)

Alex Plotnikov,

$(document).ready(function () {
  btnSubmit.addEventListener("click", () => {
    let fullname = itemInputs[0].value,
      phone = itemInputs[1].value,
      street = itemInputs[2].value,
      housenumber = itemInputs[3].value;
      $.ajax({
           url: "php/data_processing.php",
           type: "POST",
           cache: false,
           data: {
              ajax: 'yes',
              fullname: fullname,
              phone: phone,
              street: street,
              housenumber: housenumber
           },
           success: function (data) {
              console.log(data);
           }
       });
  });
});

Сергей Котов, ну конечно!