SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple functions in one javascript?

    Hi, I'M new to javascript and i seriously need help urgently. Here are the problems.

    1. I have 2 functions inside one javascript but however when i call this 2 method on different buttons when i click on it both give me this error, "Object Expected". However, if i remove one of the function the another function works. How am i going to create multiple functions in one javascrip?

    2. I will like to create dynamic fields for multiple different naming txtbox.
    for e.g. user will key in the No. of people information to enter, if user key in 1, Name txtbox, Sex txtbox and Add txtbox will appear. On the other hand if user key in 2 it will appear 2 sets of the txtbox.

    help pls

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you post what you already have? This way we can show you where its going wrong and point out how to fix it.


  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    With the second question, I presume that you'll want to update the number of people that the form has, so if someone changes the number to a higher or lower value, then the form should update itself.

    Code html4strict:
    <form id="peopleInfo">
    	<p><label>How many people to enter data for? <input type="text" name="people"></label></p>
    </form>

    With the following code, I've made sure that the functions are small and easy to understand. This will help you to more easily understand what they do, and more importantly, make it easier to adjust their behaviour to fit your needs.

    These are some helper functions that are used by the rest of the code.

    Code javascript:
    function getFieldNumber(el) {
    	// Takes from "name2" the value "2"
    	// and returns it as a number 2
    	var digits = el.name.match(/\.*(\d+)/)[1];
    	return parseInt(digits, 10);
    }
    function upUntilParentTag(el, tag) {
    	// Climbs the DOM until it gets to a child with a given parent tag.
    	// Useful for going up until you get to a top section.
    	while (el.parentNode.nodeName !== tag) {
    		el = el.parentNode;
    	}
    	return el;
    }
    function insertAfter(target, els) {
    	// The opposite of insertBefore
    	// places content directly after the target
    	if (target.nextSibling) {
    		target.parentNode.insertBefore(els, target.nextSibling);
    	} else {
    		target.parentNode.appendChild(els);
    	}
    }

    These functions create different sets of html code

    Code javascript:
    function newFieldset(text) {
    	// Creates an empty fieldset
    	// <fieldset>
    	//     <legend>text</legend>
    	// </fieldset>
    	var fieldset = document.createElement('fieldset'),
    	legend = document.createElement('legend'),
    	legendText = document.createTextNode(text);
    	legend.appendChild(legendText);
    	fieldset.appendChild(legend);
    	return fieldset;
    }
    function newLabelledTextbox(name, labelText) {
    	// example: <p><label>labelText <input type="text" name="name"></p>
    	var p = document.createElement('p');
    	var label = document.createElement('label');
    	var input = document.createElement('input');
    	var text = document.createTextNode(labelText + ' ');
    	input.type = 'text';
    	input.name = name;
    	label.appendChild(text);
    	label.appendChild(input);
    	p.appendChild(label);
    	return p;
    }

    These functions provide the higher-level smarts to handle adding and removing people

    Code javascript:
    function getFieldsByName(form, name) {
    	// Search form for fields that are named "Name1", "Name2", etc
    	var fields = [],
    		regex = new RegExp('^' + name),
    		els = form.getElementsByTagName('input'),
    		el,
    		i;
    	for (i = 0; i < els.length; i += 1) {
    		el = els[i];
    		if (el.name) {
    			if (regex.test(el.name)) {
    				fields.push(el);
    			}
    		}
    	}
    	return fields;
    }
    function getPersonFields(form) {
    	// Gets all name fields for people in the form
    	return getFieldsByName(form, 'name\\d+');
    }
    function lastPerson(form) {
    	// From person fields with names of ["name1", "name2", "name3"]
    	// will return the "name3" field
    	var els = getPersonFields(form);
    	return els[els.length - 1];
    }
    function newPerson(number) {
    	// Creates a fieldset containing several form elements
    	var els = newFieldset('Person ' + number);
    	els.appendChild(newLabelledTextbox('name' + number, 'Name ' + number));
    	els.appendChild(newLabelledTextbox('sex' + number, 'Sex ' + number));
    	els.appendChild(newLabelledTextbox('add' + number, 'Add ' + number));
    	return els;
    }
    function newPeople(form, amount) {
    	// Creates a set of uniquely numbered form elements for people
    	var 
    		el = lastPerson(form),
    		els = document.createDocumentFragment(),
    		number,
    		i;
    	number = el ? getFieldNumber(el) : 0;
    	for (i = 0; i < amount; i += 1) {
    		number += 1;
    		els.appendChild(newPerson(number));
    	}
    	return els;
    }
    function addPeople(form, amount) {
    	// Places a certain number of new people below existing people
    	var els = newPeople(form, amount),
    		el = lastPerson(form) || form.elements.people;
    	insertAfter(upUntilParentTag(el, 'FORM'), els);
    }
    function removePeople(form, amount) {
    	// Removes a certain number of people from the bottom of the form
    	var i,
    		el;
    	for (i = 0; i < amount; i += 1) {
    		el = upUntilParentTag(lastPerson(form), 'FORM');
    		if (el) {
    			el.parentNode.removeChild(el);
    		}
    	}
    }
    function updatePeople() {
    	// add or remove people fields from form to match provided value
    	var form = this.form,
    		existingPeople = getPersonFields(form).length,
    		amount = this.value - existingPeople;
    	if (amount === 0) {
    		return;
    	}
    	if (amount > 0) {
    		addPeople(form, amount);
    	} else {
    		removePeople(form, -amount);
    	}
    }

    And finally, this script attaches the updatePeople() function to the form.

    Code javascript:
    window.onload = function () {
        var form = document.getElementsById('peopleInfo');
        form.elements.people.onblur = updatePeople;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •