Új hozzászólás Aktív témák

• nevemfel senior tag

  #9578

  #9577 Chrystall

  2022-12-28 14:52:24

  Új Válasz

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  

  nevemfel

  senior tag

  #9577 Chrystall

  #9577 Chrystall

  Sziasztok! Ebben tudnátok nekem segíteni?

  Egy Radio Button típusú választási opció van ebben a kódban mint látható. Azt az kellene még a scripthez, hogy ha a Radio3 ID-jű input van kiválasztva a látogató által, akkor jelenjen meg az alatt a sor alatt egy ilyen szöveg, hogy "Your Gmail address", és alatta egy <div>-et illesszen be, amibe majd űrlap sávot csinálok, azzal majd kiegészítem a script-et is később.Ha pedig a Radio1-2 van kiválasztva, akkor tűnjön el.

  <div id="497489" align="left" style="width: 100%; overflow-y: hidden;" class="wcustomhtml"><div class="gombkeret">
<input id="radio1" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr?" checked=""><label for="radio1" class="radio"><strong> Standard Mail:<span class="shippingfee"> £5</span></strong> </label>
<input id="radio2" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr"><label for="radio2" class="radio">  <strong> Registered Mail: <span class="shippingfee"> £9</span></strong> </label>
<input id="radio3" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr"> <label for="radio3" class="radio"><strong> Download Only (.ISO format 4.3GB, playable on Computers, Tablets and Phones with free <a href="https://www.videolan.org">VLC Player</a>)</strong></label>
</div>
<div id="down_icon2"><a href="https://www.paypal.com/cgi-bin/webscr"><img src="files/theme/paypal.png"></a></div>
<div id="paypalsecure"><img src="files/theme/secure2.png"></div>

  <script>
var sliders = document.getElementsByName('radio');
var linkWrapper = document.getElementById('down_icon2');

  for (var i in sliders){
    if(sliders[i].addEventListener){
      sliders[i].addEventListener('click', function(){
       linkWrapper.childNodes[0].setAttribute('href', this.getAttribute('data-href'));
    });
  }
}
</script></div>

  Kicsit átalakítottam a scriptet is:

  <div id="497489" style="width: 100%; overflow-y: hidden;" class="wcustomhtml">
    <div class="gombkeret">
        <input id="radio1" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr?test=1" checked=""><label for="radio1" class="radio"><strong> Standard Mail:<span class="shippingfee"> £5</span></strong> </label>
        <input id="radio2" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr?test=2"><label for="radio2" class="radio"> <strong> Registered Mail: <span class="shippingfee"> £9</span></strong> </label>
        <input id="radio3" type="radio" name="radio" data-href="https://www.paypal.com/cgi-bin/webscr?test=3"> <label for="radio3" class="radio"><strong> Download Only (.ISO format 4.3GB, playable on Computers, Tablets and Phones with free <a href="https://www.videolan.org">VLC Player</a>)</strong></label>
        <div id="address_block"><label for="gmail_address">Your Gmail address:</label> <input type="text" id="gmail_address" name="gmail_address"></div>
    </div>
    <div id="down_icon2"><a href="https://www.paypal.com/cgi-bin/webscr"><img src="files/theme/paypal.png"></a></div>
    <div id="paypalsecure"><img src="files/theme/secure2.png"></div>
    <script>
        var sliders = document.querySelectorAll(".gombkeret input[type='radio']");
        var link = document.querySelector("#down_icon2 a");
        var i;
        for (i = 0; i < sliders.length; i++) {
            sliders[i].addEventListener("change", function() {
                var address_block = document.querySelector("#address_block");
                link.setAttribute("href", this.getAttribute("data-href"));
                if (this.checked && this.getAttribute("id") === "radio3") {
                    address_block.style.display = "block";
                } else {
                    address_block.style.display = "none";
                }
            });
        }
    </script>
</div>

Új hozzászólás Aktív témák