Входные строки обрабатываются браузером как текстовые объекты - PullRequest
Новая
       7

Входные строки обрабатываются браузером как текстовые объекты

0 голосов
/ 09 сентября 2018

У меня есть всплывающее окно, которое отображает вводимые пользователем формы для просмотра / редактирования перед отправкой. Вся информация извлекается и отображается без проблем, за исключением того, что значения полей ввода обрабатываются как текстовые объекты и поэтому не отображаются должным образом. Я знаю, ЧТО происходит, я просто понятия не имею, как это исправить. Я никогда не сталкивался с этой проблемой раньше. Должны ли значения быть сначала вставлены в строковую переменную или есть какая-то неясная проблема преобразования, о которой я не знаю? Снимок сделан из последней версии Chrome ... Второе изображение показывает, что рассматриваемый текст рассматривается как отдельный объект от текста рядом с ним ... enter image description here Browser is seeing text as empty object/element

function chkThis() {
  var isChk = document.getElementsByName('agecert');
  var isSub = document.getElementById('submit');
  isSub.disabled = !isChk[0].checked;
}

function shPop() {
  var shPop = document.getElementById("myOlay");
  var rvwBdy = '';
  rvwBdy = '<p><b>Name:</b> ' + document.getElementById('fname').value + ' ' + document.getElementById('lname').value + '<BR />' +
    '<B>Email:</B> ' + document.getElementById('email').value + '<BR />' +
    '<B>Phone:</B> ' + document.getElementById('phone').value + '<BR />' +
    '<B>Address:</B> ' + document.getElementById('maddr').value + '</p>';

  shPop.classList.remove('dk-hidden');
  shPop.classList.add('dk-show');
  document.getElementById('reviewHere').innerHTML = rvwBdy;
}

function hdPop() {
  var hdPop = document.getElementById("myOlay");
  hdPop.classList.remove('dk-show');
  hdPop.classList.add('dk-hidden');
}
:root {
  --dkVar: '';
}

* {
  margin: 0;
  padding: 0;
  position: absolute;
  font-family: sans-serif;
  @include pre1(box-sizing, border-box);
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #8080FF;
}

a {
  text-decoration: none;
}

.dk-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dk-vertz {
  top: 50%;
  transform: translateY(-50%);
}

.dk-hortz {
  left: 50%;
  transform: translateX(-50%);
}

#dk-wrapper {
  width: 100%;
  height: 100%;
}

#dk-logo {
  top: 0;
  width: 100%;
  height: 125px;
}

#dk-menu {
  top: 125px;
  left: 0;
  min-width: 500px;
  width: 100%;
  height: 75px;
  background: #338833;
  text-align: center;
}

#dk-body {
  top: 210px;
  width: 75%;
  height: 75%;
  background: rgba(192, 192, 255, 0.8);
  border-radius: 25px;
}

h1,
h2,
h3,
h4,
h5 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dk-logo {
  width: 400px;
}

.dk-order {
  min-width: 500px;
  min-height: 700px;
}

.input {
  width: 175px;
  height: 40px;
  padding-left: 20px;
  margin-left: 20px;
  display: inline-block;
  border: 2px solid #309930;
  border-radius: 5px;
  line-height: 40px;
  z-index: 9;
  position: relative;
  font-size: 18px;
}

.label {
  display: block;
  margin-left: 30px;
  position: relative;
  font-size: 8pt;
  color: red;
  z-index: 10;
}

.icon {
  height: 35px;
  width: 35px;
  padding-top: 3px;
  background: #fff;
  border: 2px solid #309930;
  border-radius: 100%;
  z-index: 10;
  font-size: 32px;
  text-align: center;
  overflow: hidden;
}

.input:focus {
  border: 2px solid #30ff30;
  background: #ffddff;
}

#inp1 {
  top: 15px;
  left: 25px;
  width: 175px;
  position: absolute;
}

#inp2 {
  top: 15px;
  left: 190px;
  width: 175px;
  margin-left: 50px;
}

#inp3 {
  top: 85px;
  left: 25px;
  width: 175px;
}

#inp4 {
  top: 85px;
  left: 190px;
  width: 175px;
  margin-left: 50px;
}

#inp5 {
  top: 150px;
  left: 25px;
}

.dk-mydiv {
  top: 210px;
  width: 500px;
  height: 750px;
  position: absolute;
  border: none;
  background: #bbbbff;
  border-radius: 25px;
}

.maddr {
  width: 400px;
  height: 125px;
  line-height: 22px;
}

button {
  color: #555555;
  font-weight: bold;
  width: 100px;
  height: 35px;
  background: #99ff99;
  border: 1px solid #44aaee;
}

button:enabled {
  transition: all 250ms linear 0.0ms;
}

button:disabled {
  color: #bbbbbb;
  font-weight: bold;
  width: 100px;
  height: 35px;
  border: #44aaee;
  background: #555555;
  opacity: 0.75;
  cursor: not-allowed;
}

button:hover:enabled,
button:focus:enabled {
  color: black;
  font-weight: bold;
  width: 100px;
  height: 35px;
  background: #55ff55;
  border: 2px solid #44aaee;
  border-radius: 35px;
  box-shadow: 5px 3px 1px 1px rgba(0, 0, 0, .75);
}

