Register and join over 40,000 other developers!
Recent Topics
-
Print specific values from dictionary with a specific key name
Siten0308 - Jun 20 2019 01:43 PM
-
Learn algorithms and programming concepts
johnnylo - Apr 23 2019 07:49 AM
-
Job Gig PHP Form Needed
PJohnson - Apr 18 2019 03:55 AM
-
How to make code run differently depending on the platform it is running on?
xarzu - Apr 05 2019 09:17 AM
-
How do I set a breakpoint in an attached process in visual studio
xarzu - Apr 04 2019 11:47 AM
Recent Blog Entries
Recent Status Updates
Popular Tags
- networking
- Managed C++
- stream
- console
- database
- authentication
- Visual Basic 4 / 5 / 6
- session
- Connection
- asp.net
- import
- syntax
- hardware
- html5
- array
- mysql
- java
- php
- c++
- string
- C#
- html
- loop
- timer
- jquery
- ajax
- javascript
- programming
- android
- css
- assembly
- c
- form
- vb.net
- xml
- linked list
- login
- encryption
- pseudocode
- calculator
- sql
- python
- setup
- help
- game
- combobox
- binary
- hello world
- grid
- innerHTML

5 replies to this topic
#1
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>
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>
#2
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.
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.
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
Posted 05 July 2012 - 12:57 PM
Orjan's Idea will work just fine 
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

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

#4
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.
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
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
#6
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...
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.
Also tagged with one or more of these keywords: innerHTML
Language Forums →
HTML, CSS and Javascript →
Displaying image from msql database with search engine writting in php and ajaxStarted by Samasi, 02 Sep 2012 ![]() |
|
![]() |
||
Language Forums →
HTML, CSS and Javascript →
div's content moves out of divStarted by thatsme, 13 Aug 2012 ![]() |
|
![]() |
||
![]() |
Language Forums →
HTML, CSS and Javascript →
[SOLVED] javascript filter problemStarted by M2G, 06 Aug 2012 ![]() |
|
![]() |
|
Language Forums →
PHP →
Problem In Getting Value From Select Option Using Ajax, Php And MysqlStarted by newphpcoder, 05 Jun 2012 ![]() |
|
![]() |
||
Language Forums →
Databases →
Got An Error In Xmlhttp.reponsetextStarted by newphpcoder, 05 Jun 2012 ![]() |
|
![]() |
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download