Multiple "Allow other..." in list
Good morning.
I have a need to allow the user to add their own items to a list. I know by default I can only have ONE "allow user to add their own" but in this case I need three.
Partil List Example:
7. Mammogram
8. Ultrasound, specify site
9. X-ray, specify site
10. Bone scan
11. Other, specify
If I only needed one I could easily do this. But I know I will need to have 2 extra fields with in my list.
Utilizing the provided example below which allows me to place the other any where I like with the text box right after it (items 8 and 9) how would I throw an extra field or two in it without breaking it? Field1Other, Field2Other.
Would I need to only do this?
var options1 = fd.field('Field1Other').control()._el().find('td');
Existing Example
//Race
var options = fd.field('Race').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(0).html() + '</td>'; //Rows
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(1).html() + '</td>'; //Rows
content += '<td>' + options.eq(8).html() + options.eq(9).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(2).html() + '</td>'; //Rows
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(3).html() + '</td>'; //Rows
content += '<td>' + options.eq(7).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(4).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('Race').control()._el().html(content);
// Race Other Text
$('label[for*=RaceField_ctl00_ctl08]').text('Other, specify');
Thank you.
I have a need to allow the user to add their own items to a list. I know by default I can only have ONE "allow user to add their own" but in this case I need three.
Partil List Example:
7. Mammogram
8. Ultrasound, specify site
9. X-ray, specify site
10. Bone scan
11. Other, specify
If I only needed one I could easily do this. But I know I will need to have 2 extra fields with in my list.
Utilizing the provided example below which allows me to place the other any where I like with the text box right after it (items 8 and 9) how would I throw an extra field or two in it without breaking it? Field1Other, Field2Other.
Would I need to only do this?
var options1 = fd.field('Field1Other').control()._el().find('td');
Existing Example
//Race
var options = fd.field('Race').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(0).html() + '</td>'; //Rows
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(1).html() + '</td>'; //Rows
content += '<td>' + options.eq(8).html() + options.eq(9).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(2).html() + '</td>'; //Rows
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(3).html() + '</td>'; //Rows
content += '<td>' + options.eq(7).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(4).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('Race').control()._el().html(content);
// Race Other Text
$('label[for*=RaceField_ctl00_ctl08]').text('Other, specify');
Thank you.
- Dmitry Kozlov
- Site Admin
- Posts: 1524
- Joined: Thu Jun 07, 2012
Hi,
What type of field do you use for the selection from Mammogram, Ultrasound, X-ray, Bone scan etc? Choice (DropDown) or Choice (Checkboxes)? You can add extra fields for additional information and display them conditionally based on the selection in the Choice field.
http://spform.com/office-365/cond ... ynamically
What type of field do you use for the selection from Mammogram, Ultrasound, X-ray, Bone scan etc? Choice (DropDown) or Choice (Checkboxes)? You can add extra fields for additional information and display them conditionally based on the selection in the Choice field.
http://spform.com/office-365/cond ... ynamically
Thank you. They are Choice (Checkboxes).
But thinking more about it the MRI, Ultrasound and X-ray will need to be part of three other fields which could be text fields where user types in the site. If it is too crafty or would be a has to put them in as #8 and 9 I could always see if I could display them after 11 instead. This may be my most complex form yet. I just need to twaek my html/jscript in a way that looks seamless to the eye.
I will take a look at the link.
But thinking more about it the MRI, Ultrasound and X-ray will need to be part of three other fields which could be text fields where user types in the site. If it is too crafty or would be a has to put them in as #8 and 9 I could always see if I could display them after 11 instead. This may be my most complex form yet. I just need to twaek my html/jscript in a way that looks seamless to the eye.
I will take a look at the link.
- Dmitry Kozlov
- Site Admin
- Posts: 1524
- Joined: Thu Jun 07, 2012
You could split the field into several Yes/No fields. Based on the selection show or hide additional text fields.
Thanks. I will have to give it a try to envision how it will work.
In the mean time I re-aranged the list to have the extra items appear at the end. In order to get it to work I still have to add the 3 extra fields as check boxes and display what I need to see. I am hoping I get approval so I can move on.
image(hopefully shows up):
code:
//TestName
var options = fd.field('TestName').control()._el().find('td');
//var MRI = fd.field('TestNameMRI').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(0).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(1).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(3).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(4).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
//content += '<tr>';
// content += '<td>' + MRI.eq(1).html() + MRI.eq(2).html() + '</td>'; //Rows
//content += '</tr>'
//content += '<tr>';
// content += '<td>' + "<input name=\"ctl00$ctl41$g_478b9b60_56ea_4681_bcf5_3c2a561f5596$TestNameMRIField$ctl00$ctl00$TextField\" title=\"TestNameMRI\" class=\"ms-long ms-spellcheck-true\" id=\"ctl00_ctl41_g_478b9b60_56ea_4681_bcf5_3c2a561f5596_TestNameMRIField_ctl00_ctl00_TextField\" type=\"text\" maxlength=\"255\">" + '</td>'; //Rows
//content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(6).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(7).html() + options.eq(8).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestName').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameField_ctl00_ctl07]').text('Other (specify)');
//TestNameMRI
var options = fd.field('TestNameMRI').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameMRI').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameMRIField_ctl00_ctl01]').text('MRI, specify site');
//TestNameUltrasound
var options = fd.field('TestNameUltrasound').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameUltrasound').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameUltrasoundField_ctl00_ctl01]').text('Ultrasound, specify site');
//TestNameXRAY
var options = fd.field('TestNameXRAY').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameXRAY').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameXRAYField_ctl00_ctl01]').text('X-ray, specify site');
In the mean time I re-aranged the list to have the extra items appear at the end. In order to get it to work I still have to add the 3 extra fields as check boxes and display what I need to see. I am hoping I get approval so I can move on.
image(hopefully shows up):
code:
//TestName
var options = fd.field('TestName').control()._el().find('td');
//var MRI = fd.field('TestNameMRI').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(0).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(1).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(3).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(4).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(5).html() + '</td>'; //Rows
content += '</tr>'
//content += '<tr>';
// content += '<td>' + MRI.eq(1).html() + MRI.eq(2).html() + '</td>'; //Rows
//content += '</tr>'
//content += '<tr>';
// content += '<td>' + "<input name=\"ctl00$ctl41$g_478b9b60_56ea_4681_bcf5_3c2a561f5596$TestNameMRIField$ctl00$ctl00$TextField\" title=\"TestNameMRI\" class=\"ms-long ms-spellcheck-true\" id=\"ctl00_ctl41_g_478b9b60_56ea_4681_bcf5_3c2a561f5596_TestNameMRIField_ctl00_ctl00_TextField\" type=\"text\" maxlength=\"255\">" + '</td>'; //Rows
//content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(6).html() + '</td>'; //Rows
content += '</tr>'
content += '<tr>';
content += '<td>' + options.eq(7).html() + options.eq(8).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestName').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameField_ctl00_ctl07]').text('Other (specify)');
//TestNameMRI
var options = fd.field('TestNameMRI').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameMRI').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameMRIField_ctl00_ctl01]').text('MRI, specify site');
//TestNameUltrasound
var options = fd.field('TestNameUltrasound').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameUltrasound').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameUltrasoundField_ctl00_ctl01]').text('Ultrasound, specify site');
//TestNameXRAY
var options = fd.field('TestNameXRAY').control()._el().find('td');
var content = '<table>';
content += '<tr>';
content += '<td>' + options.eq(1).html() + options.eq(2).html() + '</td>'; //Rows
content += '</tr>'
content += '</table>';
fd.field('TestNameXRAY').control()._el().html(content);
//TestNameField_ctl00_ctl10
$('label[for*=TestNameXRAYField_ctl00_ctl01]').text('X-ray, specify site');
I am able to add the extras using jscript. I can append to my selection and hide the rest.
I will leave my exaple if anyone needs it.
$('.fd_field[fd_name="HematologicalAdverseEvent"]').detach().appendTo('.fd_field[fd_name="AEType"]');
$('.fd_field[fd_name="PainLocation"]').detach().appendTo('.fd_field[fd_name="AEType"]');
$('.fd_field[fd_name="SkinToxicity"]').detach().appendTo('.fd_field[fd_name="AEType"]');
example:
I have 3 Other/Add specifics in my AEType. Here is one of them
function SetAEType() {
...
if (fd.field('AEType').value() == '5.\tSkin toxicity (specify: rash, erythematous or desquamatory rash, skin hyperpigmentation)') {
//alert('5.\tSkin toxicity (specify: rash, erythematous or desquamatory rash, skin hyperpigmentation)');
$('.fd_field[fd_name="SkinToxicity"]').show(); //Show SkinToxity field
$('.fd_field[fd_name="HematologicalAdverseEvent"]').hide(); //Hide HAE field
$('.fd_field[fd_name="PainLocation"]').hide(); //Hide Pan Location
fd.field('PainLocation').value(''); //Clear value is edited or changed
fd.field('HematologicalAdverseEvent').value(''); //Clear value is edited or changed
...
}
};
// Calling setAEType when the user changes AEType
fd.field('AEType').change(SetAEType);
// Calling setAEType on form loading
SetAEType();
I will leave my exaple if anyone needs it.
$('.fd_field[fd_name="HematologicalAdverseEvent"]').detach().appendTo('.fd_field[fd_name="AEType"]');
$('.fd_field[fd_name="PainLocation"]').detach().appendTo('.fd_field[fd_name="AEType"]');
$('.fd_field[fd_name="SkinToxicity"]').detach().appendTo('.fd_field[fd_name="AEType"]');
example:
I have 3 Other/Add specifics in my AEType. Here is one of them
function SetAEType() {
...
if (fd.field('AEType').value() == '5.\tSkin toxicity (specify: rash, erythematous or desquamatory rash, skin hyperpigmentation)') {
//alert('5.\tSkin toxicity (specify: rash, erythematous or desquamatory rash, skin hyperpigmentation)');
$('.fd_field[fd_name="SkinToxicity"]').show(); //Show SkinToxity field
$('.fd_field[fd_name="HematologicalAdverseEvent"]').hide(); //Hide HAE field
$('.fd_field[fd_name="PainLocation"]').hide(); //Hide Pan Location
fd.field('PainLocation').value(''); //Clear value is edited or changed
fd.field('HematologicalAdverseEvent').value(''); //Clear value is edited or changed
...
}
};
// Calling setAEType when the user changes AEType
fd.field('AEType').change(SetAEType);
// Calling setAEType on form loading
SetAEType();
-
- Information
-
Who is online
Users browsing this forum: No registered users and 21 guests