Question 281342 in Html Question posted in
Some basic documentation can be found here.

Html – Change text next to radio button

I am currently working on a website which was partly developed by another party. This website is a mobile repair shop where a customer clicks a device and type of repair. After this he selects to bring the device to the store. Below the selection of date and time, the customer needs to choose the store.

Option1 (currently): Zupthen
Option2 (currently): Winterswijk

Option1 needs to be replaced to: Barneveld.
Option2: Needs to be removed.

How can change this in HTML? I was able to find the current HTML by inspect tool.
The link of the website is:
https://phonexpert.logistieke-baan.nl/reparatie-aanmelden/?_brand=apple&_type=ipad&_model=3411

Screenshot of the form and the choose of location.

                        </div>
                        <div class="ic-select-store">
                            <h3>Welke winkel wil je bezoeken?</h3>
                            <div>
                                <div class="ic-single-store">
                                    <input type="radio" id="first_store" name="selected_store" value="Zutphen">
                                    <label for="first_store">Zutphen</label>
                                </div>
                                <div class="ic-single-store">
                                    <input type="radio" id="second_store" name="selected_store" value="Winterswijk">
                                    <label for="second_store">Winterswijk</label>
                                </div>
                            </div>
                            <p id="error_selected_store"></p>
                        </div>
                        <label for="aggreement" class="ic-checkbox">
                            Ik ga akkoord met de <a class="terms-condition" data-bs-toggle="modal" data-bs-target="#termsCondition">algemene voorwaarden</a>.
                            <input type="checkbox" name="aggreement" id="aggreement">
                            <span class="checkmark"></span>
                            <!-- Button trigger modal -->
                        </label>
                        <br>
                        <button type="button" class="ic-btn-fill ic-form-submit">Aanmelden</button>
                    </div>
                            </div>
        </div>
    </div>
</div>



<!-- form confirmation -->
<div class="modal fade" id="dataSubmitServices" tabindex="-1" aria-labelledby="dataSubmitServicesLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                                    <p>Kan doorgaan met afspraak zonder akkoord te gaan met voorwaarden.</p>
                            </div>
            <div class="modal-footer">
                <button type="button" class="ic-btn-fill gray" data-bs-dismiss="modal">Decline (Annuleren)</button>
                <button type="button" class="ic-btn-fill green ic-form-submit confirm" id="dataSend">Approve (Akkoord)</button>
            </div>
        </div>
    </div>
</div>

Thins I tried myself I
I try to use Google Inspect to find the HTML Tag/Classes.
I place a html widget (elementor) where i can paste it in.

Tags:

2

Answers


  1. 0

    Is that what you need?

    <div class="ic-select-store">
  <h3>Welke winkel wil je bezoeken?</h3>
  <div>
    <div class="ic-single-store">
      <input type="radio" id="first_store" name="selected_store" value="Zutphen" checked>
      <label for="first_store">Barneveld</label>
    </div>
  </div>
  <p id="error_selected_store"></p>
</div>
<label for="aggreement" class="ic-checkbox">
  Ik ga akkoord met de <a class="terms-condition" data-bs-toggle="modal" data-bs-target="#termsCondition">algemene
    voorwaarden</a>.
  <input type="checkbox" name="aggreement" id="aggreement">
  <span class="checkmark"></span>
  <!-- Button trigger modal -->
</label>
<br>
<button type="button" class="ic-btn-fill ic-form-submit">Aanmelden</button>
</div>
</div>
</div>
</div>
</div>

<!-- form confirmation -->
<div class="modal fade" id="dataSubmitServices" tabindex="-1" aria-labelledby="dataSubmitServicesLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Kan doorgaan met afspraak zonder akkoord te gaan met voorwaarden.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="ic-btn-fill gray" data-bs-dismiss="modal">Decline (Annuleren)</button>
        <button type="button" class="ic-btn-fill green ic-form-submit confirm" id="dataSend">Approve (Akkoord)</button>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    this will remove the 2nd div, and change the value and text of 1st, after Bring it yourself input is ticked, because the form usually appears after input is ticked

    var deliveryCheckbox = document.querySelector("input[value='bring-your-own']");

deliveryCheckbox.addEventListener("change", function() {
  if (this.checked) {
  var singleStoreDivs = document.querySelectorAll(".ic-single-store");
  for (var i = 0; i < singleStoreDivs.length; i++) {
    if (i === 1) {
      singleStoreDivs[i].remove();
    }
  }
  var firstStoreInput = document.querySelector("#first_store");
  var firstStoreLabel = document.querySelector("label[for='first_store'] font font");
  
  firstStoreInput.value = "Barneveld";
  firstStoreLabel.innerText = "Barneveld";
      
  }
});
    <label class="ic-radio" for="item-3">
  <input class="check-validate" type="radio" name="delivery" value="bring-your-own" id="item-3">
  <i></i>
  <span>
    <span class="delivery-title">
      <span>
        <strong>
          <font style="vertical-align: inherit;">
            <font style="vertical-align: inherit;">Bring it yourself</font>
          </font>
        </strong>
      </span>
    </span>
    <span></span>
  </span>
</label>
<div class="ic-select-store">
  <h3>Welke winkel wil je bezoeken?</h3>
  <div>
    <div class="ic-single-store">
      <input type="radio" id="first_store" name="selected_store" value="Zutphen">
      <label for="first_store">
        <font style="vertical-align: inherit;">
          <font style="vertical-align: inherit;">Zutphen</font>
        </font>
      </label>
    </div>
    <div class="ic-single-store">
    <style>.ic-select-store{display:none;}</style>
      <input type="radio" id="second_store" name="selected_store" value="Winterswijk">
      <label for="second_store">Winterswijk</label>
    </div>
  </div>
  <p id="error_selected_store"></p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search