[SOLVED] Creating a form

[technotool]

hi all,

 

I have created a form with four sections (a, b,c,d).  each section has a specific textarea for dataentry (textarea-a, textarea-b, textarea-c, textarea-d).  I need to save all the data together as a single entry.  The data in parts mean nothing.  if all the form parts (textareas-a,b,c,d) are all on the same page it is no problem because they will all save at the same time to the MySQL database with a save button at the end of the form. 

 

My problem:

I would like to use a tab system(A, B, C, D) for each section(a, b,c,d) with a save button after textarea-d.  The tab system calls up a unique URL for each tab and on each URL is a part of the form (tabA-->textarea-a, tabB-->textarea-b, tabC-->textarea-c, tabD-->textarea-d). The hope is that the save button at the end would save all the textarea's from the different URL's.  I can certainly set-up the tabs and the textareas-->    I am looking for advice on how to set up the form so that the data from textarea-a, textarea-b, textarea-c,textarea-d are all saved with a singular save button after the last section(d) is completed.

 

Should I save each section before moving to the next section in a MySQL database and then make a final save after recalling the items from the database.  I think that will be inefficient.  Can this be done with Javascript. or Ajax.

 

your help with this design issue is greatly appreciated.

 

the technotool

[dropfaith]

it can be done with javascript or you can pass the data in a hidden field from tab to tab and just get the data from the urls.

 

<script type="text/javascript">//<![CDATA[
var sections = new Array('partOne', 'partTwo', 'partThree', 'partFour');
function init() {
    show('partOne');
    document.forms['contactform'].elements['person'].focus();
}
function show(section) {
    for (var i = 0; i < sections.length; i++) {
        if (sections[i] == section) {
            document.getElementById(sections[i]).style.display = 'block';
        } else {
            document.getElementById(sections[i]).style.display = 'none';
        }
    }
}
//]]></script>



<style>
label {width:300px;}
p {margin:0;padding:0;}
#partOne {

	height:auto;

	border-top:1px #000 dashed;
	border-bottom:1px #000 solid;
}
#partTwo, #partThree, #partFour{
	;
	height:auto;

	border-top:1px #000 dashed;
	border-bottom:1px #000 solid;
}
#partThree {
	z-index:2;
}

</style>

 

then all the divs are like this

<div id="partTwo" style="display:none">
  Content
</div>

 

would be a javascript option

[technotool]

Thanks so much. This is a much more efficient way to handle the data. I didn't want to have to keep sending and recieving data from the database. 

 

Sincerely,

theTechnotool.

 

 

 

[technotool]

Hi,

 

I have a successful implementation of the suggestion above. I am trying to make the clickable headings act like css tabs (color changes if active) using javascript. I have added an id to each clickable span element and put that into an array.  When I try to incorporate this into the function show() below. I cannot seem to get it right.  for example, I added the following code to the functions show():

colorChange(sectionHeadings[i], 'red');

as below but it is not working.  Any suggestions as to how I can turn the headings red when they are clicked.  much thanks

technotool.

 

 

<script type="text/javascript">
var sections = new Array('partOne', 'partTwo', 'partThree', 'partFour');
var sectionsHeadings = new Array('headingOne', 'headingTwo', 'headingThree', 'headingFour');
function init() {
    show('partOne');
    colorChange(sectionsHeadings[0], 'red');
    document.getElementById('subj_txtOutput').focus();

}
function show(section) {
    for (var i = 0; i < sections.length; i++) {
        if (sections[i] == section) {
            document.getElementById(sections[i]).style.display = 'block';
            colorChange(sectionHeadings[i], 'red');
        } else {
            document.getElementById(sections[i]).style.display = 'none';
            
        }
    }
}

function colorChange(id, val)
      {
           var e = document.getElementById(id);
           if(!(e))
           {
                alert("This change is not possible!");
                return(false);
           }
           e.style.color = val;
           return(true);
      } 


</script>
<html>

<body onload="init();">

<span id="headingOne" onClick="show('partOne');">DEMOGRAPHIC</span> |
<span id="headingTwo" onClick="show('partTwo')">PROCEDURE</span> |
<span id="headingThree" onClick="show('partThree') ">FINDINGS</span> |
<span id="headingFour" onClick="show('partFour')">FOLLOW-UP/SIG</span>

<html>