Ajax HTML-значение ввода отображается пустым

Question

Я пытаюсь отправить форму через ajax post на php, но значение входного тега кажется пустым.

Я перепроверил определенный класс и идентификатор, и кажется, что все в порядке.Я не знаю, откуда моя ошибка.Вот код

index.html

<div class="modal">
  <div class="first">
  <p>Get notified when we go <br><span class="live">LIVE!</span></p>
  <input type="text" class="input" id="phone" placeholder="Enter your email adress" />
  <div class="arrow">
    <div class="error" style="color:red"></div>
    <div class="validator"></div>
  </div>
  <div class="send">
    <span>Subscribe</span>
  </div>
  </div>
  <div class="second">
    <span>Thank you for<br />subscribing!</span>
  </div>

</div>
  <script src='jquery-3.3.1.min.js'></script>



    <script  src="script.js"></script>

script.js

$(document).ready(function(){
  function validatePhone(phone) { 
    var re = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;
    return re.test(phone);
  } 

  $('.input').on('keyup',function(){
    var formInput = $('.input').val();
    if(validatePhone(formInput)){

      $('.validator').removeClass('hide');
      $('.validator').addClass('valid');

      $('.send').addClass('valid');
    }
    else{
      $('.validator').removeClass('valid');
      $('.validator').addClass('hide');

      $('.send').removeClass('valid');
    }
  });

  var phone = $('#phone').val();

  var data =
  'phone='+phone;
  $('.send').click(function(){
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: data,
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    })

  });
});

подписаться.php

```php
$phone = htmlentities($_POST['phone']);

if (!empty($phone)) {
    echo  1;
}else{
    echo "Phone number cannot be empty";
}
```

Я получаю пустые результаты с кодом ошибки.Может ли кто-нибудь помочь мне с ошибками, которые я делаю.Спасибо

Answer 1

Изменить следующий

JS

$('.send').click(function(){
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: data,
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    })

  });

до

  $('.send').click(function(){ 
  var data = $('#phone').val();
    $.ajax({
      type:"POST",
      url:"subscribe.php",
      data: {phone: data},
      success: function(data){
        alert(data);
        if (data ==1) {
          $('.modal').addClass('sent');
        }else{
          $('.error').html("Error String:" +data);
        }
      }
    }); 
  });

Answer 2

Если вы отправляете запрос POST через ajax, вам нужно отформатировать данные в виде объекта JSON, см. Мой код ниже.

Замените это:

var data =
  'phone='+phone;

следующим:

var data = {phone: phone};