Sindbad~EG File Manager

<div class="container">
    <form action="{{url_for('main.StepPost_2',abs_type=abs_type,conf_id=conf_id,conf_key=conf_key)}}" id="form_s2" method="POST">
        <div class="container" id="step1">
            <ul id="progressbar">
                <li class="active" id="account"></li>
                <li class="active" id="personal"></li>
                <li id="payment"></li>
                <li id="confirm"></li>
            </ul>
        </div>
        <div class="row tiles">
            <label class=""><b>Title of the Paper : (not exceeding 250 characters)</b> </label>
            <span id="chars" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="title" id="title" class="form-control" placeholder="Title of paper" value="">{{data.title or ''}}</textarea>
        </div>
        <br />
        <div class="row">
            <label><b>Abstract : (not exceeding 1000 characters)</b></label>
            <span id="chars1" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" placeholder="Abstract" value="">{{data.synopsis or ''}}</textarea>
        </div>
        <!-- {% if data.presentation_type_id == 4 %} -->
        <!-- {% else %}
        <div class="row tiles">
            <label class=""><b>Title of the Paper (not exceeding 150 characters)</b> </label>
            <span id="chars" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="title" id="title" class="form-control" placeholder="Enter the title" value="">{{data.title or ''}}</textarea>
        </div>
        <br />
        <div class="row">
            <label><b>Purpose (not exceeding 400 characters)</b></label>
            <span id="chars2" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="Purpose" id="Purpose" class="form-control" cols="50" rows="5" placeholder="Purpose" value="">{{data.purpose or ''}}</textarea>
        </div>
        <br />
        <div class="row">
            <label><b>Methods (not exceeding 700 characters)</b></label>
            <span id="chars3" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="methods" id="methods" class="form-control" cols="50" rows="5" placeholder="Methods" value="">{{data.methods or ''}}</textarea>
        </div>
        <br />
        <div class="row">
            <label><b>Result (not exceeding 1000 characters)</b></label>
            <span id="chars1" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="Result" id="Result" class="form-control" cols="50" rows="5" placeholder="Result" value="">{{data.results or ''}}</textarea>
        </div>
        <br />
        <div class="row">
            <label><b>Conclusion (not exceeding 400 characters)</b></label>
            <span id="chars4" class="text-primary ml-2"></span>
        </div>
        <div class="row">
            <textarea name="Conclusion" id="Conclusion" class="form-control" cols="50" rows="5" placeholder="Conclusion" value="">{{data.conclusion or ''}}</textarea>
        </div>
        <br />

        {% endif %} -->
        <div class="row py-2">
            <div class="col">
                 <input type="button" name="Previous" id="Previous" class="btn btn-primary" value="Previous" onclick="move(2,0)" />
            </div>
            <div class="col">
                 <input type="button" name="next" id="next" class="btn btn-primary float-right" value="Next" onclick="move(2,1)" />
            </div>
        </div>
        <input type="hidden" name="user_id" id="user_id" value="{{user_id}}" />
        <input type="hidden" name="abs_id" id="abs_id" value="{{abs_id}}" />
        <input type="hidden" name="abs_type" id="abs_type" value="{{data.abs_type}}" />
        <input type="hidden" name="step" id="step" value="2">
        <input type="hidden" name="is_next" id="is_next" value="1">
    </form>
</div>
{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
        var $title = $("#title");
        var $synopsis = $("#synopsis");
        var $chars = $("#chars");
        var $chars1 = $("#chars1");
        var x250 = 250;
        var x1000 = 1000;
        countChar();
        countChar1();
        $chars.html (x250  + " characters remaining");
        $chars1.html(x1000 + " characters remaining");
        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar1);
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x250 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars.html(textRemaining + " characters exceeded");
            } else {
                $chars.attr("class", "text-primary ml-2");
                $chars.html(textRemaining + " characters remaining");
            }
        }
        
        function countChar1() {
            var textLength = $synopsis.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars1.attr("class", "text-danger ml-2");
                var textRemaining1 = -textRemaining;
                $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-primary ml-2");
                $chars1.html(textRemaining + " characters remaining");
            }
        }
        
    });
</script>
{% endblock %}