duanjiati1755
2019-07-03 10:43
浏览 95

Ajax html输入值显示为空

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyongkui6329 2019-07-03 11:01
    已采纳

    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);
            }
          }
        }); 
      });
    
    点赞 评论
  • douyao1878 2019-07-03 10:57

    If you send a POST request via ajax you need to format data as a JSON object, see my code below.

    Replace this:

    var data =
      'phone='+phone;
    

    with this:

    var data = {phone: phone};
    
    点赞 评论

相关推荐 更多相似问题