Как отобразить выбранное значение из выпадающего меню, а также ввод текста после нажатия кнопки «Отправить» на той же странице - PullRequest
Новая
       27

Как отобразить выбранное значение из выпадающего меню, а также ввод текста после нажатия кнопки «Отправить» на той же странице

0 голосов
/ 16 марта 2019

Я создаю небольшое веб-приложение, в котором пользователи выбирают имя из выпадающего меню, вводят свое сообщение, которое выскакивает ниже в блоке, который отображает как выбранное имя, так и соответствующее сообщение с тем именем, которое было выбрано.

например. Имя пользователя John выбрано ... Hello world - это ввод в текстовое поле. Затем пользователь нажимает кнопку «Отправить», а затем в идеале под ней пишется « John Hello world» вместе с миниатюрой изображения.

Я не могу найти ничего конкретного для такого рода проблем. Ниже мой код. 

<?php

$db = mysqli_connect ("host", "user", "pass", "db");

if (!$db)
{
  echo "Sorry! Can't connect to database";
  exit();
}
$result = $db->query ("SELECT name FROM table;");
?>

  <!DOCTYPE html>
  <html>
  <head>
  <title>Blog</title>

  <style type="text/css">

  .box1{display: block;
  background-color:red;
  width: 500px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 25px;}


  h1 {
  margin-bottom: 50px;
  padding-top: 25px;}


  #search{display: inline-block;
  margin-top: 50px;}

  .box2 {background-color:green;
  width: 500px;
  height: 250px;
  margin: 0 auto;
  text-align: center;
  border-radius: 25px;
  margin-top: 50px;}

  </style>

  <script>

  function showInput() {
  document.getElementById('display').innerHTML = 
  document.getElementById("user_input").value;
    }

  </script

  </head>
  <body>
  <div class= "box1">
  <h1>Blog</h1>
  <div id = "dropdowntxt">Display Name

  <select name="dbnames">
  <option value="Select Display Name">Select Display Name</option>
  <option value="1">John</option>
  <option value="2">Mary</option>
  <option value="3">Dave</option>
  <option value="4">Rob</option>
  <option value="5">Sarah</option>
  <option value="6">Mike</option>
  <option value="6">Lucy</option>
  </select>



</div>

<form id ="search">
<input type = "text" name="message" id="user_input">
<input type = "button" value= "Submit" onclick="showInput();">
</form>

</div>

<div class = "box2">

<p><span id='display'></span></p>

</div>

</body>
</html>
...