Вывести input в div и сохранить его в форме

Question

Вывести input в div и сохранить его в форме

Рейтинг: 1Ответов: 1Опубликовано: 15.02.2023

Мне необходимо выводить элементы из input в div и соранять их даже после перезагрузки страницы.

Т.е ввожу в input что ни будь и выводиться значение в div с определёнными стилями и так фиксируется. Далее пищу следующее значение и также выводиться, но уже левее и фиксируется.

Далее обновляю страницу и ничего не исчезает в div

page-aq.php

<?php
// Template Name: Вопросы-Отзывы
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title><?php bloginfo('description'); ?></title>
  <?php wp_head(); ?>

  <script>

function addText()
{
  val = document.getElementById('description').innerHTML = document.getElementById('add_reviews_window').value;
  val = document.getElementById('header-name-services').innerHTML = document.getElementById('name_window').value;
  val = document.getElementById('questions').innerHTML = document.getElementById('add_questions_window').value;

    var date = new Date();
    var d = date.getDate();
    var months = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноябрь', 'Декабрь'];;
    document.getElementById('data').innerHTML = date.getDate() + ' ' + months[date.getMonth()] + ' ' + date.getFullYear();
  
    const square = document.querySelector('#window_sli');
square.style.width = '314.08px';
square.style.height = '435.08px';
square.style.top = '397px';
square.style.left = '108px';
square.style.position = 'absolute';
square.style.borderWidth = '1.96px';
square.style.borderColor = 'rgb(255, 255, 255)';
square.style.borderStyle = 'solid';
square.style.borderRadius = '10px';

  
  }
 
  </script>

</head>

<body style = "background-color:<?php the_field('body') ?>">
  
<div class = "body">
<picture>

<source srcset="http://mywordpress/wp-content/uploads/2023/02/1900-background-1.png" media="(min-width:1900px)">

<img src = "<?php the_field('body-background') ?>"/>

</picture>
</div>

<div class="menu">
  <?php 
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'items_wrap' => '<ul id = "%1$s" class = "%2$s">%3$s</ul>',
                'menu_class' => '',
                'menu_id' => '',
                'depth' => 1
            ));
            ?>
  </div>
  <a href="http://mywordpress/" >
    <div id="button_" style = "background-color:<?php the_field('button_') ?>"></div>
    <div id="button-text_"><?php the_field('button-text_') ?></div>
  </a>



  <div class="add">
    <div id="add_reviews"><?php the_field('add_reviews') ?></div>
    <input id="add_reviews_window"></input>

    <div id="name"><?php the_field('name') ?></div>
    <input id="name_window"></input>

    <div id="add_questions"><?php the_field('add_questions') ?></div>
    <input id="add_questions_window"></input>

    <input type="button" onclick="addText()" id="button_add"><div id="text_add"><?php the_field('text_add') ?></div></input>
  </div>

  <div class="container-xl">
    <div class="row">
      <div class="col-md-10 mx-auto">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">

          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="s4">
                    <div id="window_sli"></div>
                    <div id="header-name-services"></div>
                    <div id="questions"></div>
                    <div id="description"></div>
                    <div id="data"></div>
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="s4">
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="s4">
                  </div>
                </div>
              </div>
              <div class="col-sm-4">
                <div class="thumb-wrapper">
                  <div class="s4">
                  </div>
                </div>
              </div>
            </div>

            <div class="carousel-item">
              
              
        
            </div>
          </div>
          <div class="control-qa">
            <a class="carousel-control-prev" id="button-right_question_answer" href="#myCarousel" data-slide="prev">
            </a>
            <a class="carousel-control-next" id="button-left_question_answer" href="#myCarousel" data-slide="next">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

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

css javascript html

Источник: Stack Overflow на русском

Вывести input в div и сохранить его в форме

Ответы