Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Splitting Single Form Into Multi-Page Or Tabbed

innerHTML

  • Please log in to reply
5 replies to this topic

#1 chrapm1

chrapm1

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts
  • Learning:C

Posted 05 July 2012 - 10:43 AM

I have a form that has way too many questions without a break and am trying to split it up into multiple pages or tabs. Whichever is easier, I want the user to stay on the current page while completing the form. Also where and how to add the size box in order to fit form cleanly into space where i want.

this is the code for two sections i want to split, also what do i need to add to the start and end of the forms?

<script type="text/javascript">
function validateForm(theForm) {
valid = true;
var fObj = document.forms['rfqForm'];
for (var i=0, len=fObj.elements.length; i < len; i++) {
if (fObj.elements[i].className.match(/required/igm)) {
switch (fObj.elements[i].type) {
case 'checkbox':
case 'radio':
var el = fObj[fObj.elements[i].name], isChecked = false, qp = '';
for (var k=0, klen=el.length; k < klen; k++) {
if (el[k].checked) {
if (el[k].className.match(/other/igm)) {
if (fObj[el[k].name+'_other_text'].value=='') {
qp='qs'+el[k].name.replace(/[-_]/gm,'');
} else {
isChecked=true;
}
} else {
isChecked=true;
}
break;
} else {
qp='qs'+el[k].name.replace(/[-_]/gm,'');
}
}
if (!isChecked) {
alert('Please answer: '+document.getElementById(qp).innerHTML.replace(/<!*[^<>]*>|\[required\]/igm,''));
return false;
}
break;
case 'select-one':
case 'select-multiple':
case 'text':
case 'textarea':
var el = fObj[fObj.elements[i].name], isEmpty = true, qp = '';
if (el.value != '') {
isEmpty = false;
} else {
qp = 'qs' + el.name.replace(/[-_]/gm,'');
}
if (isEmpty) {
alert('Please answer: '+document.getElementById(qp).innerHTML.replace(/<!*[^<>]*>|\[required\]/igm,''));
return false;
}
break;
}
}
}
if (theForm.elements['companyName'] && valid && theForm.elements['companyName'].value == "") {
alert ("Company Name is required.");
valid = false;
}
if (theForm.elements['companyIndustry'] && valid && theForm.elements['companyIndustry'].selectedIndex == 0) {
alert ("Company Industry is required.");
valid = false;
}
return valid;
}


and page 2

</script>
<form name="rfqForm" action="http://xxxxxxxxxxxxx" method="post" onsubmit="return validateForm(this);">
<div>
<div>
<ol>
<li>
<div id="qsmatch0a610698a907829bdeb78b6d3485f563">
<strong> Are you interested in a generator for a commercial or residential location? [Required]</strong>
</div>
<div>
<div>
<input type="radio" name="__match__0a610698-a907-829b-deb7-8b6d3485f563" value="0053a346-b742-a3d9-5c70-26fb44d5b0df" class="required" />
<label for="0053a346-b742-a3d9-5c70-26fb44d5b0df"> Commercial </label>
</div>
<div>
<input type="radio" name="__match__0a610698-a907-829b-deb7-8b6d3485f563" value="a8c0e4ec-7612-5edc-9a8b-af713d2b4f6a" onclick="if(window.bzRD){bzRD.setMessage('http://xxxxxxxxxxxxxxx');}else{document.location='xxxxxxxxxxxxx';}"
/>
<label for="a8c0e4ec-7612-5edc-9a8b-af713d2b4f6a"> Residential (home, RVs, camping, etc.) </label>
</div>
<span>
(By selecting this answer you will be redirected to
home generators
)
</span>
</div>
</li>
  • 0

#2 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 05 July 2012 - 10:50 AM

to stay on same page, you need to keep everything in one page as you say, not two.

one form with everything... and a next button instead of a submit, the button actually hides everything on first page and shows the second pages inputs, which has been hidden this far. the button itself would either become a back button or be hidden. this way, you only have one page with one form but the user experience it as parts. it can probably be more generical and have support for n number of pages instead of only 2, if you want to.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#3 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 05 July 2012 - 12:57 PM

Orjan's Idea will work just fine :D

and if you are looking for something stylish you might try something like this :


[o] question one
[o] question two
[o] question three
[o] question for
[o] question five
[o] question six
...

so, you present a layout like that, with the questions but not the choices, in between brackets a red for "non answered yet" and a green checked symbol for answered, when the user clicks on the question you show the options, when he answers you hide again the options and mark that question with a green checked,
just an idea :D
  • 0

#4 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 05 July 2012 - 01:24 PM

Like your idea too BlackRabbit, Just wondering if it could confuse the user a little bit too much. I'd rather say it should hide an answered question when user clicks another question to answer, instead of when answering it. your method can be a little bit too abrupt and some users need to think about about the given answers before heading to next question. Otherwise a good idea which gives a good overview of the whole form.
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.


#5 BlackRabbit

BlackRabbit

    CodeCall Legend

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3871 posts
  • Location:Argentina
  • Programming Language:C, C++, C#, PHP, JavaScript, Transact-SQL, Bash, Others
  • Learning:Java, Others

Posted 05 July 2012 - 01:49 PM

yes, i know orjan, we all know there is users and .. uuuuusers, hehe, both method works fine, and kinda go with the same hiding concept, even a little more complicated could be to have the questions as rotative while the choices/options frame stays always in the same place, so any time you answer one, is the questions which rotate positions, but as you said ... cool does not work for all the users, i might like also your way if you add at lets say left side, a column with the questions index, which could highlight the current one, while the navigation keeps the same as you said, with previous and back buttons
  • 0

#6 Orjan

Orjan

    CC Mentor

  • Moderator
  • 2918 posts
  • Location:Karlstad, Sweden
  • Programming Language:C, Java, C++, C#, PHP, JavaScript, Pascal
  • Learning:Java, C#

Posted 05 July 2012 - 02:34 PM

yeah, there are many possibilities to do this. the more flashy thing, the more work is it to get it going, usually. but the concept is the same. show/hide or move divs...
  • 0

I'm a System developer at XLENT Consultant Group mainly working with SugarCRM.
Please DO NOT send mail or PM to me with programming questions, post them in the appropriate forum instead, where I and others can answer you.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download