Cant get data from intlTelInput

Question

Im trying to get extension from intlTelInput plugin on submit, but for some reason it returns empty. Here is an example: https://jsfiddle.net/msfk6top/

And the code:

<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/bootstrap/dist/css/bootstrap.min.css?7">
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?37">

<form id="my_form">
    <input name="phone" type="tel" id="phone" class="form-control">
    <input type="submit">
</form>

<!-- use old jquery so demo works in IE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?60"></script>

<script>
    $("#phone").intlTelInput();

    $("#my_form").submit(function () {
        alert($("#phone").intlTelInput("getExtension"));
    });
</script>

Any idea why its not returning the chosen extension?

Answer 1

You need to specify the utilsScript option when initializing the plugin in order for getExtension to work.

In your plunker, do:

$("#phone").intlTelInput({utilsScript:'https://intl-tel-input.com/node_modules/intl-tel-input/build/js/utils.js'});

utilsScript should be the path to the utils.js script that is included with the intl-tel-input plugin.

Answer 2

Try with this working example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ENVIAR SMS GRATIS CON BACHECUBANO">
    <title>ENVIAR SMS GRATIS CON BACHECUBANO</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/intlTelInput.min.css">
    <style>
        body {
            background-color: #fafafa;
        }

        .intl-tel-input {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="card" style="margin-top:50px;">
                <!-- <img class="card-img-top" src="..." alt="SMS GRATIS de Bachecubano"> -->
                <div class="card-body">
                    <form class="" action="send.php" method="POST" id="form">
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <h3 class="card-title text-center">ENVIAR SMS GRATIS CON BACHECUBANO</h3>
                                <div class="form-group">
                                    <div class="input-group">
                                        <input class="form-control" type="tel" id="phone" name="phone">
                                        <input type="hidden" id="phone2" name="phone2" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="form-group">
                                    <textarea class="form-control input-sm borderRadius" type="textarea" id="message" name="message" placeholder="Su mensaje 👍 SMS GRATIS bit.ly/elBache" maxlength="130" rows="5"></textarea>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
                                <span class="help-block">
                                    <p id="characterLeft" class="help-block"></p>
                                </span>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 text-right">
                                <button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="submit">Enviar SMS GRATIS</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/intlTelInput-jquery.min.js"></script>
    <script>
        $("#phone").intlTelInput({

            utilsScript: 'js/utils.js'
        });
        $("#form").submit(function() {
            //alert($("#phone").intlTelInput("getNumber"));
            $("#phone2").val($("#phone").intlTelInput("getNumber"));
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#characterLeft').text('130 caracteres restantes');
            $('#message').keyup(function() {
                var max = 130;
                var len = $(this).val().length;
                if (len >= max) {
                    $('#characterLeft').text('0 caracteres disponibles');
                    $('#characterLeft').addClass('red');
                    $('#btnSubmit').addClass('disabled');
                } else {
                    var ch = max - len;
                    $('#characterLeft').text(ch + ' caracteres restantes');
                    $('#btnSubmit').removeClass('disabled');
                    $('#characterLeft').removeClass('red');
                }
            });
        });
    </script>
</body>

</html>

Cant get data from intlTelInput

Question

2 answers

solution1
1 ACCPTED 2017-11-13 21:27:28

solution2
0 2019-05-22 16:29:31

Cant get data from intlTelInput

Question

2 answers

solution1 1 ACCPTED 2017-11-13 21:27:28

solution2 0 2019-05-22 16:29:31

solution1
1 ACCPTED 2017-11-13 21:27:28

solution2
0 2019-05-22 16:29:31