Как отправить форму с несколькими полями на сервер, а затем отобразить ее на другой вкладке на том же сайте? - PullRequest
Новая
       28

Как отправить форму с несколькими полями на сервер, а затем отобразить ее на другой вкладке на том же сайте?

0 голосов
/ 21 июня 2020

Рассмотрим следующий образец формы: 

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

Считайте, что он содержится на tabs bootstrap структурированной странице, например: 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
      </li>
    </ul>
    <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <form>
          <label for="fname">First name:</label><br>
          <input type="text" id="fname" name="fname"><br>
          <label for="lname">Last name:</label><br>
          <input type="text" id="lname" name="lname">
<input type="submit" action="/" aria-label="Submit">
        </form>
    </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
    </div>

В приведенном выше примере форма будет найдена на вкладке profile.

Как я могу отправить введенные данные полей формы обратно на сервер для сохранения, а затем отобразить на другой, другой вкладке, скажем, home tab?

Моя первая попытка заключалась в определении приложения. js с 

const express = require("express");
const bodyParser = require("body-parser");

    var items = [];, 
    
    const item = {fname: String, lname: String}; 
    
    items.push(item);

Теперь идея состоит в том, что когда пользователь нажимает кнопку submit, парсер тела считывает имена полей формы 'и отправляет их в массив, тогда массив должен отображаться на другой вкладке. Я не совсем уверен ... как структурировать это, вроде бы, я наполовину понимаю, как это работает, но просто не могу это сделать.

Что мне не хватает?

1 Ответ

0 голосов
/ 21 июня 2020

Если ваша цель - просто отобразить данные из вашей формы на другой странице вашего веб-сайта, не сохраняя их постоянно в базе данных Вы можете просто сохранить их в localStorage и получить доступ к localStorage на другой странице и отобразить их. 

//in your client-side js file get the fields from the dom
const firstName = getElementbyId("fname");
const lastName = getElementbyId("lname");

//when the user submits the form have a function that makes and object with the values of the inputs

const onSubmit = () =>{
    const userObj = {
      fName: firstName.value,
      lName: lastName.value
    }
    
    //then store the object as a string (with JSON.stringify) to your localStorage
    //localStorage only stores strings

    localStorage.setItem("userData", JSON.stringify(userObj))
}

//and make another function to run onLoad on the page you want to display it

const displayFunction = () =>{

   const userData = JSON.parse(localStorage.getItem("userData")) //you parse it back into an object with JSON.parse because it was stored as a string
   
   //you can do stuff with the data here as well like append it to an element
   //or you could store the data in a global variable to use it later.
 }

//just put the function on the tag of the home page
//say you want it when the body loads

<body onload="displayFunction()">

Если вы хотите, чтобы эти данные сохранялись, даже когда пользователь использует другое устройство, вы можете сохранить их в базе данных. mon goose хорошо работает с node-js, и вы можете бесплатно использовать атлас mongodb в качестве базы данных.

  • создать схему пользователя
  • создать маршрут загрузки
  • затем сделайте HTTP-запрос со стороны клиента и отправьте входные данные формы на свой сервер, обработайте их там и сохраните в БД
...