Loading jQuery International Telephone Input With Flags and Dial Codes Dynamically

Question

I have two options where I would like the intl tel input visible. First is hard coded into the html and second when a person selects the number from a drop down menu.

The first one I have working fine. The second one I am having problems initializing.

Does anyone know if there is something different I must add to get it to load dynamically?

Here is my code for both.

HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- JQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

    <!-- International Phone Input -->
    <link rel="stylesheet" href="build/css/intlTelInput.css">
    <script src="build/js/intlTelInput.js"></script>

    <title>Test Page</title>

    <!-- Custom -->
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>

</head>

<body>
    <label>Phone Number:</label>
    <br>
    <br>
     <label class='phoneDiv'></label><input id="phone" type="tel"
      form='form1'>

    <br>
    <br>

    <label>Number of Stores:</label>

                    <br>
                    <br>

                <div class='storeSpecifcs'>

               <select id="numberOfStores">
                   <option value="5"># of Stores</option> 
                   <option value="1">1</option>
                    <option value="2">2</option>
                </select>

                    <br>
                    <br>

                <div class='storeSpecifcsContainer'></div>

                </div> 

</body>
</html>

jQuery:

$(document).ready(function () {

    $("#phone").intlTelInput({
        utilsScript: "lib/libphonenumber/build/utils.js"
    });

$("#phone1").intlTelInput({
            utilsScript: "lib/libphonenumber/build/utils.js"
        });

$("#phone2").intlTelInput({
            utilsScript: "lib/libphonenumber/build/utils.js"
        });

    $("#numberOfStores").change(function () {
        $('.storeSpecifcsContainer').empty();
        var number = $("#numberOfStores option:selected").text();
        var htmlToInsert = "";
        for (var i = 1; i <= number; i++) {
            htmlToInsert = '<input id="phone' + i + '" type="tel" form="form1"><br><br>';
            $(".storeSpecifcsContainer").append(htmlToInsert);


        }
    });

});

Answer 1

What's happening is that you're adding to the DOM but you aren't then initializing the plugin on those newly added elements.

Try this out. Get rid of your double <br> and add margin to the inputs with css. It will make managing your html easier as well as your styling.

for (var i = 1; i <= number; i++) {
    //create it as a jquery object
    htmlToInsert = $('<input id="phone' + i + '" type="tel" form="form1">');
    $(".storeSpecifcsContainer").append(htmlToInsert);
    //you can probably do this before you add it to the DOM
    //initialize the plugin on the new object
    htmlToInsert.intlTelInput({
        utilsScript: "lib/libphonenumber/build/utils.js"
    });
}

Loading jQuery International Telephone Input With Flags and Dial Codes Dynamically

Question

1 answers

solution1
0 2015-05-05 16:52:36

Loading jQuery International Telephone Input With Flags and Dial Codes Dynamically

Question

1 answers

solution1 0 2015-05-05 16:52:36

solution1
0 2015-05-05 16:52:36