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 yes it's code working fine.but i want to reduce the code — Raheel Aslam
– Raheel Aslam, Commented Mar 29, 2018 at 6:45
@Tushar if hidden fields increase then my add multiple val() set function. Can we use chaining method or any best solution ? — Raheel Aslam
– Raheel Aslam, Commented Mar 29, 2018 at 6:49
@t3chb0t i have edit the code and showing complete code and detail Thanks — Raheel Aslam
– Raheel Aslam, Commented Mar 29, 2018 at 7:18

Adriano Repetti · Accepted Answer · 2018-03-29 09:29:35Z

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

Thanks , can you remove ) extra bracket from code it's give syntax error. — Raheel Aslam
– Raheel Aslam, Commented Mar 29, 2018 at 9:21

Stack Exchange Network

Set value to multiple selector on condition

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Set value to multiple selector on condition

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions