How to add text from a form to an iframe from adding forms

Question

There is a button to add new forms, how to add text to the iframe

The first form adds text to the scene. However, the following forms, which are created at the click of a button, do not display the text How to combine two codes? File reference 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>

Snippet doesn't work, an error is thrown at line 11 column 85 — Nino Filiu
– Nino Filiu, Commented Dec 29, 2018 at 11:29

brianpeiris · Accepted Answer · 2018-12-29 17:09:25Z

Firstly, if you have multiple textareas and buttons on the page, you can't use identical ids (#text and #fname) to refer to them. You either have to give them unique ids or use class names. Also, you'll have to listen to click events on the corresponding button, not just the first one.

The cleanest way to set this up is to create both the HTML textarea and the A-Frame text output in the same function:

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>

Collectives™ on Stack Overflow

How to add text from a form to an iframe from adding forms

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related