Check if element exist and start some activity

Question

I have the following code:

<div class="checkout-related-view__related-row">
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--left">
    <input type="checkbox" class="checkbox related-checkbox" id="related-checkbox-7087458-Z22-00025" value="2536" data-role="none">
    <label for="related-checkbox-7087458-Z22-00025">
      <span class="checkbox"></span>
      TV Bed or Adjustable Bed Assembly</label>
  </div>
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--right">
    <span class="price"><span class="currency">£</span>0</span>
    <a href="javascript:void(0)" class="checkout-icon checkout-icon-info related-info" data-toggle="popover" title="" data-content="When your new TV or Adjustable bed is delivered we will take care of all the assembly required, completely free of charge."
    data-html="true" data-trigger="focus" tabindex="0" data-original-title="Free Assembly">
      <span class="visuallyhidden">Free Assembly</span>
    </a>
  </div>
  <div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--qty">
    <div class="input-combobox input-combobox__with-qty" data-label="Qty" data-range-min="0" data-range-max="1">
      <span class="input-combobox__label">Qty</span>
      <input class="input-combobox__text input-qty" type="text" name="related_products[7087458][2536][qty]" value="0">
    </div>
  </div>
</div>

I was looking at how can check if the block contains TV Bed or Adjustable Bed Assembly to change the QTY value to "1". So far I've managed to change the value to "1" using the following JS:

document.getElementsByClassName("input-combobox__text input-qty")[2].value = "1";

The issue I am having now is to actually place a logic that will execute the JS only if the "TV Bed or Adjustable bed". I've tried with :contains but it seems that it didn't work. Can you please help?

The scenario:

2 Products with same classes:

1st is Wood Bed

2nd product is TV Bed

Currently:

If JS catch a label and text that contains TV bed it will apply the QTY of 1 to the first item, regardless it is TV Bed or Wood Bed

End goal:

If TV Bed exist set the QTY as 1 only to the relevant product

Currently I am referring to array and define which QTY to be changed. I also refer to it as ".input-combobox__text.input-qty" Is there any way how I can target the specific input with name="related_products[7087458][2536][qty]"

Please refer to: https://jsfiddle.net/ckuxzxms/5/

Possible duplicate of [How to check if element exists in the visible DOM?](http://stackoverflow.com/questions/5629684/how-to-check-if-element-exists-in-the-visible-dom) — Liam, Jan 14 '16 at 15:34
@Liam this question is to check if the text equals rather than the class exist — John, Jan 14 '16 at 15:36
[here](http://stackoverflow.com/a/10443875/5466135) is the solution — yılmaz, Jan 14 '16 at 15:41
@thanga I believe it will have to be JQuery checking if the text equals to ... isnt it? — John, Jan 14 '16 at 15:41
@yılmaz this different one as it is checking whether the checkbox is checked. What I am trying to achive is : Check if div1 contains certain text then set value of drop down list to 1. So far I can set the dropdown but can not restrict it to situations where only the specific text appears — John, Jan 14 '16 at 15:42

score 1 · Accepted Answer · answered Jan 14 '16 at 15:43

1

Here is one way of checking and setting:

Fiddle: https://jsfiddle.net/ckuxzxms/1/

Pure JS

var label = document.querySelector('[for="related-checkbox-7087458-Z22-00025"]');
if (label) {
    var text = label.textContent.trim();
    if (text == 'TV Bed or Adjustable Bed Assembly') {
        document.querySelectorAll(".input-combobox__text.input-qty")[0].value = "1";
    }
}

Gets the label using querySelector, checks if it found anything and if so gets the textContent and removes any white space. Then checks for direct equality. Change the setting of the value a little to use querySelectorAll instead of getElementsByClassName as well.

jQuery: https://jsfiddle.net/ckuxzxms/2/

var label = $('[for="related-checkbox-7087458-Z22-00025"]');
if (label.length > 0) {
    var text = label.text().trim();
    if (text == 'TV Bed or Adjustable Bed Assembly') {
        $(".input-combobox__text.input-qty").val("1");
    }
}

answered Jan 14 '16 at 15:43

AtheistP3ace

9,611
12
43
43

looks great but what if there is another product with the same spec? Please see the link : https://jsfiddle.net/ckuxzxms/3/ Can this appear only when the specific product contains this text rather than if the text exist on the page? – John Jan 14 '16 at 15:50
What do you expect that link to do? Its easy enough to make this dynamic enough to handle different scenarios but I need to understand what you expect to happen. – AtheistP3ace Jan 14 '16 at 15:52
Well currently its not checking the text in the page. Its checking the text in the label. As I said its easy enough to change but I need to understand. What do you consider "only when the specific product contains this text"? I am happy to help I just need more info. – AtheistP3ace Jan 14 '16 at 15:53
@ND so you are trying to find all products with Bed in their name and if it has Bed update quantity to 1? – AtheistP3ace Jan 14 '16 at 16:29
Yes I am trying to find all products containing this text "TV Beds..." however the qty might be different array number that is why I want to target QTY with name "related_products[7087458][2536][qty]" – John Jan 14 '16 at 16:50
OK but in the example you have in question you said update quantity regardless if its Wood Bed or TV Bed but Wood Bed does not contain TV Bed. So are we looking for the text to contain Bed or TV Bed? – AtheistP3ace Jan 14 '16 at 16:51
Either way here is an example where we search for all things that have Bed in their name and update quantity. https://jsfiddle.net/ckuxzxms/6/ – AtheistP3ace Jan 14 '16 at 16:52

Check if element exist and start some activity

1 Answers1