Forums

Hi everybody, I'm new here

I read some topics here, and really impressed about fast and accuracy support. I used RSforms but when I found ChronoForms, I decided to use it. Althought I'm using trial version now, but for sure, I'll buy a license.

But I have a bit complicate problem. I want to use ChronoForms to build CVonline feature for my site, so it requires

- A multi-pages form ( I solved that )
- Putting table in form
- Can save and display information client input

You can see the picture. hope u understand my issue.



Do anybody have any suggestions ? I'm not good in PHP and Javascript.

Thanks in advance

Hi nuphero,

It's the table at the bottom that you want to add? A bit tricky - creating the list is easy enough - the edit window is more difficult. My immediate reaction is to suggest that you use the MooTools accordion to open up and close a series of subforms. Ther'e's a form of mine here that does something like that with the Team Members sections.

Bob

Faster than I expected 😀. Thx for fast reply.

I understand your idea, it's pretty cool. I can limit the numbers of infomations clients input based on how many accordion tabs I created. Right ?
Yeah, it's a good solution, but the database will increase.

- The best solution is it can do exactly as above image
- The good solution is Save, Delete button and the table still remain
- The acceptable solution is your idea, using accordion tabs.

if you have time, plz find the good solution. If not, plz show me more specific of Accordion way. Thx😀


Here the source code of this site, the part from Save button to end of table.

						<div id="actionInsert" style="float:left">
							<label><!-- --></label>
							<input name="btn_save" type="button" value="Save" onclick="addExperience()" style="width:70px; margin-left:10px" /> 
						</div>
						<div id="actionEdit" style="display:none; float:left">
							<label><!-- --></label>
							<input name="btn_edit" type="button" value="Save" onclick="editExperience(document.frm.entryid.value)" style="width:70px; margin-left:10px" /> 
							<input name="btn_back_edit" type="button" value="Cancel" onclick="showActionInsert()" style="width:70px" />
						</div>

						<div id="loadingImage" style="float:left; visibility:hidden; padding-left:10px"><img src="http://images.vietnamworks.com/loading.gif" alt="" /></div>
					  </td>
				  </tr>

				</table>
						
				</div><!--end xboxcontent-->	
				<B class=xbottom><B class="xb3 blue_curve blue_bg_bottom"><!-- --></B><B class="xb2 blue_curve blue_bg_bottom"><!-- --></B><B class="xb1 blue_top"><!-- --></B></B>		
			</div><!-- end personal info -->
			
			<div id="err_yearsexperienceid3" style="display:none">
				<span class="txt_error">You just deleted your work experience. To attract employers, you should add your work experience.</span><br /><br />

			</div>
			
			<!-- begin my work experience -->
			<div class="box_corner">				
                    <B class=xtop><B class="xb1 blue_top"><!-- --></B><B class="xb2 blue_curve blue_title"><!-- --></B><B class="xb3 blue_curve blue_title"><!-- --></B></B>
					<div class="blue_bg_title" style="height:22px"><strong>My Work Experience</strong> <A class="hintanchor" 
            onmouseover="return escape('You should present first your most important and most recent work experience that is relevant to your applied job.')"><img onMouseover="javascript: this.src = 'http://images.vietnamworks.com/icon_q2_over.gif';" onMouseout="javascript: this.src = 'http://images.vietnamworks.com/icon_q2.gif';" src="http://images.vietnamworks.com/icon_q2.gif" width="22" height="22" alt="" border="0" style="vertical-align:middle;" /></A></div>
					<div id="divContent" class="white_content1">
					   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb_list">
						  <tr bgcolor="#e2e2e2" class="tb_title">

							<td width="42%">Company</td>
							<td width="40%">Title</td>
							<td width="18%">Modify</td>
						  </tr><tr class="td_bg">
							<td>sadá</td>
							<td>fdsdf</td>

							<td>
							  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tb_icon">
								  <tr>
									<td width="30%" rowspan="2"><a href='javascript:loadEditForm(556469)' title="Edit"><img src="http://images.vietnamworks.com/icon_edit.gif" width="14" height="15" alt="Edit" border="0" /></a></td>
									<td width="27%" rowspan="2"><a href="javascript:deleteExperience(556469)" title="Delete"><img src="http://images.vietnamworks.com/icon_del.gif" width="16" height="16" alt="Delete" border="0" /></a></td>
									<td width="43%"><img src="http://images.vietnamworks.com/space.gif" width="11" height="7" border="0" alt=""/></td>
								  </tr>
								  <tr>
									<td><img src="http://images.vietnamworks.com/space.gif" width="11" height="7" border="0" alt=""/></td>

								  </tr>
								</table>
							</td>
						  </tr></table>					</div><!--end xboxcontent-->	
					<B class=xbottom><B class="xb3 blue_curve blue_bg_bottom"><!-- --></B><B class="xb2 blue_curve blue_bg_bottom"><!-- --></B><B class="xb1 blue_top"><!-- --></B></B>				
			</div><!-- end my work experience -->
			
			

