technotool Posted November 10, 2008 Share Posted November 10, 2008 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 Link to comment https://forums.phpfreaks.com/topic/132161-solved-creating-a-form/ Share on other sites More sharing options...
dropfaith Posted November 10, 2008 Share Posted November 10, 2008 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 Link to comment https://forums.phpfreaks.com/topic/132161-solved-creating-a-form/#findComment-686909 Share on other sites More sharing options...
technotool Posted November 10, 2008 Author Share Posted November 10, 2008 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. Link to comment https://forums.phpfreaks.com/topic/132161-solved-creating-a-form/#findComment-687063 Share on other sites More sharing options...
technotool Posted December 10, 2008 Author Share Posted December 10, 2008 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> Link to comment https://forums.phpfreaks.com/topic/132161-solved-creating-a-form/#findComment-711149 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.