Set value to multiple selector on condition

Question

I have code and set the value to hidden 0 or 1 on condition. Is there a better way to solve this?

<input type="hidden" name="type_product" value="" class="type_product"/>
<input type="hidden" name="type_category" value="" class="type_category" />
<input type="hidden" name="type_modifier" value="" class="type_modifier"/>
<input type="hidden" name="type_variant" value="" class="type_variant" />
<script>
 $(function(){
 let dataType = "product"; // category
 if (dataType == "product") {
 $(".type_product").val(1);
 $(".type_category").val(0);
 $(".type_modifier").val(1);
 $(".type_variant").val(0);
}
 if (dataType == "category") {
 $(".type_category").val(1);
 $(".type_product").val(0);
 $(".type_modifier").val(0);
 $(".type_variant").val(1);
 }
 })
 </script>

• Tushar: Is the code working as expected?
• Raheel Aslam: @Tushar yes it's code working fine.but i want to reduce the code
• Raheel Aslam: @Tushar if hidden fields increase then my add multiple val() set function. Can we use chaining method or any best solution ?
• Raheel Aslam: @Tushar understand ?
• Raheel Aslam: @t3chb0t i have edit the code and showing complete code and detail Thanks

Answer 1

The first and most simple thing to do, in this case, is to drop that if. Duplicated code always smells:

const isProduct = dataType === "product";
$(".type_product").val(isProduct ? 1 : 0);
$(".type_category").val(isProduct ? 0 : 1);
$(".type_modifier").val(isProduct ? 1 : 0);
$(".type_variant").val(isProduct ? 0 : 1);

Note the use of === instead of ==. Note that you may write $(".type_product, .type_modifier") to reduce number of lines but I find it pretty odd because I'm aggregating selectors for objects with different content (and I'm updating their value, not their style). Just my opinion, anyway.

If this is everything you need then I'd keep it as simple as possible but what if logic is more complex? Let's introduce a function: val() accepts it as parameter:

$(".type_product").val(calculateTypeField);
$(".type_category").val(calculateProductField);

And so on. Those functions can be as complex as required (and you introduce some separation between your view and its view model. For even more complex cases you may also have a dictionary:

{
 'product': calculateProductField
}

To use together with a data-field attribute to map the function to the function which calculates it:

<input type="hidden" name="type_product" value="" data-field="product" />

(of course you need to write few JavaScript lines to do this _mapping__)

• Raheel Aslam: Thanks , can you remove ) extra bracket from code it's give syntax error.
• Adriano Repetti: Tnx, copy & paste...