Как создать HTML элементы и применить их к другому HTML файлу, используя Javascript? - PullRequest
Новая
       4

Как создать HTML элементы и применить их к другому HTML файлу, используя Javascript?

0 голосов
/ 26 апреля 2020

Я пытаюсь создать пару веб-страниц, которые позволят мне заполнить форму на input.html и добавить введенные данные в другой файл HTML, index.html.

Я искал ответ уже пару часов, и это может просто свести меня с ума!

Вот пример кода того, что я пытаюсь сделать:

  • HTML форма input.hmtl: 
<form>
   <label>
      Enter something:
      <input type="text" id="userinput" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>
  • Javascript для получения введенных данных и передачи index.html: 
var userInput = document.querySelector("#userinput");
var submit = document.querySelector("#submit");

function addToIndex() 
{
   // create new element on index.html
}

submit.addEventListener("click", addToIndex, false);
  • HTML выходной файл index.html: 
<div id="contentstart">
   <!-- newly created element here -->
</div>

Я пытался использовать это решение, но консоль Chrome выдает ошибку и сообщает мне это newWindow is not a function. Я только что наткнулся на использование элемента <iframe> в нескольких ответах, но пока не совсем понял (я нуб).

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 26 апреля 2020

Я показал вам способ начать. Остальное зависит от вас, вы можете делать все, что хотите. Я надеюсь, что вы могли бы помочь. 

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>

        <form id ="form">
            <label>
               Enter something:
               <input type="text" id="userinput" required>
            </label>
            <input type="submit" id="submit" value="submitted">
         </form>


         <script>

    let form = document.getElementById("form");
    let userInput = document.getElementById("userinput");
    form.addEventListener("submit", submitForm) //this function will work when the form is submit

    function submitForm (e) {
        e.preventDefault() // this event will prevent page refresh when form submit
        let userInputValue = userInput.value; // userinput value 
        console.log(userInputValue);
        moveToAnotherPage(userInputValue); //we send the value we get from userinput to use in another function.
    }

    function moveToAnotherPage (value) {



          // Select the index2 html elements and add with innerhtml or something. 
//to do this, you may need to save the userinput value you received to localStorage and pull it from it. I suggest you look into localStorage .And if you know php, you can use it.

    }

         </script>


    </body>
    </html>
0 голосов
/ 27 апреля 2020

Лучший вариант - использовать веб-сервер или серверную реализацию. Код сервера может быть написан на нескольких языках. Некоторые из языков включают PHP, NodeJS и ASP. NET.

Однако вы можете передавать данные с помощью хранилища браузера.

Но хранилище в браузере небезопасно и может быть удалено пользователем в любое время. Если вы храните такую ​​информацию, как пароли или данные, которые должны быть видны нескольким пользователям, вам следует использовать веб-сервер и / или базу данных.

У вас должен быть сценарий на обеих страницах. Страница с формой будет хранить / устанавливать данные. Страница индекса будет извлекать данные и использовать javascript для визуализации большего количества контента. 

function addToIndex() 
{
   localStorage.setItem('input', userInput .value)
}

Сценарий для страницы индекса будет выглядеть примерно так: 

var data = localStorage.getItem('input');
if (input) {
  document.querySelector('#contentstart').innerHTML = data;
}

Я собрал здесь простую демонстрацию. http://plnkr.co/edit/iAitGxtdsHwXowNg

0 голосов
/ 26 апреля 2020

Чтобы получить данные из формы в другом файле, вам потребуется серверный язык, такой как php. Таким образом, форма будет иметь такую ​​структуру 

<form action="external_file.php" method="get">
   <label>
      Enter something:
      <input type="text" id="userinput" name="user_input" required>
   </label>
   <input type="submit" id="submit" value="submitted">
</form>

Обратите внимание на атрибуты action="external_file.php и name="user_input", добавленные к элементу ввода. Тогда файл: external_file.php может иметь следующую структуру для получения содержимого из формы 

<?php
$input = $_GET["user_input"];
//do something with $input
echo 'The data you entered is: ' . $input;
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...