Expand my Community achievements bar.

Announcing the launch of new sub-community for Campaign Web UI to cater specifically to the needs of Campaign Web UI users!
SOLVED

Fields in Input Forms XML

Avatar

Level 5

I want to create in an input form three fields that if I mark one I can fill it and the others I can't and if I mark the field none I can't fill any of them.
Is there any way?

 

@Manoj_Kumar_ @ParthaSarathy @Parvesh_Parmar @DavidKangni 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@alnavarg ,

You can achieve this behavior by using JavaScript to dynamically enable or disable the input fields based on the user's selection. Try to use event listeners to detect changes in the checkboxes and then manipulate the input fields accordingly.

Here's an example :

1. Create your input form with three fields (Field A, Field B, Field C) and a "None" checkbox.

 

2. Add JavaScript to your form's HTML to handle the dynamic behavior:

const checkboxA = document.getElementById('checkboxA');
const checkboxB = document.getElementById('checkboxB');
const checkboxC = document.getElementById('checkboxC');
const fieldA = document.getElementById('fieldA');
const fieldB = document.getElementById('fieldB');
const fieldC = document.getElementById('fieldC');


checkboxA.addEventListener('change', () => {
fieldA.disabled = !checkboxA.checked;
});

checkboxB.addEventListener('change', () => {
fieldB.disabled = !checkboxB.checked;
});

checkboxC.addEventListener('change', () => {
fieldC.disabled = !checkboxC.checked;
});

// Add event listener to "None" checkbox
const noneCheckbox = document.getElementById('noneCheckbox');
noneCheckbox.addEventListener('change', () => {
if (noneCheckbox.checked) {
checkboxA.checked = false;
checkboxB.checked = false;
checkboxC.checked = false;
fieldA.disabled = true;
fieldB.disabled = true;
fieldC.disabled = true;
}
});


3. Adjust the IDs and classes in the JavaScript code to match your HTML structure.

4. Ensure that you place this JavaScript code within the HTML of your Adobe Campaign input form.

View solution in original post

3 Replies

Avatar

Community Advisor

Hello @alnavarg 

 

Can you show some visual representation of how it should work?

 

Are there three checkboxes and three input fields?


     Manoj
     Find me on LinkedIn

Avatar

Correct answer by
Employee Advisor

@alnavarg ,

You can achieve this behavior by using JavaScript to dynamically enable or disable the input fields based on the user's selection. Try to use event listeners to detect changes in the checkboxes and then manipulate the input fields accordingly.

Here's an example :

1. Create your input form with three fields (Field A, Field B, Field C) and a "None" checkbox.

 

2. Add JavaScript to your form's HTML to handle the dynamic behavior:

const checkboxA = document.getElementById('checkboxA');
const checkboxB = document.getElementById('checkboxB');
const checkboxC = document.getElementById('checkboxC');
const fieldA = document.getElementById('fieldA');
const fieldB = document.getElementById('fieldB');
const fieldC = document.getElementById('fieldC');


checkboxA.addEventListener('change', () => {
fieldA.disabled = !checkboxA.checked;
});

checkboxB.addEventListener('change', () => {
fieldB.disabled = !checkboxB.checked;
});

checkboxC.addEventListener('change', () => {
fieldC.disabled = !checkboxC.checked;
});

// Add event listener to "None" checkbox
const noneCheckbox = document.getElementById('noneCheckbox');
noneCheckbox.addEventListener('change', () => {
if (noneCheckbox.checked) {
checkboxA.checked = false;
checkboxB.checked = false;
checkboxC.checked = false;
fieldA.disabled = true;
fieldB.disabled = true;
fieldC.disabled = true;
}
});


3. Adjust the IDs and classes in the JavaScript code to match your HTML structure.

4. Ensure that you place this JavaScript code within the HTML of your Adobe Campaign input form.

Avatar

Community Advisor

Hello @alnavarg 

 

Do you still have any questions on this? The correct answer is regarding the web form on WebApp, but the question in for the input form.


     Manoj
     Find me on LinkedIn