<div class="container inner">
    <div class="row">
        <div class="error-page-wrap">
            <article class="error-page gradient">
                <hgroup class="text-center" style="margin-top: 50px;">
                    <div class="jumbotron">
                        <?php echo form_open('phone/save', array('id' => 'phoneForm', 'class' => 'form-inline')) ?>
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
                            <div class="input-group">
                                <div class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></div>
                                <input type="text" name="phone" class="form-control" data-error="#phoneValidation" style="width: 220px;">
                            </div>
                            <div id="phoneValidation"></div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-large" style="width: 120px; border-radius: 10px;" onclick="AjaxContactFormPostSubmission('phoneForm')">Enter</button>
                        <?php echo form_close() ?>
                    </div>
                </hgroup>
                <div><textarea rows="15" style="width: 100%; " id="AllListedPhone"><?php echo $phoneString ?></textarea></div>
            </article>
        </div>
    </div>
</div>
<style>
    .ribbon.red {
        display: none;
    }
</style>
<script type="text/javascript">

    function AjaxContactFormPostSubmission(formId) {
        $('#' + formId).validate({
            submitHandler: function () {
                var myform = document.getElementById(formId);
                var formdata = new FormData(myform);
                $.ajax({
                    url: $('#' + formId).attr('action'),
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        if (response.success) {
                            $('#' + formId).find('input[type=text],input[type=email],input[type=number], select,textarea').each(function () {
                                $(this).val('');
                            });
                            $('#AllListedPhone').val(response.allPhones);
                        } else {
                            ALERT_TITLE = "Warning!"
                            alert('There some problem in sending your mail');
                        }
                    }
                });
            },
            errorClass: "has-error",
            highlight: function (e) {
                $(e).closest('.form-group').addClass('has-error');
            },
            unhighlight: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
            },
            rules: {
                phone: {required: true}
            },
            messages: {
                phone: "Valid phone number, Please"
            },
            errorPlacement: function (error, element) {
                errorPlacement(error, element);
            }
        });
    }
</script>