0

I'm making an app that submits posts, but I originally designed it with a textarea in mind, I've since put in an iframe to create a rich text field, set the display style to hidden for the textarea and wanted to know how I could modify it to use the iframe value.

HTML

<div id="textWrap">
      <div class="border">
        <h1>Start Writing</h1><br />
        <input id="title" placeholder="Title (Optional)">

        <div id="editBtns">
          <button onClick="iBold()">B</button>
          <button onClick="iUnderline()">U</button>
          <button onClick="iItalic()">I</button>
          <button onClick="iHorizontalRule()">HR</button>
          <button onClick="iLink()">Link</button>
          <button onClick="iUnLink()">Unlink</button>
          <button onClick="iImage()">Image</button>
        </div>

        <textarea id="entry" name="entry" rows="4" cols="50" type="text"  maxlength="500" placeholder="Add stuff..."></textarea>
        <iframe name="richTextField" id="richTextField"></iframe><br />
        <button id="add">Submit</button>
        <button id="removeAll" onclick="checkRemoval()">Delete All Entries</button>
        <ul id="list"></ul>
        <ul id="titleHead"></ul>
      </div><!--end of border div-->
    </div><!--end of textWrap-->

Here is the JS to submit the posts.

//target all necessary HTML elements
var ul = document.getElementById('list'),
    removeAll = document.getElementById('removeAll'),
    add = document.getElementById('add');
    //richText = document.getElementById('richTextField').value;

//make something happen when clicking on 'submit'
add.onclick = function(){
  addLi(ul)
};

//function for adding items
function addLi(targetUl){
  var inputText = document.getElementById('entry').value, //grab input text (the new entry)
      header = document.getElementById('title').value, //grab title text
      li = document.createElement('li'), //create new entry/li inside ul
      content = document.createElement('div'),
      title = document.createElement('div'),

      //textNode = document.createTextNode(inputText + ''), //create new text node and give it the 'entry' text

      removeButton = document.createElement('button'); //create button to remove entries

  content.setAttribute('class','content')
  title.setAttribute('class','title')
  content.innerHTML = inputText;
  title.innerHTML = header;

  if (inputText.split(' ').join(' ').length === 0) {
    //check for empty inputs
    alert ('No input');
    return false;
  }


  removeButton.className = 'removeMe'; //add class to button for CSS
  removeButton.innerHTML = 'Delete'; //add text to the remove button
  removeButton.setAttribute('onclick', 'removeMe(this);'); //creates onclick event that triggers when entry is clicked

  li.appendChild(title); //add title textnode to created li
  li.appendChild(content); //add content textnode to created li
  li.appendChild(removeButton); //add Remove button to created li

  targetUl.appendChild(li); //add constructed li to the ul
}

//function to remove entries
function removeMe(item){
  var deleteConfirm = confirm('Are you sure you want to delete this entry?');
  if (deleteConfirm){var parent = item.parentElement;
  parent.parentElement.removeChild(parent)}
};

function checkRemoval(){
  var entryConfirm = confirm('Are you sure you want to delete all entries?');
  if (entryConfirm){
    ul.innerHTML = '';
  }
};

demo I'm working on for reference.. http://codepen.io/Zancrash/pen/VemMxz

Zancrash
  • 75
  • 5

1 Answers1

0

you can use either local storage for passing iframe values to the parent DOM.

or ( use this to pass value from iframe to parent container )

var iFrameValue = $('#iframe').get(0).contentWindow.myLocalFunction();
var iFrameValue = $('#iframe').get(0).contentWindow.myLocalVariable;

From IFrame html

<script type="text/javascript">

var myLocalVariable = "text";

function myLocalFunction () {
    return "text";
}

</script>
vrn53593
  • 308
  • 1
  • 5