Couldn't get value from input filed in ajax

Question

When the form is submitted I should get value from input field whose name is phone using jquery but it is just giving me null value. I couldn't understand why it isn't working. And there is no any error message in console. I have posted HTMl and js code below. Please help me resolve it.

HTML code

<form action="" id="loginForm">
   <div class="input-group" style="margin-bottom: 5px;">
     <span class="input-group-addon">
         <i class="fas fa-phone"></i> +977
     </span>
     <input id="phone" type="number" class="form-control" name="phone" placeholder="98XXXXXXXX" required>
  </div>
  <div class="login-box verify-otp-wrapper" style="display: none">
     <p class="text-center">
        Enter the 4-digit OTP sent to your phone
        <span class="resend-wrapper" style="display: none">
           Or <b><a href="">Resend</a></b>
        </span>
      </p>
      <div class="otp-box">
         <div id="otp-outer-wrapper" style="margin: 0 auto;">
             <div id="otp-inner-wrapper">
                  <input required id="partitioned" autofocus name="otp_code" type="text" maxlength="4" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" value="{{ old('otp_code') ?? null }}"  onKeyPress="if(this.value.length==4) return false;" style="outline: none;" />
           </div>
        </div>
   </div>
   @if ($errors->has('otp_code'))
      <span class="help-block">
          <strong>{{ $errors->first('otp_code') }}</strong>
      </span>
   @endif
 </div>
 <button type="submit" class="login-register send-otp-btn">Continue</button>

Ajax jquery

<script>
        $(document).ready(function () {
            var $loginBox = $('.login-box'),
                $loginForm = $('#loginForm'),
                sendOtpBtnEl = $('.send-otp-btn');


            $loginForm.validate({
                rules: {
                    phone: "required",
                },
                errorPlacement: function(error, element) {
                    error.insertAfter(element.parents('.input-group'));
                }
            });

            // $loginBox.find('input[name="phone"]').mask("(999) 999-9999");

            $loginBox.on('click', '.send-otp-btn', function (e) {
                e.preventDefault()    

                $(this).prop('disabled', true);

                var phone = document.getElementById("phone").value;

                if (!$loginForm.valid()) {
                    $(this).prop('disabled', false);
                    return false;
                }

                $(this).html(
                    "Continue <i class='fa fa-spinner fa-spin'></i>"
                );

                if ($("input[name='otp_code']").val() != '')
                {
                    utils.http
                        .post(
                            router.get(
                                'user.ajax-login'
                            ), 
                            {
                                phone: $("input[name='phone']").val(),
                                otp: $("input[name='otp_code']").val()
                            }
                        ).done(function (response) {
                            utils.toast('You Have logged in successfully !', 'success')
                            utils.location(response.body.location)
                        }).fail(function (error) {
                            utils.toast('The otp is invalid !', 'error')
                        });
                    } else {
                        // console.log($("input[name='phone']").val());
                        console.log(phone);
                        sendOtp()
                    }
            });

            function sendOtp() {
                sendOtpBtnEl.prop('disabled', true);
                sendOtpBtnEl.html(
                    "Continue <i class='fa fa-spinner fa-spin'></i>"
                );

                // $("input[name='otp_code']").val();

                utils.http
                    .post(
                        router.get(
                            'user.verify-login'
                        ), {
                            phone: $("input[name='phone']").val()
                        }
                    ).done(function (response) {
                        $('.verify-otp-wrapper').show()

                        utils.toast('The otp code is sent to your phone number successfully', 'success')

                        sendOtpBtnEl.html(
                            "Continue"
                        );

                        setTimeout(function () {
                            $('.resend-wrapper').show()
                        }, 10000)
                    })
            }
    })
 </script>

Answer 1

You can get the value of an element using the selector ID as well as use like $('#phone').val()

Try using below updated script:

 <script type="text/javascript"> $(document).ready(function () { var $loginBox = $('.login-box'), $loginForm = $('#loginForm'), sendOtpBtnEl = $('.send-otp-btn'); $loginForm.validate({ rules: { phone: "required", }, errorPlacement: function(error, element) { error.insertAfter(element.parents('.input-group')); } }); // $loginBox.find('input[name="phone"]').mask("(999) 999-9999"); $loginBox.on('click', '.send-otp-btn', function (e) { e.preventDefault() $(this).prop('disabled', true); var phone = document.getElementById("phone").value; if (.$loginForm.valid()) { $(this),prop('disabled'; false); return false. } $(this);html( "Continue <i class='fa fa-spinner fa-spin'></i>" ). if ($("input[name='otp_code']").val().= '') { utils.http.post( router,get( 'user:ajax-login' ). { phone, $("#phone"):val(). otp. $("#partitioned").val() } ),done(function (response) { utils.toast('You Have logged in successfully.'. 'success') utils.location(response.body,location) });fail(function (error) { utils.toast('The otp is invalid.'; 'error') }). } else { // console;log($("#phone");val()). console,log(phone); sendOtp() } }). function sendOtp() { sendOtpBtnEl;prop('disabled'. true); sendOtpBtnEl.html( "Continue <i class='fa fa-spinner fa-spin'></i>" ). // $("#partitioned").val(). utils,http:post( router.get( 'user.verify-login' ). { phone. $("#phone").val() } ),done(function (response) { $('.verify-otp-wrapper');show() utils.toast('The otp code is sent to your phone number successfully'. 'success') sendOtpBtnEl,html( "Continue" ); setTimeout(function () { $('.resend-wrapper').show() }, 10000) }) } }) </script>