[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.

[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.

[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.

[GOMLP]

Hi Ally,

Once again I thank you! Your assistance on this was greatly helpful and taught me something new.

[GOMLP]

Hi Ally,

I fixed the code discrepancies and apologize for that. I now have the code corrected, however I still can’t seem to pull in that information from within the custom JS to display a custom message at the top with the client’s name.

And for the likes of me I can’t seem to figure out how to pull the JS code to auto-fill fields.

I’ve send you a message with the URL link and username and password for you to have a look at.

Thanking you in advance,
Todd R

[GOMLP]

Hi Ally,

Sorry for the delay in responding. The code worked good, however I’ve been trying to play around with it a bit more to extend the functionality and I’m not having much luck.

My goal is to allow the customer to enter their unique invitation code on the first page and when proceeding to the second page of the form it will look up the customer’s information based on this unique invitation code so I can use this looked up information in a custom HTML header text for display, while also pre populating form fields to confirm that their phone number, email and mailing addresses information is correct. If their information needs to be updated the customer can either click on a check box to either enable editing of the information field(s) or simply overwrite the looked up information for submission.

But in either case I want to be able to look up this information for; 1) Customizing an HTML welcome header on the second page and 2) populating form fields with the looked up information.

jQuery(function ($) {
var contactInfo = {
’11’: {
firstName: ‘Todd’,
lastName: ‘Rose’,
eMailAddress: ‘toddl@gomlp.net’,
phoneNumber: ‘(902) 835-2400’,
companyName: ‘Maritime Labels & Packaging’,
mailingStreetAddress: ‘9172 Highway 14’,
mailingCity: ‘Milford’,
mailingProvince: ‘Nova Scotia’,
mailingPostalCode: ‘B0N 1Y0’,
shippingAddress: ‘9172 Highway 14’,
shippingCity: ‘Milford’,
shippingProvince: ‘Nova Scotia’,
shippingPostalCode: ‘B0N 1Y0′
},
’22’: {
firstName: ‘Paul’,
lastName: ‘Sproule’,
eMailAddress: ‘paul@gomlp.net’,
phoneNumber: ‘(902) 835-2400’,
companyName: ‘Maritime Labels & Packaging’,
mailingStreetAddress: ‘9172 Highway 14’,
mailingCity: ‘Milford’,
mailingProvince: ‘Nova Scotia’,
mailingPostalCode: ‘B0N 1Y0’,
shippingAddress: ‘9172 Highway 14’,
shippingCity: ‘Milford’,
shippingProvince: ‘Nova Scotia’,
shippingPostalCode: ‘B0N 1Y0′
},
’33’: {
firstName: ‘Kyle’,
lastName: ‘Tomblin’,
eMailAddress: ‘kyle@gomlp.net’,
phoneNumber: ‘(902) 835-2400’,
companyName: ‘Maritime Labels & Packaging’,
mailingStreetAddress: ‘9172 Highway 14’,
mailingCity: ‘Milford’,
mailingProvince: ‘Nova Scotia’,
mailingPostalCode: ‘B0N 1Y0’,
shippingAddress: ‘9172 Highway 14’,
shippingCity: ‘Milford’,
shippingProvince: ‘Nova Scotia’,
shippingPostalCode: ‘B0N 1Y0’
},
};

$(‘.quform-field-12_7’).on(‘change’, function () {
var value = $(this).val();

if (value && contactInfo[value]) {
var contact = contactInfo[value];

$(‘.quform-element-12_38 .quform-spacer’).html(contact.firstName);
$(‘.quform-element-12_36 .quform-spacer’).html(substrate.lastName);
$(‘.quform-element-14_1065 .quform-spacer’).html(substrate.adhesive);
$(‘.quform-element-14_1069 .quform-spacer’).html(substrate.min_app_temp);
$(‘.quform-element-14_1075 .quform-spacer’).html(substrate.service_temp_range);
}
});
});

[GOMLP]

Hi Ally,

I’m wondering if there is a way to write these results to a hidden field and then make that value global so I can then recall the results using HTML elements, very similar to how I’ve used the header descriptions.

My situation is that if I use the current code the results of the label dimensions are being written directly to an HTML element and with the floating CSS code I can’t duplicate the HTML element with the same Unique ID and these HTML elements need to be positioned differently according to the shape selected.

[GOMLP]

Totally never mind! I’m dealing with Pneumonia and on strong antibiotics and my brain isn’t myself…. I shouldn’t even be working on this right now, but I hate not doing stuff. And for your laugh of the day I was actually trying to call a supplier and was using my calculator on my iPhone and tired several times before I realized I was using the calculator….. I think it is time to relax!

A BIG Thank you.

Boy do I feel stupid right now 🙁

[GOMLP]

And definitely it would be easier to do this through JavaScript to populate the various HTML elements. I’ve attached a picture of my layout of this information so you can see how it is built. Your log-in information is still valid and always will be for providing assistance.

If I had to generate this group of elements for every substrate it would be painstakingly slow. It would be a lot easier to export the code in the correct format from Excel and then past it into the above code snippet you provided, I’m just not sure what you mean about “add the substrates data to the substrates object at the top”.

Attachments:

You must be logged in to view attached files.

[GOMLP]

Ignore the last paragraph: “I’ve tried a few things, however no matter what I do I keep breaking the code. Anymore insight would be great.” that was a reply to the HTML question, tooooo many windows open! My Bad!

[GOMLP]

Hi Ally,

Not 100% sure what you mean by “You’d need to add the substrates data to the substrates object at the top”.

I’ve tried a few things in which I thought you were referring to, however I keep breaking the code. Any further insight onto what you mean by the above would be so helpful.

[GOMLP]

Hi Ally,

I’m just getting around tackling this now…. I already have a custom plug in for the phone number mask and I am wondering if I can just modify that plug in to include this code so there is only one custom plug in.

I’ve tried a few things, however no matter what I do I keep breaking the code. Anymore insight would be great.

[GOMLP]

No need to reply to this one, I was able to figure it out… I actually found a really good page for assisting in checking the code for missing elements and structure, URL below:

https://beautifytools.com/javascript-validator.php

My Code I got working…. You are teaching me 😉

jQuery(function ($) {
function setImageUrl() {
var foilCode = $(‘.quform-field-14_211′).val(),
foilImage = ”;

if (foilCode !== ”) {

// Black Vellum 16256
if (foilCode === ’29’) {
foilImage = ‘QuoteSubstrates/Foils/29.png’;
} else if (foilCode === ’17’) {
foilImage = ‘QuoteSubstrates/Foils/17.png’;
} else if (foilCode === ’10’) {
foilImage = ‘QuoteSubstrates/Foils/10.png’;
} else if (foilCode === ’19’) {
foilImage = ‘QuoteSubstrates/Foils/19.png’;
} else if (foilCode === ’25’) {
foilImage = ‘QuoteSubstrates/Foils/25.png’;
} else if (foilCode === ’44’) {
foilImage = ‘QuoteSubstrates/Foils/44.png’;
} else if (foilCode === ’43’) {
foilImage = ‘QuoteSubstrates/Foils/43.png’;
} else if (foilCode === ’82’) {
foilImage = ‘QuoteSubstrates/Foils/82.png’;
}

} else {
foilImage = ‘QuoteSubstrates/empty.png’;
}

$(‘#foiling-Image’).attr(‘src’, ‘http://gomlp.biz/wp-content/’ + foilImage);
}

$(‘.quform-field-14_211’).on(‘change’, setImageUrl);
});

[GOMLP]

Well don’t I feel really stupid! I looked and looked at that code and tried to ensure it was built the same way as the other one, even had my partner look at it…. Been trying to learn JavaScript on line from a few sites and I honestly though I had the “Curley Brackets” down pact and understood, I guess I was looking at it way too long.

Can’t thank you enough for saving my sanity and picking up a really stupid mistake on my behalf. Once again thank you!

As you can probably see from the form when viewing it that it is almost an app I’m trying to build…lol

[GOMLP]

Just replying to this thread so I can activate the email notification.

[Author]

Posts