homepage Welcome to WebmasterWorld Guest from 54.211.47.170
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
interactive webform
interactive webform
steve1978




msg:4535769
 10:13 pm on Jan 13, 2013 (gmt 0)

Hi there,

I'm looking for some example code to help me along the way.

I'm using Joomla 2.5.8 with aicontactsafe.
In the webform I would like to use an interactive webform.

I have 3 fields which are interessting to build.

Field 1)Country
Field 2)Type request: registration, basic, credit
Field 3)Speed request: immediate, normal, express, flash

1ste example:
First I choose a country, let's say Armenia.
Then I choose basic. Finaly I see only immediate and flash as an option.

2nd example:
First I choose a country, Russia.
Then I choose credit. Finaly I can choose between all speeds: immediate, normal, express, flash

So you see the 1ste choice defines, country, defines the choises I have in the request type field and this choice defines the speed request.

Are there any examples available to build my own webform?

Last thing though. I also want to show the price of my choise below in the form.
Is this possible?

Br,

Steve

 

daveVk




msg:4536102
 6:18 am on Jan 15, 2013 (gmt 0)

No knowledge of Joomla

Do not assume fields will always be filled in correct order.

3rd example
Russia,credit,express,Armenia

Either ask in sequence Or after any change mark invalids in red.

steve1978




msg:4536132
 9:45 am on Jan 15, 2013 (gmt 0)

Hi Dave,

Thanks for your reply.

It would be an idea to use sequence in filling the form.

Country, type request, speed request.

Do you have an example of a script to use?

Br,

Stevan

daveVk




msg:4536371
 3:16 am on Jan 16, 2013 (gmt 0)

OK Stevan and welcome to forum,

Can you post the code you would use ignoring dependencies ? It may give a clue as to how Joomla and aicontactsafe are involved.

You will also need a function that takes the current Country and Type values and produces lists of validTypes and validSpeeds.

steve1978




msg:4536475
 9:20 am on Jan 16, 2013 (gmt 0)

Hi Dave,

Thank you.
I must admit I'm not a programmer so I hope I understand.

Anyway. I switched to another webform extension within Joomla.
I'm using Breezingforms which gives more freedom to use code.

This is the testsite:
[is.enigma-webdesign.nl ]

Here goes:

Country:
------------------------------
name:CselRegion

Action script:
function ff_CselRegion_action(element, action)
{
country = ff_getElementByName('CselCountry');
state = ff_getElementByName('CselState');

var armeniaArray = new Array('Registration', 'Basic', 'Credit');

var azerbaijanArray = new Array('Registration', 'Basic', 'Credit');

var belarusArray = new Array('Registration', 'Basic', 'Credit');

var bosniaArray = new Array('Registration', 'Basic', 'Credit');

var bulgariaArray = new Array('Registration', 'Basic', 'Credit');

var croatiaArray = new Array('Registration', 'Basic', 'Credit');

var czechrepublicArray = new Array('Registration', 'Basic', 'Credit');

var latviaArray = new Array('Registration', 'Basic', 'Credit');

if (element.value == 'none') {
// drop countries
while (country.options.length > 0)
country.options[country.options.length-1] = null;
} else {
// get the matching array
var selectedArray = eval(element.value+'Array');

// drop supernumerous option
while (selectedArray.length < country.options.length-1)
country.options[country.options.length-1] = null;

// add the new options
country.options[0] = new Option('Selecteer type rapport', 'none', true, true);
for (var i=0; i < selectedArray.length; i++)
country.options[i+1] =
new Option(selectedArray[i], selectedArray[i]);
} // if

// drop states
while (state.options.length > 0)
state.options[state.options.length-1] = null;
} // ff_CselRegion_action

Validate script:
function ff_CselRegion_validation(element, message)
{
if (element.value=='none') {
if (message=='') message = "Please select region.\n";
ff_validationFocus(element.name);
return message;
}
return '';
}


Type request:
------------------------------
name:CselCountry

Actionscript:
function ff_CselCountry_action(element, action)
{
state = ff_getElementByName('CselState');

var stateArray = new Array('immediate', 'normal', 'express', 'flash');
if (element.value=='Registration') {
// drop supernumerous option
while (stateArray.length < state.options.length-1)
state.options[state.options.length-1] = null;

// add the new options
state.options[0] = new Option('Selecteer snelheid', 'none', true, true);
for (var i=0; i < stateArray.length; i++)
state.options[i+1] = new Option(stateArray[i], stateArray[i]);
} else {
while (state.options.length > 0)
state.options[(state.options.length - 1)] = null;
} // if
} //ff_CselCountry_action


Validationscript:
function ff_CselCountry_validation(element, message)
{
if (element.value=='none' || element.value=='') {
if (message=='') message = "Please select country.\n";
ff_validationFocus(element.name);
return message;
}
return '';
}


Speed Request:
------------------------------
name: CselState

Validationscript:
function ff_CselState_validation(element, message)
{
if (ff_getElementByName('CselCountry').value=='USA')
if (element.value=='none' || element.value=='') {
if (message=='') message = "Please select state.\n";
ff_validationFocus(element.name);
return message;
}
return '';
}


As you can see it's only set to validate but I want to show the pricing.

Currently I was only to get so far showing the countries and type request but I'm not sure how to continue.
What I want is to give speed request a value to show (euro field) depenand on the choice of Country you make.

I hope this helps a bit.

Br,

Stevan

daveVk




msg:4537010
 1:21 am on Jan 18, 2013 (gmt 0)

That looks promising.

The big picture is whenever Country, Type, Speed or other fields that effect price change, call a function similar to ff_CselRegion_action that
- recalculates valid type and speed option, say validTypes and validSpeeds arrays.
- updates options array on type(speed) selectors per validTypes(speeds).
- if current type(speed) not in valid... set to 'none'.
- if have data on all fields needed to calculate price, calculate it.
- update element where price is displayed with calculated price or blank value.

The individual field action functions will then have little else to do.

Hope that helps

steve1978




msg:4537281
 10:06 pm on Jan 18, 2013 (gmt 0)

Hi Dave,

You described exactly what I want to do.

Now all I need is an example script based on 2 countries.

Is there any way you could think with me to build a testscript based on this?

I'm not a programmer and looking up via Google is taking too long.

I can think with you and test the scripts. Just need some pointers as an example.

Br,

Stevan

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved