Sindbad~EG File Manager

<ul class="nav nav-tabs" id="myTab" role="tablist">
         <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray " value="1" onclick="jump_step(1)" aria-selected="true">Step 1</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link active " value="2">Step 2</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="3" onclick="{% if data.cur_step >= 2 %}jump_step(3){% endif %}">Step 3</button>
        </li>
        <li class="nav-item p-2">
            <button type="button" class="nav-link nav_btn_gray" value="4" onclick="{% if data.cur_step >= 3 %}jump_step(4){% endif %}">Step 4</button>
        </li>
        
    </ul>
<div class="tab-content " id="myTabContent">
    <div class="tab-pane fade show active p-2 rounded"  role="tabpanel" >
        <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="row">
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Name of Institution<span class="text-danger">*</span></label>
                    <input type="text" name="institution" class="form-control" value="{{data.institution or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Name of University<span class="text-danger">*</span></label>
                    <input type="text" name="university" class="form-control" value="{{data.university or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">MCI State<span class="text-danger">*</span></label>
                    <input type="text" name="mci_state" class="form-control" value="{{data.mc_state or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Year of Passing<span class="text-danger">*</span></label>
                    <input type="text" name="yearofpassing" class="form-control" value="{{data.year_of_passing or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Name of Guide<span class="text-danger">*</span></label>
                    <input type="text" name="guide" class="form-control" value="{{data.guide_name or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Name of Co-Guide<span class="text-danger">*</span></label>
                    <input type="text" name="coguide" class="form-control" value="{{data.co_guide_name or ''}}" required>
                </div>
                <div class="col-md-4 form-group">
                    <label class="font-weight-bold">Name of HOD<span class="text-danger">*</span></label>
                    <input type="text" name="hod" class="form-control" value="{{data.hod_name or ''}}" required>
                </div>
            </div>
            <div class="row ">
                <div class="col">
                    <label class=""><b>Thesis Title(not exceeding 100 characters)</b> <span class="text-danger">*</span></label>
                    <span id="chars" style="color: red;"></span><span id="chars_text" style="color: blue;"></span>
                    <textarea name="title" id="title" class="form-control" placeholder="Title" value="">{{data.title or ''}}</textarea>
                </div>
            </div>
            <br />
            <div class="row">
                <div class="col">
                    <label><b>Abstract (not exceeding 2000 characters)</b> <span class="text-danger">*</span><span id="chars1" class="text-danger ml-1"></span><span id="chars1_text" style="color: blue;"></span>
                        <span class="text-danger">Structured abstract comprise of Objective, Design, Methodology, Outcome measures, Statistical analysis, Results and Conclusions. Do not mention your name or affiliations in your abstract.</span></label>
                     
                    <textarea name="synopsis" id="synopsis" class="form-control" cols="100" rows="10"  value="">{{data.synopsis or ''}}</textarea>
                </div>
            </div>
            <br />
            

            <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="cur_step" id="cur_step" value="{{ data.cur_step  or 0}}">
            <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>
</div>
{% block script %}
<script type="text/javascript">
    $(document).ready(function () {
        var $title       = $("#title");
        var $synopsis     = $("#synopsis");
        var $methods     = $("#methods");
        var $result      = $("#result");
        var $conclusion  = $("#conclusion")

        var $chars  = $("#chars");
        var $chars1 = $("#chars1");
        var $chars2 = $("#chars2");
        var $chars3 = $("#chars3");
        var $chars4 = $("#chars4");
        

        var chars_text  = $("#chars_text");
        var chars1_text = $("#chars1_text");
        var chars2_text = $("#chars2_text");
        var chars3_text = $("#chars3_text");
        var chars4_text = $("#chars4_text")


        var x100 = 100;
        var x1000 = 2000;

        chars_text.html(" characters remaining");
        $chars.css("color","red");
        $chars.html(x100);

        $chars1.css("color","red");
        $chars1.html(x1000);
        chars1_text.html(" characters remaining");

        $chars2.css("color","red");
        $chars2.html(x1000);
        chars2_text.html(" characters remaining");

        $chars3.css("color","red");
        $chars3.html(x1000);
        chars3_text.html(" characters remaining");

        $chars4.css("color","red");
        $chars4.html(x1000);
        chars4_text.html(" characters remaining");
        
        $title.on("keyup", countChar);
        $synopsis.on("keyup", countChar1);
        $methods.on("keyup", countChar2);
        $result.on("keyup", countChar3);
        $conclusion.on("keyup", countChar4);
        
        function countChar() {
            var textLength = $title.val().length;
            var textRemaining = x100 - textLength;
            if (textRemaining < 0) {
                $chars.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars.html(textRemaining1);
                chars_text.html(" characters exceeded");
                // $chars.html(textRemaining1 + " characters exceeded");
            } else {
                $chars.attr("class", "text-danger ml-2");
                chars_text.html(" characters remaining");
                $chars.html(textRemaining);
            }
        }
        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);
                chars1_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars1.attr("class", "text-danger ml-2");
                chars1_text.html(" characters remaining");
                $chars1.html(textRemaining);
            }
        }
        function countChar2() {
            var textLength = $methods.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars2.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars2.html(textRemaining);
                chars2_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars2.attr("class", "text-danger ml-2");
                chars2_text.html(" characters remaining");
                $chars2.html(textRemaining);
            }
        }
        function countChar3() {
            var textLength = $result.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars3.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars3.html(textRemaining);
                chars3_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars3.attr("class", "text-danger ml-2");
                chars3_text.html(" characters remaining");
                $chars3.html(textRemaining);
            }
        }
        function countChar4() {
            var textLength = $conclusion.val().length;
            var textRemaining = x1000 - textLength;
            if (textRemaining < 0) {
                $chars4.attr("class", "text-danger ml-2");
                var textRemaining1 = textRemaining;
                $chars4.html(textRemaining);
                chars4_text.html(" characters exceeded");
                // $chars1.html(textRemaining + " characters exceeded");
            } else {
                $chars4.attr("class", "text-danger ml-2");
                chars4_text.html(" characters remaining");
                $chars4.html(textRemaining);
            }
        }
        // $("#previous").click(function () {
        //     var abs_id = $("#abs_id").val();
        //     var abs_type = $("#abs_type").val();
        //     $.ajax({
        //         type: "GET",
        //         url: BaseUrl + "/pp/step1",
        //         data: {
        //             abs_id: abs_id,
        //             abs_type: abs_type,
        //         },
        //         dataType: "html",
        //         success: function (data) {
        //             if (data == 0) {
        //             } else {
        //                 $("#content").html(" ");
        //                 $("#content").html(data);
        //             }
        //         },
        //     });
        // });
        // $("#next").click(function () {
        //     alert("in next");
        // });
    });
</script>
{% endblock %}