Кнопка отправки формы HTML для выполнения оператора печати - PullRequest
Новая
       1

Кнопка отправки формы HTML для выполнения оператора печати

0 голосов
/ 15 сентября 2018

Я довольно плохо знаком с HTML-кодированием. Я пытаюсь реализовать простое приложение, которое просит пользователя ввести приветствие, имя и фамилию. После отправки, вместо сохранения имен в базе данных, я просто хочу, чтобы под самой формой появлялось предупреждение или оператор печати с надписью "Welcome" + salutation + last name.

Я подумал, что мог бы просто реализовать это, используя простой скрипт на python и html-файл, который содержит все содержимое. Есть ли что-то еще к этому?

app.py 

#!/usr/bin/env python3

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def main():
    return render_template('form.html')


if __name__ == "__main__":
    app.run()

form.html 

<html lang="en">
  <body>

    <div class="container">

      <div class="jumbotron">
        <h1>Gettin' a feel for docker</h1>
        <form class="form" method= "post" onSubmit= "alert('Welcome')">
          <label for="salutation" class="sr-only">Salutation</label>
          <input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
          <label for="firstName" class="sr-only">First Name</label>
          <input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
          <label for="lastName" class="sr-only">Last Name</label>
          <input type="name" name="lastName" id="lastName" class="form-control"  required><br>

          <button id="submit" class="btn btn-lg btn-primary btn-block" type="button">Submit</button>
        </form>
      </div>

    </div>
  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Код согласно вашему требованию в form.html должен быть следующим: 

<html lang="en">
  <body>
    <div class="container">
      <div class="jumbotron">
        <h1>Gettin' a feel for docker</h1>
        <form class="form" method= "post" onSubmit= "alert('Welcome')">
          <label for="salutation" class="sr-only">Salutation</label>
          <input type="salutation" name="salutation" id="salutation" class="form-control" required autofocus><br>
          <label for="firstName" class="sr-only">First Name</label>
          <input type="name" name="firstName" id="firstName" class="form-control" required autofocus><br>
          <label for="lastName" class="sr-only">Last Name</label>
          <input type="name" name="lastName" id="lastName" class="form-control"  required><br>
          <button id="submit" class="btn btn-lg btn-primary btn-block" type="button" onclick="show_alert()">Submit</button>
        </form>
      </div>
    </div>
    <script type="text/javascript">
      function show_alert(){
          alert("Welcome, "+ document.getElementById('salutation').value + " " + document.getElementById('firstName').value + " " + document.getElementById('lastName').value);
      }
    </script>
  </body>
</html>
0 голосов
/ 15 сентября 2018

Чтобы динамически отображать результаты пользовательского ввода при нажатии кнопки, вам нужно будет использовать jquery. 

<html>
 <header>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 </header>
  <body>
    <div class='wrapper'>
      <input type='text' id='salutation'>
      <input type='text' id='firstname'>
      <input type='text' id='lastname'>
      <button class='get_greeting'>Display</button>
      <div class='results'></div>
    </div>
  </body>
 <script>
   $(document).ready(function(){
     $('.wrapper').on('click', '.get_greeting', function(){
       $('.results').html('<p>Welcome, '+$('#salutation').val()+' '+$('#firstname').val()+' '+$('#lastname').val()+'</p>')
     });
   });
 </script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...