.product {
  width: 40px;
  top: 10px;
  left: 10px;
  position: absolute;
  height: 25px;
  margin-left: 0px;
  padding: 0px;
}

.inplab {
  top: 15px;
  left: 60px;
  position: absolute;
}

#dk-intro {
  top: 210px;
  left: 15px;
}

#myOlay {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: block;
  z-index: 999;
  position: fixed;
}

#cbReview {
  min-width: 500px;
  height: 75%;
  position: fixed;
  background: white;
  color: black;
  border: 2px solid #0055cc;
  border-radius,
  25px;
  z-index: 1000;
}

.dk-hidden {
  visibility: hidden;
}

.dk-show {
  visibility: visible;
}
<div class="dk-mydiv dk-hortz">
  <form name="cbOrder" method="post" action="php/cb-cont.php" enctype="multipart/form-data">
    <div id="dk-order class=" dk-hortz "">
      <div id="inp1">
        <i class="icon fas fa-user"></i>
        <label for="fname" class="label">&nbsp;*Required</label>
        <input name="fname" id="fname" type="text" class="input chkIt" size="30" value="" placeholder="First Name" tabindex="1" />
      </div>
      <div id="inp2">
        <i class="icon fas fa-user"></i>
        <label for="lname" class="label">&nbsp;*Required</label>
        <input name="lname" id="lname" type="text" class="input chksssaIt" size="30" value="" placeholder="Last Name" tabindex="2" />
      </div>
      <div id="inp3">
        <i class="icon fas fa-envelope" style="font-size: 20px;padding-top: 5px"></i>
        <label for="email" class="label">&nbsp;*Required</label>
        <input name="email" id="email" type="text" class="input chkIt" size="30" value="" placeholder="Email Address" tabindex="3" />
      </div>
      <div id="inp4">
        <i class="icon fas fa-phone" style="font-size: 20px;padding-top: 5px;"></i>
        <label for="phone" class="label">&nbsp;</label>
        <input name="phone" id="phone" type="tel" class="input" size="10" placeholder="Phone Number" tabindex="4" />
      </div>
      <div id="inp5">
        <i class="icon fas fa-home" style="font-size: 20px;padding-top: 5px"></i>
        <label for="maddr" class="label">&nbsp;*Required</label>
        <textarea name="maddr" id="maddr" class="input maddr chkIt" cols="60" rows="5" placeholder="Mailing Address" tabindex="5"></textarea>
      </div>

      <div style="left: 50px;top: 300px;position: absolute;width: 400px;height: 150px;">
        <p style="font-size: 10pt;">NOTICE: At present, there is a limit of ten (10) items total per order.</p>
      </div>

      <div style="left: 50px;top: 325px;position: absolute;width: 200px;height: 150px;">
        <input name="whorse" id="whorse" type="number" size="3" class="input product" placeholder="Qty." value="0" tabindex="6">
        <label for="whorse" class="inplab">White Horse</label>
        <a href="img/whorse.jpg" data-lightbox="kratom"><img src="img/whorse-thumb.jpg" style="top: 50px;left:15px;" tabindex="99"></a>
      </div>

      <div style="left: 250px;top: 325px;position: absolute;width: 200px;height: 150px;">
        <input name="wbbee" id="wbbee" type="number" size="3" class="input product" placeholder="Qty." value="0" tabindex="7">
        <label for="wbbee" class="inplab">White Bumblebee</label>
        <a href="img/wbbee.jpg" data-lightbox="kratom"><img src="img/wbbee-thumb.jpg" style="top: 50px;left: 20px;" tabindex="100"></a>
      </div>

      <div style="left: 50px;top: 500px;position: absolute;width: 400px;height: 150px;">
        <input name="agecert" type="checkbox" onclick="chkThis();" style="float: left;height: 20px;width: 25px;border: 1px solid red;" tabindex="8">
        <p style="font-size: 10pt;left: 30px;position: absolute;text-align: justify;">I certify that I am 18 years of age or older and legally able to enter into a contract of purchase and/or other negotiations in the State of Louisiana. I also certify my understanding that the personal information collected from me by Cypress
          Botanicals will be used for the sole and express purpose of order fulfillment and will never be made available to any third parties.</p>
      </div>

      <div name="subres" style="width: 400px;height: 50px;top: 635px;left: 30px;position: relative;border: none;">
        <button name="submit" type="button" onclick="shPop();" id="submit" style="left: 65px;" tabindex="9" disabled="disabled">Review Order</button>
        <button name="reset" type="reset" style="left: 245px;" tabindex="10">Reset Form</button>
      </div>
    </div>
</div>
<div id="myOlay" class="dk-hidden">
  <div id="cbReview" class="dk-center">
    <p>Please review your order information to make sure everything is correct. Orders with incomplete or invalid information will not be processed. Please remember that there is an order limit of ten (10) units TOTAL. Thank you!
    </p>

    <div id="reviewHere" style="width: 75%;top: 125px;left: 25px;"></div>

    <p style="left: 15px;bottom: 15px;"><input type="button" onclick="hdPop()" value="Edit Info" /></p>
  </div>
</div>
</form>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...