Remove checkbox and currency mark from product list

Hi

Pls refer to attached screenshot. I would like to do the following:

1. Hide the check box so users don't have to click on check box then key in qty

2. Hide the currency SGD

Thanks

Unfortunately it is not advisable to hide the checkbox, because like that the products will not be selected even if a quantity is  added.

The solution is to add a text-box field and add the product description to that text-box field.

Now you can add a calculation field (this field can be hidden) and add a formula (80*Uniform staff field):

https://www.jotform.com/help/259-How-to-perform-calculation-in-the-form 

Repeat this process to all the products.

Now you can add another calculation field that will sum all the other product calculation fields.

Finally edit the Payment tool so that it receives the amount from the total field. In order to achieve that please select collect donations > Get amount from > total field:

You can test and clone the demo form:  

https://form.jotform.com/52994603264966 

Let us know if we can assist you further.   

Thanks. Is there any way to hide the SGD currency?

yang

It is possible, but will need a complex workaround because there is no separate css for just the currency. The css class is for the price.

First we need to hide the price, by adding this css ;

.form-product-details

{visibility:hidden !important;}

Now we need to add specific css to each one of the products:

#input_89_1015_price, #input_89_1001_price, #input_89_1008_price, #input_89_1003_price, #input_89_1004_price, #input_89_1005_price, #input_89_1006_price, #input_89_1007_price, #input_89_1009_price, #input_89_1010_price, #input_89_1017_price

{visibility: visible !important;}

You can test and clone the demo form:  

https://form.jotform.com/52994689640978? 

Let us know if we can assist you further.   

Thanks!

I would just like to add up to the answer of my colleague above.

You could hide the checkbox, but then no one would know if they made the selection by clicking on the label or not. It will also make it practically impossible for those that use keyboard only to fill out the form to see that the keyboard stopped on the label for a specific reason, but nonetheless it is possible. My only suggestion is to then leave an indication that they had selected the item:

/* remove checkbox */
input.form-checkbox {
    display: none;
}
/* add text behind the label showing "( selected )" when the product is clicked */
input.form-checkbox:checked + label:after {
    content: "( selected )";
    float: right;
    margin-left: 10px;
}

Next to this, since you might need to add or remove some items in your products list, the following code will remove the currency no matter the currency, number of products, or anything else:

/* Hide currency */
.form-product-details b {
    visibility: hidden;
}
.form-product-details span {
    visibility: visible;
}
.form-product-details span:before {
    content: "$";
    margin-left: -1em;
}
.form-product-details span:after {
    content: "";
    margin-right: -2em;
}

The complete code that you can add to your form would be:

/* remove checkbox */
input.form-checkbox {
    display: none;
}
/* add text behind the label showing "( selected )" when the product is clicked */
input.form-checkbox:checked + label:after {
    content: "( selected )";
    float: right;
    margin-left: 10px;
}
/* Hide currency */
.form-product-details b {
    visibility: hidden;
}
.form-product-details span {
    visibility: visible;
}
.form-product-details span:before {
    content: "$";
    margin-left: -1em;
}
.form-product-details span:after {
    content: "";
    margin-right: -2em;
}

and can be applied to any form (it is not form specific).

All that is needed is to always add the code at the bottom of the custom CSS field (unless otherwise mentioned), as shown here: Inject Custom CSS Codes