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>
   <!-- <li class="nav-item p-2">
       <button type="button" class="nav-link nav_btn_gray" value="5" onclick="{% if data.cur_step >= 4 %}jump_step(5){% endif %}">Step 5</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">
               <label class=""><b>Title (not exceeding 150 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>Introduction / Purpose ( 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></label>
                
               <textarea name="purpose" id="purpose" class="form-control" cols="50" rows="5" placeholder="Purpose / Introduction" value="">{{data.purpose or ''}}</textarea>
           </div>
       </div>
       <br />
       <div class="row">
           <div class="col">
               <label><b>Synopsis</b> <span class="text-danger">*</span><span id="chars2" class="text-danger ml-1"></span><span id="chars2_text" style="color: blue;"></span></label>
                
               <textarea name="synopsis" id="synopsis" class="form-control" cols="50" rows="5" placeholder="Synopsis" value="">{{data.synopsis or ''}}</textarea>
           </div>
       </div>
       <br />
       <!-- <div class="row">
           <div class="col">
               <label><b>Result</b> <span class="text-danger">*</span><span id="chars3" class="text-danger ml-1"></span><span id="chars3_text" style="color: blue;"></span></label>
                
               <textarea name="result" id="result" class="form-control" cols="50" rows="5" placeholder="Result" value="">{{data.results or ''}}</textarea>
           </div>
       </div>
       <br /> -->
       <div class="row">
           <div class="col">
               <label><b>Conclusion</b> <span class="text-danger">*</span><span id="chars4" class="text-danger ml-1"></span><span id="chars4_text" style="color: blue;"></span></label>
                
               <textarea name="conclusion" id="conclusion" class="form-control" cols="50" rows="5" placeholder="Conclusion" value="">{{data.conclusion or ''}}</textarea>
           </div>
       </div>
       <br />
       <!-- <div class="row">
        <div class="col">
            <label><b>Clinical Implication (not exceeding 400 characters)</b> <span class="text-danger">*</span><span id="chars5" class="text-danger ml-1"></span><span id="chars5_text" style="color: blue;"></span></label>
             
            <textarea name="Clinical_Implication" id="Clinical_Implication" class="form-control" cols="50" rows="5" placeholder="Clinical Implication" value="">{{data.case_report or ''}}</textarea>
        </div>
    </div> -->
       <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 $purpose     = $("#purpose");
   var $synopsis     = $("#synopsis");
   var $result      = $("#result");
   var $conclusion  = $("#conclusion")
   var $Clinical_Implication  = $("#Clinical_Implication")

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

   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 chars5_text = $("#chars5_text");


   var x100 = 150;
   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");
   countChar()
   countChar1()
//    $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");

//    $chars5.css("color","red");
//    $chars5.html(x1000);
//    chars5_text.html(" characters remaining");
   
   $title.on("keyup", countChar);
   $purpose.on("keyup", countChar1);
   $synopsis.on("keyup", countChar1);
   $result.on("keyup", countChar1);
   $conclusion.on("keyup", countChar1);
   $Clinical_Implication.on("keyup", countChar1);
   
   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 = $purpose.val().length + $synopsis.val().length + $conclusion.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 = $synopsis.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);
//        }
//    }
//    function countChar5() {
//        var textLength = $Clinical_Implication.val().length;
//        var textRemaining = x1000 - textLength;
//        if (textRemaining < 0) {
//            $chars5.attr("class", "text-danger ml-2");
//            var textRemaining1 = textRemaining;
//            $chars5.html(textRemaining);
//            chars5_text.html(" characters exceeded");
//            // $chars1.html(textRemaining + " characters exceeded");
//        } else {
//            $chars5.attr("class", "text-danger ml-2");
//            chars5_text.html(" characters remaining");
//            $chars5.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 %}