Получить данные из формы, используя flask jquery - PullRequest
Новая
       42

Получить данные из формы, используя flask jquery

0 голосов
/ 07 марта 2020

Я пытаюсь получить значения из jquery сгенерированной формы при нажатии на ссылку 

 {% if studentInfo %}
         {% for si in studentInfo%}
          <li><a href="" class="xyz" id="{{si['id']}}" >{{ si['lname'] }}, {{ si['fname'] }} {{si['id']}}</a>   </li>
        {%endfor%}
        </ul>
        {%else%}
        <h3>No Student Registered</h3>
        {%endif%}

здесь будет отображаться форма 

<div id="main_view" class="col-xs-6 col-md-8">

Это форма 

var large = '<form method="POST" id="entity">    <h1 id="name">Congratulations</h1>  <div class="form-group">    <h4>Have you been called by the guidance counselor?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_gc"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_gc"  value="0">No</label></h4>    <h4>Have you been called by the Discipline-in-Charge?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_dic"   value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_dic"  value="0">No</label>    </h4><h4>Have you been called by the Principal?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_prin"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_prin" id="called_by_prin" value="0">No</label>    </h4><h4>Have you joined any competition?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_compe" value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_compe" value="0">No</label>    </h4><h4>Have you joined any Membership club/s?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_club" id="joined_club"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_club"  value="0">No</label>    </h4><h4>Have you elected as a class Officer?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_class_off"  value="1" checked>Yes</label>  <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_class_off" id="joined_class_off" value="0">No</label>  </h4><br>    <div class="form-group">    <label for="exampleFormControlTextarea1">Notes</label>    <textarea class="form-control" rows="3"></textarea>  </div>  <hr>  <h1>Test Results</h1>  <div class="form-group row">  <div class="col-xs-2">    <label for="ex1">Reading ability</label>    <input class="form-control" id="ex1" type="text">  </div>  <div class="col-xs-2">    <label for="ex2">Comprehension</label>    <input class="form-control"  type="text" name="comprehension">  </div>  <div class="col-xs-2">    <label for="ex3">Verbal</label>    <input class="form-control" name="verbal" type="text" name="verbal">  </div>  <div class="col-xs-2">    <label for="ex3">Non-Verbal</label>    <input class="form-control" name="non-verbal" type="text" name="non-verbal">  </div>  <div class="col-xs-2">    <label for="ex3">NCAE</label>    <input class="form-control" name="ncae" type="text" name="ncae">  </div>  <div class="col-xs-2">    <label for="ex3">Essay</label>    <input class="form-control" id="essay" id="ex3" type="text" name="essay">  </div></div>              </div>              <div class="col-lg-12 ">                <button  type="submit" class="btn btn-primary btn-lg btn-block" >Submit</button>              </div></form>';

        $("#main_view").empty().append(large);
        document.getElementById('name').innerHTML=Id

ниже - весь мой код 

<script>
  $(document).ready(function() {
    $(".xyz").click(function() {
      event.preventDefault();
        var Id = $(this).attr('id');
        var large = '<form method="POST" id="entity">    <h1 id="name">Congratulations</h1>  <div class="form-group">    <h4>Have you been called by the guidance counselor?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_gc"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_gc"  value="0">No</label></h4>    <h4>Have you been called by the Discipline-in-Charge?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_dic"   value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_dic"  value="0">No</label>    </h4><h4>Have you been called by the Principal?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_prin"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="called_by_prin" id="called_by_prin" value="0">No</label>    </h4><h4>Have you joined any competition?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_compe" value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_compe" value="0">No</label>    </h4><h4>Have you joined any Membership club/s?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_club" id="joined_club"  value="1" checked>Yes</label>    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_club"  value="0">No</label>    </h4><h4>Have you elected as a class Officer?    <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_class_off"  value="1" checked>Yes</label>  <label class="radio-inline"><input class="form-check-input radio-inline" type="radio" name="joined_class_off" id="joined_class_off" value="0">No</label>  </h4><br>    <div class="form-group">    <label for="exampleFormControlTextarea1">Notes</label>    <textarea class="form-control" rows="3"></textarea>  </div>  <hr>  <h1>Test Results</h1>  <div class="form-group row">  <div class="col-xs-2">    <label for="ex1">Reading ability</label>    <input class="form-control" id="ex1" type="text">  </div>  <div class="col-xs-2">    <label for="ex2">Comprehension</label>    <input class="form-control"  type="text" name="comprehension">  </div>  <div class="col-xs-2">    <label for="ex3">Verbal</label>    <input class="form-control" name="verbal" type="text" name="verbal">  </div>  <div class="col-xs-2">    <label for="ex3">Non-Verbal</label>    <input class="form-control" name="non-verbal" type="text" name="non-verbal">  </div>  <div class="col-xs-2">    <label for="ex3">NCAE</label>    <input class="form-control" name="ncae" type="text" name="ncae">  </div>  <div class="col-xs-2">    <label for="ex3">Essay</label>    <input class="form-control" id="essay" id="ex3" type="text" name="essay">  </div></div>              </div>              <div class="col-lg-12 ">                <button  type="submit" class="btn btn-primary btn-lg btn-block" >Submit</button>              </div></form>';

        $("#main_view").empty().append(large);
        document.getElementById('name').innerHTML=Id

        });

        $("#entity").click(function() {
        event.preventDefault();
        alert("success");
        });
    });

</script>

<div class="container">
<div class="row">
  <div class="col-xs-12 col-md-4">
    <ul>
   {% if studentInfo %}
     {% for si in studentInfo%}
      <li><a href="" class="xyz" id="{{si['id']}}" >{{ si['lname'] }}, {{ si['fname'] }} {{si['id']}}</a>   </li>
    {%endfor%}
    </ul>
    {%else%}
    <h3>No Student Registered</h3>
    {%endif%}
  </div>

  <!--form will appear here-->
  <div id="main_view" class="col-xs-6 col-md-8"   >

Проблема в том, что когда я нажимаю кнопку отправки в форме (jquery сгенерированная форма), вся страница будет обновляться sh. Как я могу предотвратить обновление страницы и как получить данные из моей формы?

...