Turn CSS element back on using jquery

JavaScript
1

I have the following in my style sheet

#accordion .card button:before {
    content: "";
    background-image: url(/Images/Shared/greenTick.png);
    position: absolute;
    left: 16px;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    display: none;
}

Its to allow a green tick to appear when needed on the left side of the card in bootstrap.

Its turned off until needed, but how do I use it to display the tick in the following way.

function CheckFormValues() {
    if ($('#txtSelectedClient').val().trim() !== '') {
        $('#txtSelectedClient').closest('.card').css({ "background-color": "green" });
    }
}

So instead of the green background I show the tick. I also tried removing #txtSelectedClient and replacing it with this and it didnt work.

I wanted to use $this as a better method than writing out the line below over and over as below, this is only two examples but this could be repeated 10-15 times.

if ($('#txtSelectedClient').val().trim() !== '') {
        $('#txtSelectedClient').closest('.card').css({ "background-color": "#8DC63F" });
    }
    if (!$.trim($('#servicingOfficeList:empty').html()).length) {
        $('#servicingOfficeList').closest('.card').css({ "background-color": "#8DC63F" });
    }
2

Do you mean JScript? It looks like jQuery to me…

3

God ye sorry :grinning:

4

Im wondering if there a better way than having to check each one as an individual, because ive got input fields, dropdows too as below. because its going to be difficult to write an if statement that checks the input value and if a dropdown isnt empty isnt it.

@Html.LocalisedText("lblContractForm_CompanyName", "lblContractForm_CompanyName", LH.SystemComponent.TheSystem, "textSizeStandard title required")
@Html.EditorFor(model => model.FullName, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtFullName", maxlength = DH.GetFieldMaxLength("Contract", "Company_Name") } })

@Html.Partial("_LocationForm", Model.LocationModel)

@Html.LocalisedText("lblFormAddress", "lblForm_Field_Address", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.Address, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtAddress", maxlength = DH.GetFieldMaxLength("Contract", "Company_Address") } })


@Html.LocalisedText("lblFormPostCode", "lblForm_Post_Code", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.PostCode, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtPostCode", maxlength = DH.GetFieldMaxLength("Contract", "Company_Post_Code") } })


@Html.LocalisedText("lblFormVAT", "lblForm_Vat", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.VAT, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtVat", maxlength = DH.GetFieldMaxLength("Contract", "Company_Tax_Code") } })


@Html.LocalisedText("lblFormTelephone", "lblForm_Field_TelephoneNumber", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.Telephone, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtTelephone", maxlength = DH.GetFieldMaxLength("Contract", "Company_Telephone_Number") } })


@Html.LocalisedText("lblFormFax", "lblForm_Field_FaxNumber", LH.SystemComponent.Shared, "textSizeStandard title required")
@Html.EditorFor(model => model.Fax, null, new { htmlAttributes = new { @class = "textBox textSizeSmall text-input", @id = "txtFax", maxlength = DH.GetFieldMaxLength("Contract", "Company_Fax_Number") } })
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.