SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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>

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok the IFRAME page should look something like this.
    Example 4.jpg

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by studentofIT View Post
    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;
    Last edited by paul_wilkins; Nov 8, 2012 at 00:26.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by studentofIT View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by studentofIT View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Enthusiast
    Join Date
    Mar 2012
    Location
    Brisbane Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •