allow submitter to add multiple records for same fields group

mohdqazi · Dec 27th, 2012, 10:53 AM

Hello,

I am new to form tools.

I was trying form tools and was wondering if it's doable to have the submitter inserts multiple records for the same groups fields.

for example, imagine a holiday/tour/travel application, the customer is asked number of passengers, he can select this using radio button or from list, if the answer is three, the form should allow the customer inserts customer details (gender, age, ..) three times.
Customer is a group of fields (gender, age, ..)

I will be using internal forms. for agents to insert the details, not customers actually.

Also which browser best supported for formtools, firefox or internet explorer.

Looking forward to hear the answer.

Kazi

bills · Dec 27th, 2012, 1:39 PM

When you create a form, you define the number of fields. It can not automatically increase that number based on the number of passengers. (although you can always manually add additional fields after the form is initialized)

You would need to create a form with enough fields to accommodate all possibilities for a given customer. For example, 5 passengers X 3 detail fields (age, gender,..) = 15 fields.

If you used an external form, you could have the extra fields show as needed based on the number of passengers selected using javascript and hidden divs.

FT works great in both IE and FF.

mohdqazi · Dec 27th, 2012, 10:43 PM

Thanks bills,

Can you guide me how to convert this form to external one. i mean which option should i select direct or code, i selected direct it asks me Form URL to test .. I am unable to find form URL .. I created only one form named Voucher ? What would be the form URL ?

Thanks in advance ..

Regards,
Kazi

bills · Dec 28th, 2012, 5:20 AM

Hi Kazi,

Forms created inside of FT cannot be converted for use on your site. They are internal.

Some options are:

1. Re-create your form from scratch, upload to your webserver, and connect it to FT. (this will be the URL to test) Use direct unless you need the API functions.

2. Use FT's Form Builder Module to create the form for your website. http://modules.formtools.org/form_builder/ (this is a Premium Module, but well worth the price...will save you a lot of time)

3. Use an online form generator such as http://www.phpform.org/ then upload to your webserver and connect it to FT.

Hope this helps.

Bill

mohdqazi · Dec 28th, 2012, 8:45 AM

Thanks again Bill, I really appreciate your help.

Now I created a small form with three fields using phpform.org, upload it to my web server, added external form in formtools, selected Direct option, tested submission. workds wonderful. Thank you so much.

Now back to my target.

Can you please suggest a good working example of PHP and JavaScript based on my requirements in the first email. I mean using javascript and hidden divs.

I would really appreciate your help and working example.

Kazi

bills · Dec 28th, 2012, 1:01 PM

Kazi,

Here is a working example of showing/hiding divs using javascript.

It shows or hides divs (based on div id, in this case fieldset id's). If you select a button, such as two passengers, it will show you two sets of fields for your passenger data.

You will need to create your form, with as many sets of fields as you will think you may need, then select the maximum number of passengers, and fill in ALL fields during your FT initial test. This way FT will create the proper number of fields in the FT database. (you can do this after manually, but it is time consuming)

You can copy everything below this line and create a new document to upload and test before adding the form to FT. I purposely formatted the code to make the example easier to follow.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Show/Hide Divs</title>
<script type="text/JavaScript">
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{ document.getElementById(id).style.display = ''; }
}
function hide(id)
{ document.getElementById(id).style.display = 'none'; }
</script>
</head>

<body onLoad="javascript:hide('passenger1_info');javascript:hide('passenger2_info');javascript:hide('passenger3_info');return true;">

Passengers

<form action="" enctype="multipart/form-data" method="post">

<label for="p0">None:</label>
<input name="passengers" type="radio" id="p0"
onfocus="
hide('passenger1_info');
hide('passenger2_info');
hide('passenger3_info');
return true;"
/>
<label for="p1">One:</label>
<input name="passengers" type="radio" id="p1"
onfocus="
show('passenger1_info');
hide('passenger2_info');
return true;"
/>

<label for="p2">Two:</label>
<input name="passengers" type="radio" id="p2"
onfocus="
show('passenger1_info');
show('passenger2_info');
hide('passenger3_info');
return true;"
/>

