Как добавить текст из формы в iframe из добавления форм - PullRequest
Новая
       6

Как добавить текст из формы в iframe из добавления форм

0 голосов
/ 29 декабря 2018

Есть кнопка для добавления новых форм, как добавить текст в iframe

Первая форма добавляет текст в сцену.Однако в следующих формах, которые создаются одним нажатием кнопки, текст не отображается. Как объединить два кода?Ссылка на файл https://jsfiddle.net/Nickpo/q8jc1dgL/10/

$(document).ready(function() {
        var max_fields      = 10;
        var wrapper         = $(".container1");
        var add_button      = $(".add_form_field");

        var x = 1;
        $(add_button).click(function(e){
            e.preventDefault();
            if(x < max_fields){
                x++;
                $(wrapper).append('<div><textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p><input id="text1" type="submit" value="Отправить"></div>'); //add input box
            }
      else
      {
      alert('You Reached the limits')
      }
        });

        $(wrapper).on("click",".delete", function(e){
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
    });
$("#text1").click(function(e) {
  var wrapper = document.getElementById("text-container");
  var position = new THREE.Vector3(wrapper.children.length * -1.1, 0, 0);
  var newText = document.createElement('a-entity')
  newText.setAttribute('position', position)
  newText.setAttribute("text", {
    "color": "white",
    "align": "center",
    "value": document.querySelector('#fname').value
  })
  wrapper.appendChild(newText)
  return false
});
form {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>


<form name="myForm" href="" onsubmit="text1"  height="440">

   <textarea type="text" value="text" name="fname" id="fname" cols="20" rows="3"></textarea></p>
  <input id="text1" type="submit" value="Отправить">
  <div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:4px; font-weight:bold;">+ </span></button>
<div><input type="text" name="mytext[]"></div>

</div>

</form>

 <div class="container1">
<button class="add_form_field">Add New Field &nbsp; <span style="font-size:4px; font-weight:bold;">+ </span></button>
<div><input type="text" name="mytext[]"></div>

</div>

<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5">
    <a-entity id="output" text="value: output; align: center;" position="0 0 0"></a-entity>
  </a-entity>
</a-scene>

1 Ответ

0 голосов
/ 29 декабря 2018

Во-первых, если у вас есть несколько текстовых областей и кнопок на странице, вы не можете использовать идентичные идентификаторы (#text и #fname) для ссылки на них.Вы должны либо дать им уникальные идентификаторы, либо использовать имена классов.Кроме того, вам нужно будет прослушивать события нажатия на соответствующей кнопке, а не только на первой.

Самый простой способ настроить это - создать текстовую область HTML и текстовый вывод A-Frame вта же функция: 

function createTextArea(wrapper) {
  const newTextArea = $(`
    <div>
      <textarea type="text" value="text" name="fname" class="inputText" cols="20" rows="3"></textarea>
      <input class="sendButton" type="submit" value="Отправить" />
    </div>
  `);
  wrapper.append(newTextArea);
  const inputText = newTextArea.find(".inputText");
  const sendButton = newTextArea.find(".sendButton");

  var aframeWrapper = document.getElementById("text-container");
  const index = aframeWrapper.children.length;
  var position = new THREE.Vector3(index * -1.1, 0, 0);
  var newText = document.createElement("a-entity");
  newText.setAttribute("position", position);
  newText.setAttribute("text", {
    color: "white",
    align: "center",
    value: `output${index}`
  });
  aframeWrapper.appendChild(newText);

  sendButton.click(e => {
    e.preventDefault();
    newText.setAttribute("text", "value", inputText.val());
  });
}

$(document).ready(function() {
  var wrapper = $(".container1");
  var max_fields = 10;
  var add_button = $(".add_form_field");

  // create initial text area
  createTextArea(wrapper);

  var x = 1;
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      createTextArea(wrapper);
    } else {
      alert('You Reached the limits')
    }
  });

  $(wrapper).on("click", ".delete", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
});
form {
  position: absolute;
  z-index: 1;
  background: white;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>


<div class="container1">
  <form name="myForm" href="" onsubmit="text1" height="440">
    <div class="container1">
      <button class="add_form_field">Add New Field &nbsp; 
      <span style="font-size:4px; font-weight:bold;">+</span></button>
      <div><input type="text" name="mytext[]" /></div>
    </div>
  </form>
</div>


<a-scene background="color: black">
  <a-entity id='text-container' position="0 1.6 -0.5"></a-entity>
  <a-camera position="0 1.6 1"></a-camera>
</a-scene>
...