Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
Password Reminder
Register
Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 28th, 2013, 06:15 PM
Registered User
Points: 5, Level: 1
Points: 5, Level: 1 Points: 5, Level: 1 Points: 5, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Question Extending forms dynamically

Hi all, would like to convert this Javascript code versatile so it will be able to extend various inputs of a form.

javascript Code:
var instance = 0;

function moreFields() {

    // Check if there isn't more than 3 fields
    if(instance != 3) {
        instance++;
       
        // Create a child
        var clone = document.getElementById('water_src').cloneNode(true);
       
        // Make child unique
        clone.id += instance;
        clone.name += instance;
       
        clone.style.display = 'block';
   
        // Locate clone's home
        var insertHere = document.getElementById('water_drop');
        // Place clone in home
        insertHere.parentNode.insertBefore(clone,insertHere);
    }
}

window.onload = moreFields;

I want to do this by adding the parentHome & cloneHome parameters to the function and changing the 'water_src' & 'water_drop' to the corresponding ones.

javascript Code:
var instance = 0;

function moreFields() {

    // Check if there isn't more than 3 fields
    if(instance != 3) {
        instance++;
       
        // Create a child
        var clone = document.getElementById('water_src').cloneNode(true);
       
        // Make child unique
        clone.id += instance;
        clone.name += instance;
       
        clone.style.display = 'block';
   
        // Locate clone's home
        var insertHere = document.getElementById('water_drop');
        // Place clone in home
        insertHere.parentNode.insertBefore(clone,insertHere);
    }
}

window.onload = moreFields;

Unfortunately when I do this change the event handling function onload, when triggered, pass the Event object as first and only parameter. i.e. parentHome would be "[object Event]" (or similar) and cloneHome would be undefined.

What modification to the javascript could I do to prevent this issue?

HTML code that uses javascript code

html4strict Code:
<div id="water_src" name="water_src" style="display: none">
            <select>
                <option></option>
                <?php
                    while($row=mysql_fetch_array($result)) {
                        echo "\n\t\t\t\t<option value=".$row['water_ID'].">".$row['water_name']."</option>";
                    }
                    echo "\n";
                ?>
            </select>

                <input type="button" value="-"
                    onclick="
if(instance >
1) { instance--; this.parentNode.parentNode.removeChild(this.parentNode);}" />
                <input type="button" value="+"
                    onclick="moreFields();" />

                <br />
        </div>

        <form method="post" action="package_builder.php">

                <span id="water_drop"></span>
                <input type="submit" value="Send form" />
        </form>
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Dynamically load new forms into Frames MichaelS Classic ASP Professional 0 July 11th, 2006 02:59 PM
Is there a way to call forms dynamically reyboy Pro VB 6 11 July 7th, 2006 09:53 PM
Loading forms dynamically bmains C# 2005 1 November 30th, 2005 03:53 PM
Save Dynamically created forms DaDeViL Access VBA 2 August 17th, 2005 08:29 AM
Dynamically resizing forms siptah Access 4 May 11th, 2005 04:24 AM



All times are GMT -4. The time now is 12:47 PM.


Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.