Adding video titles from IFRAME page to form fields on the hosting page

**studentofIT** · Nov 2, 2012 00:30

Hi to all you javascript gurus, I have a personal project that I'm building to teach myself web design. At the moment users can copy and paste video titles from the IFRAME page to the form fields on the hosting page and all works rather well, unfortunately this is a very slow and tedious process. What I would like to do is for the users to click on an "add" button that will automatically add the video title to the form field.
The IFRAME currently looks something like this.

HTML Code:

<html>
<body>
<h2>Video Playlist</h2>
  <ul>
    <li>   Title 1.mp4</li>
    <li>   Title 2.mp4</li>
    <li>   Title 3.mp4</li>
    <li>   Title 4.mp4</li>
    <li>   Title 5.mp4</li>
    <li>   Title 6.mp4</li>
    <li>   Title 7.mp4</li>
    <li>   Title 8.mp4</li>
    <li>   Title 9.mp4</li>
    <li>   Title 10.mp4</li>
  </ul>
</body>
</html>

And I would like it to look something like the next image.
Dam can't upload bitmaps sorry bout that.

The code for the form I'm using is this.

HTML Code:

<html>
<body>
<div id="apDiv4"><script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        fieldCount++;
        var newVideo = document.createElement('input');
        newVideo.type ='text';
        newVideo.name = 'video' + fieldCount;
        newVideo.id = 'video' + fieldCount;
        document.getElementById('fs').appendChild(newVideo);
      }

    </script>
<h1 align="center">
    <style1><span id="h1">Add Videos</span></style1>
<br>

  <form action="createplaylist.php" method="post" enctype="multipart/form-data" target="_self">
      <p>
        <label for="file" id="p">Please copy & paste video name</label>
      <input type="text" name="video" id="video">
      <fieldset id="fs">
        <legend id="p">Other videos you wish to add <br> (max=250)</legend><p></p>
        <button onclick="addVideo(); return false;">
          Add another video
        </button>
        <input type="text" name="video1" id="video1" max="250">
      </fieldset>
      <input type="submit" value="Save details">
    </form></div>
</body>
</html>

**studentofIT** · Nov 2, 2012 15:28

Ok the IFRAME page should look something like this.
Example 4.jpg

and the hosting page should look something like this.
Example 5.jpg

**studentofIT** · Nov 5, 2012 05:42

Wow 500 views and not 1 reply, totally amazing!!! Looks like I've done better than you guys, I've found some javascript that I was able to modify slightly, but unfortunately I can't get to work properly. I can currently add 1 title to the form field but when I try and add a second title it replaces the first and nothing gets entered to any of the following fields, I've tried a couple of different things like focus and even tried something like a stringCount but don't really know what i'm doing cause I'm just a dumbass aussie trying to have a bit of fun. Anyway heres the new code, this is the Iframe page.

HTML Code:

<html>
<body>
<h2>Video Playlist</h2>
  <ul>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 1.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 2.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 3.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 4.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 5.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value="  Title 6.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form> </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 7.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 8.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 9.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
    <li><form name="frm2" >
     <input type="text" name="resp" id="input" value=" Title 10.mp4" size="45"/>
     <input type="button" onclick="parent.input(this.form.resp.value);" value="Add" />
  </form>  </li>
  </ul>
</body>
</html>

And this is the parent page.

HTML Code:

<html>
<body>
<div id="apDiv4"><script type="text/javascript">
          var fieldCount = 1;
      function addVideo() {
        fieldCount++;
        var newVideo = document.createElement('input');
        newVideo.type ='text';
        newVideo.name = 'video' + fieldCount;
        newVideo.id = 'nameAnchor' + fieldCount;
        document.getElementById('fs').appendChild(newVideo);
      }
    function input(string){
    var name = string;
    document.getElementById('nameAnchor').value = name;
   }
    </script>
<h1 align="center">
    <style1><span id="h1">Add Videos</span></style1>
