3
\$\begingroup\$

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>
\$\endgroup\$
  • \$\begingroup\$ Is the code working as expected? \$\endgroup\$ – Tushar Mar 29 '18 at 6:41
  • \$\begingroup\$ @Tushar yes it's code working fine.but i want to reduce the code \$\endgroup\$ – Raheel Aslam Mar 29 '18 at 6:45
  • \$\begingroup\$ @Tushar if hidden fields increase then my add multiple val() set function. Can we use chaining method or any best solution ? \$\endgroup\$ – Raheel Aslam Mar 29 '18 at 6:49
  • \$\begingroup\$ @Tushar understand ? \$\endgroup\$ – Raheel Aslam Mar 29 '18 at 7:04
  • 1
    \$\begingroup\$ @t3chb0t i have edit the code and showing complete code and detail Thanks \$\endgroup\$ – Raheel Aslam Mar 29 '18 at 7:18
2
\$\begingroup\$

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__)

\$\endgroup\$
  • \$\begingroup\$ Thanks , can you remove ) extra bracket from code it's give syntax error. \$\endgroup\$ – Raheel Aslam Mar 29 '18 at 9:21
  • \$\begingroup\$ Tnx, copy & paste... \$\endgroup\$ – Adriano Repetti Mar 29 '18 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.