Блог

У меня есть меню продуктов питания, написанное на html, css и javascript, которое позволяет пользователю нажимать на элемент питания, и появляется форма, позволяющая им настраивать свой заказ. Я устанавливаю видимость формы div на hidden до тех пор, пока пользователь не нажмет на этот конкретный пункт питания в меню, а затем функция JavaScript позволит пользователю увидеть форму и настроить свой заказ. Функция также обновляет корзину покупок пользователя. Когда пользователь завершает заполнение формы, он выходит из формы, и это запускает функцию JavaScript, которая устанавливает видимость div обратно на hidden.

Проблема в том, что оно также скрывает и удаляет информацию, которая должна быть в их корзине покупок, и я не уверен, почему. Корзина покупок не находится в том же div, что и скрытая форма, и я явно установил видимость корзин покупок на видимую. Поэтому я не уверен на 100%, почему данные исчезают, когда я закрываю форму. Оно должно оставаться в корзине покупок. Вот пример моего html-кода:

 <div class="hidden-order" id="orderId>"
 <form method="post" id="orderForm">
  <div class="hidden-flex">
    <div class="hidden-text">
      <h2>header</h2>
      <p>food description
      </p>
    </div>
      <input class="img-btn" type="image" src="exit-icon.png" name="img" width="30"
         height="30" onclick="closeWindow('idOfWindowClosed')"/>
  </div>
      <img src="foodImg.png">
      <h4>Shell Choice</h4>
      <input type="radio" name="choice" value="choice1">
      Choice1<br>
      <input type="radio" name="choice" value="choice2">
      Choice2<br>
      <input type="radio" name="choice" value=choice3>Choice3<br>
<h4>Taco Preperation</h4>
<input type="radio" name="fooPrep" value="regular">Regular
  <p> <input class="add-price" type="radio" name="fooPrep" value="supreme">
    Supreme ( $0.70)</p><br>
  <h4>Extra Instructions</h4>
  <textarea class="t-area" rows="5" cols="50" name="extraInstructions">Allergies, Extra, Spicy ect.</textarea>
  <label for="quantity">Quantity</label>
  <input type="number" name="quantity" min="1" max="20"/>
  <input type="hidden" value="$2.10" name="price">
  <input type="hidden" value="Name Of Food Item" name="itemName">
  <input type="button" value="Add" id="submit-btn" onclick="addToCartClicked('doritos-locos-form')"/>
  

Поэтому, когда пользователь нажимает на кнопку, связанную с формой выше, данные отправляются в корзину покупок внизу моей HTML-страницы. Вот базовая корзина покупок:

 <div id="shoppingCart"></div>
  

Вот код css, связанный с моим классом hodden-order. Как вы можете видеть, я изначально установил видимость в hidden, чтобы форма отображалась только как, когда пользователь нажимает на div, связанный с этим продуктом питания:

 .hidden-order {display: block;
       visibility: hidden; /*make the element hidden here */
       position: fixed;
       bottom: 1em;
       border-radius: .2em;
       border-stype: solid;
       border-width: 1em;
       border-color: gray;
       top: 1em;
       z-index-9;
       background-color: #fff;
       margin: auto;
       max-width: 33.33%;
       overflow-y: scroll;
       padding: 1em;
      }
  

Далее, вот HTML-код и код JavaScript, который делает наложение формы видимым после нажатия этого div:

 <div class="food-item this-food-item" id="item-1" onclick="alertUser('item-1')">
  

JavaScript:

 function alertUser(id){
   var foodItem =  document.getElementById(id);
   foodItem.style.visibility = "visible";
   }
  

И затем, как только пользователь заполняет теперь видимую форму, он должен отображать данные в корзине покупок из-за этой функции:

 function addToCartClicked(id){
   var cartItem = document.getElementById(id);
   var theCart = document.getElementById('shoppingCart');
   var title = document.getElementById('title');
   var itemName = cartItem.itemName.value;
   htmlString  = "<p>Item: "   itemName   "</p>";
   theCart.innerHTML = htmlString;
   }
  

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

 #shoppingCart { display: block;
                visibility: visible;
              }
  

И, наконец, вот функция, которая возвращает оверлею значение hidden, когда пользователь нажимает кнопку exit в моей форме:

 function closeWindow(id){
   document.getElementById(id).style.visibility = "hidden";
   var theCart = document.getElementById('shoppingCart');
   theCart.style.visibility = "visible";
   }
  

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

На первом изображении пользователь переходит на страницу меню и нажимает на элемент. Корзина покупок пуста. На втором изображении они заполняют форму, которая отображается в виде наложения, и их выбор добавляется в корзину покупок. При выходе из формы overlay информация о корзине покупок полностью теряется. Я хочу, чтобы эта информация сохранялась даже после выхода из overlay.

Это потому, что <input type="image" /> ведет себя как кнопка отправки. Из документов

Элемент представляет собой замененный элемент (элемент, содержимое которого не генерируется или напрямую не управляется слоем CSS), который ведет себя почти так же, как обычный элемент, но с возможностями кнопки отправки.

Итак, вам придется предотвратить поведение по умолчанию с помощью event.preventDefault() .

Я подделал вашу форму, чтобы продемонстрировать решение.

 function closeWindow(event) {
  event.preventDefault();
}  

 <form>
<input type="image" src="https://dummyimage.com/50x50/000/fffamp;text=C" onclick="closeWindow(event)"/>
<input />
</form>