Ajax html输入值显示为空

Question

I am trying to submit a form via ajax post to php but the value of the input tag appears to empty.

I have cross-checked defined class and id and it seems ok. I don't where my mistake is coming from. Here is the code

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);
        }
      }
    })

  });
});

subscribe.php

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

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

An empty results with the error code is all I get. Can any one help me out here with the mistakes I am making. Thanks

Answer 1

Change next

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);
        }
      }
    })

  });

to

  $('.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);
        }
      }
    }); 
  });