If possible, I think you should add this as new feature of next version. Then ChronoForms should be perfect😀

Hi,

did you get it to save the record correctly and load the form when you click edit ?

Cheers
Max

Thx Max, I understand the process, but for me that way is pretty complicate, so I decided to using Accordion way. Thx GreyHead for the idea.

I spent 2 hours working on Accordion idea in a HTML editor, and it's worked.
But when i tried put it in ChronoForms, it didn't work. Maybe I don't know how to use ChronoForms well enough.

FormHTML

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>

<div id="vertical_nested_container" >
            
                <h3 class="vertical_accordion_toggle">Testing 1</h3>
                <div class="vertical_accordion_content">

                    <p>Testing only.</p>  	
                </div>
                
                <h3 class="vertical_accordion_toggle">Testing 2</h3>
                <div class="vertical_accordion_content">
                    <p>Testing only</p>   	
                </div>

        
                <h3 class="vertical_accordion_toggle">Testing 3</h3>
                <div class="vertical_accordion_content">
                    <p>Tesing only</p>  	
                </div>
                
                <h3 class="vertical_accordion_toggle">Testing 4</h3>
                <div class="vertical_accordion_content">
                    <p>Testing only</p>   	
                </div>
        
                <h3 class="vertical_accordion_toggle">Testing 5</h3>
                <div class="vertical_accordion_content">
                    <p>Testing only</p> 	
                </div>
                    
</div>

JavaScript

function loadAccordions() {
	var topAccordion = new accordion('horizontal_container', {
		classNames : {
			toggle : 'horizontal_accordion_toggle',
			toggleActive : 'horizontal_accordion_toggle_active',
			content : 'horizontal_accordion_content'
			},
		defaultSize : {
			width : 525
			},
		direction : 'horizontal'
		});
			
	var bottomAccordion = new accordion('vertical_container');
			
	var nestedVerticalAccordion = new accordion('vertical_nested_container', {
	  classNames : {
			toggle : 'vertical_accordion_toggle',
			toggleActive : 'vertical_accordion_toggle_active',
			content : 'vertical_accordion_content'
			}
			});
			
bottomAccordion.activate($$('#vertical_container .accordion_toggle')[0]);
topAccordion.activate($$('#horizontal_container .horizontal_accordion_toggle')[2]);
		}

I put CSS information into template's CSS file, too. I don't know why in Chronoforms it did'nt work. It seems the js file can't be loaded. Like this

http://nguyengiangnam.net/test/index.php?option=com_chronocontact&chronoformname=test

I'm using code of this site

http://stickmanlabs.com/accordion/

Hi nuphero,

Probably because you've used the Prototype accordion. Prototype is not compatible with the Mootools library which Joomla and ChronoForms use.

Bob

Thx for your support, I tried another code, and it worked.