Forms Designer Forum

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.

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

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.

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');

ink to image

https://www.dropbox.com/s/2finppwkxnw2l ... e.gif?dl=0

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();