<label for="p3">Three:</label>
<input name="passengers" type="radio" id="p3"
onfocus="
show('passenger1_info');
show('passenger2_info');
show('passenger3_info');
return true;"
/>



<fieldset id="passenger1_info">
<legend>Passenger 1</legend>

<label for="passenger1_age">Age</label>
<input type="text" name="passenger1_age" id="passenger1_age" />

<label for="passenger1_gender">Gender</label>
<input type="text" name="passenger1_gender" id="passenger1_gender" />

<label for="passenger1_other">Other</label>
<input type="text" name="passenger1_other" id="passenger1_other" />
</fieldset>



<fieldset id="passenger2_info">
<legend>Passenger 2</legend>

<label for="passenger2_age">Age</label>
<input type="text" name="passenger2_age" id="passenger2_age" />

<label for="passenger2_gender">Gender</label>
<input type="text" name="passenger2_gender" id="passenger2_gender" />

<label for="passenger2_other">Other</label>
<input type="text" name="passenger2_other" id="passenger2_other" />
</fieldset>



<fieldset id="passenger3_info">
<legend>Passenger 3</legend>

<label for="passenger3_age">Age</label>
<input type="text" name="passenger3_age" id="passenger3_age" />

<label for="passenger3_gender">Gender</label>
<input type="text" name="passenger3_gender" id="passenger3_gender" />

<label for="passenger3_other">Other</label>
<input type="text" name="passenger3_other" id="passenger3_other" />
</fieldset>

</form>
</body>
</html>

mohdqazi · Dec 29th, 2012, 6:20 AM

Thanks Bill for the example. I really appreciate your time and efforts.

I understand the example logic. in the form tools, I created one field (Number of Passengers)with drop down selection (1,2,3).

I created after 3 grouped fields (name, age, gender). in total 9 fields.

Now where to put this code in order to let the user see 2 grouped fields if he selected 2 in the drop down selection.

Thanks a lot again.

Kazi

bills · Dec 30th, 2012, 4:59 AM

Kazi,

You don't need to add the 1,2,3 dropdown it FT as this is only used in the external form to show the desired number of fields for passengers. The code I sent needs to be placed in the external form you created. In the external form, create the maximum number of fields you could need.

Then use that form to connect to FT so it will create the necessary fields in FT. Otherwise you will need to manually match the external form field names with the fields created in FT.

Bill

mohdqazi · Dec 31st, 2012, 6:08 AM

Thanks a lot Bill for your time and efforts.

I Just copy the html code you wrote above. save it as form.html
created new directory in form tools root, named forms
i uploaded the file.
I can now access http://www.mywebsite.com/forms/form.html

Selected New form --> external --> direct --> tested submission successfully --> fantastic.

Now the Issues I have.
I want to publish this form, but for clients only to insert data; how ? for now any one can insert data without logging in to FT.
Also although I mentioned to in FT that all fields are required. still is accepting forms with an empty fields.
If I want to instruct them to login and and then fill up the external form create by FT. that's fine but the Show/Hide Divs function is not working as desired. it shows all fields are required to be inserted even the radio button is selected 1

Am I doing something wrong.

Please guide if so.

Again, I am very thankfull to you.

Kazi

bills · Jan 7th, 2013, 6:50 AM

Hi Kazi,

One method is when the user goes to the form page, have it log them in using the data stored in their user account. Not sure how to do this...possibly using FT loginAPI?

Another way might be to not link to the form page on any other webpage (no inbound links). Then remove the form page from being indexed so it can't be found with search engines.
http://support.google.com/webmasters/bin...35301&rd=1
http://www.online-tech-tips.com/google-s...gle-index/

Setting a field to required in FT has no effect on your external forms.
Here is how to add validation rules to your external site: http://docs.formtools.org/tutorials/js_v...page=index

Once they are logged in, there is a link to both the external form (for submitting) and to the submitted data (for editing).

Only the external form will utilize the js hide divs. The internal form is basically a way to view and edit what the user has submitted.

Is the external form showing all fields regardless of radio button status?

If you post the code or PM me a link to the form, I can take a quick look.

Bill

FORUMS