Read Only Field, after click Button

[Max]

Hello Support. I have created a form with several buttons. A question is asked and the answer must be typed into a free text field. As soon as you click on the first button, solution, the free text field should be locked (read only)! How can I solve this using QuForm’s standard functions. If you click on the next button, the field should of course remain readonly! Thanks for the answer. Many greetings.

Attachments:

You must be logged in to view attached files.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

Hi Ally,

Building on this customer’s enquiry. Is it possible to extend your solution to enable and disable the “Read Only” of a form’s “Field Element(s) based off a “Radio” button that has two options.

On “Page 3” of my form I ask the client if they want to bring a “Plus-One” to the event. If they select the “Radio” button for “Yes” then I want to make several “Text” fields “Writeable”, otherwise these “Fields” will be “Read Only” based off the “Radio” element having the “No” selection defaulted as the selected value.

Attachments:

You must be logged in to view attached files.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

Hi Ally,

Thank you once again, you are totally awesome and this works perfectly. I do have one question and I thought I had seen the question asked before but can’t seem to find it.

When the field is set to “read only” is there a way to change the fields background colour or CSS styling so it appears to the user that it is “disabled” or in “Read Only” mode. I could duplicate the elements and attached a conditional logic on them to hid and show the “Read Only” fields on the “Radio” button “No” and show the “Read Write” version of the elements when the user selects “Yes” but that seems like so much more work.

I do know that there is a CSS style ” input:read-only { background-color: yellow; } “, however I’m just not sure how I should use it and where.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[GOMLP]

Morning Ally,

I hope you had a wonderful night. Once again I thank you for your assistance.

I’m just wondering if you can shine a bit of light on CSS/JavaScript for me. Many times I use the website http://www.w3schools.com to look up CSS and JavaScript code, what I’m wondering is if there is a method of correlation on how to join what I learn on w3schools website and incorporate it into the QuForm’s “Custom CSS/Javascript” for forms and form elements.

With the above code help you provided, I’m wondering how I would extend it further to just a specific form and its elements, and/or just a specific element of a form. If you can at least teach me how to call or direct this custom CSS/JavaScript to the previously mentioned items that might help me understand the relationship and I could then try a bit harder with some success on my end.

For example:

1) If I wanted to take the solution you provided and extend it just to a specific form and its associated elements how would I go about directing the colour change code to that specific form and elements? Would I write it out like below:

.quform-12-field-text:read-only {
background-color: yellow;
}

with the “12” being the direction to the specific form number?

2) If I just wanted to take your solution and apply it to a specific form element or “text” element in this case, would I write it out as below:

.quform-field-12_3:read-only {
background-color: yellow;
}

With “12_3” being the specific element on form 12_3?

I hope this makes sense and that you can help me figure out or understand how to apply custom CSS/JavaScript that I learn from other sites and apply them to the QuForm’s “forms” and “form elements” this might help me further.

Thanking you in advance and I so love working with you.

[Ally]

You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

[Author]

Posts