<br>

  <form action="createplaylist.php" method="post" enctype="multipart/form-data" target="_self">
      <p>
        <label for="file" id="p">Please click on the Add button next <br> to the video name you wish to add.</label>
      <input type="text" name="video" id="video">
      <fieldset id="fs">
        <legend id="p">Videos you wish to add <br> (max=250)</legend><p></p>
        <button onclick="addVideo(); return false;">
          More fields
        </button>
        <input type="text" name="video1" id="nameAnchor" max="250">
      </fieldset>
      <input type="submit" value="Save details">
    </form></div>
</body>
</html>

Any help as always is greatly appreciated. Cheers

**paul_wilkins** · Nov 7, 2012 23:04

Originally Posted by studentofIT

Any help as always is greatly appreciated. Cheers

A way to improve that is to remove the id attribute from the video fields, so that you easily access them via the form elements collection that already exists.

Code javascript:

<form id="addvideos" ...>
    ...
   <input type="text" name="video1" max="250">
</form>

Now we can easily add the video name to the field based on the fieldCount value, and then call addVideo() to add a new empty field.

Code javascript:

function input(name) {
    var form = document.getElementById('addvideos');
 
    form.elements['video' + fieldCount].value = name;
    addVideo();
}

You can also remove all of the inline onclick event attributes from the list of filenames, and instead use just one script.

Code:

<input type="button" onclick="..." value="Add">

This script listens for a click event, and if it's a button it makes use of the input value just before that button. Just ensure that the script is put at the end of the body, just before the </body> tag.

Code javascript:

function previousSiblingElement(el) {
    el = el.previousSibling;
    while (el && el.nodeType !== 1) {
        el = el.previousSibling;
    }
    return el;
}
function videoFileEventHandler(evt) {
    evt = evt || window.event;
    var targ = evt.target || evt.srcElement,
        el,
        value;
    if (targ.type === 'button') {
        el = previousSiblingElement(targ);
        parent.input(el.value);
    }
};
document.body.onclick = videoFileEventHandler;

**studentofIT** · Nov 8, 2012 00:19

Hey thnx Paul, I'll certainly give this a try. I don't understand it fully, so sorry I'm a dumbass, but I'm assuming that I replace all my javascript on the parent page with your top 2 lots of javascript, then remove my onclick attributes on the iframe page and replace it with your third lot of javascript at the bottom of that page, is that correct??

**paul_wilkins** · Nov 8, 2012 00:29

Originally Posted by studentofIT

Hey thnx Paul, I'll certainly give this a try. I don't understand it fully, so sorry I'm a dumbass, but I'm assuming that I replace all my javascript on the parent page with your top 2 lots of javascript, then remove my onclick attributes on the iframe page and replace it with your third lot of javascript at the bottom of that page, is that correct??

That sounds about right, yes.

The parts of both pages don't need to all be done together. You can just do one page, test that, and then do the other page. That can make it easier for you to preform troubleshooting if need be too, since there's less things that have the potential to cause confusion.

**studentofIT** · Nov 8, 2012 02:07

Thnx Paul, I tried what you suggested but I can't even get the first field to populate now. A couple of things though, on the iframe page I have a little bit of javascript in the head of the page which is also a formhandler, it works a select option for a drop down menu at the top of the page. The other thing is on the parent page is a frameset that adds the fields with the fieldCount function is that required or not now. Cheers mate

**paul_wilkins** · Nov 8, 2012 02:16

Originally Posted by studentofIT

Thnx Paul, I tried what you suggested but I can't even get the first field to populate now. A couple of things though, on the iframe page I have a little bit of javascript in the head of the page which is also a formhandler, it works a select option for a drop down menu at the top of the page. The other thing is on the parent page is a frameset that adds the fields with the fieldCount function is that required or not now. Cheers mate

Yes, frames do cause complications that can be hard to diagnose without having a matching set of code to work with.

**studentofIT** · Nov 8, 2012 02:24

Sorry Paul I got it wrong, Its not a frameset at all its a fieldset, second lot of code in post number 3, gee I'm a dumbass sometimes.

User Tag List

Thread: Adding video titles from IFRAME page to form fields on the hosting page

Thread Tools

Display

Adding video titles from IFRAME page to form fields on the hosting page

Bookmarks

Bookmarks

Posting Permissions