CODEWITHSUNDEEP
javascriptjqueryhtml
Beytulla OO
Beytulla OO

Reputation: 39

Change content by id with javascript

i have little problem with my script.

I am trying to add some information when you select an option from the html form.

I have done it, but when I have, for example:

<select><option>Test1</option><option>Test2</option></select>

I select option Test1 and the information is coming. When I select Test2 the information is also coming but it does not not hide Test1.

And after this when I chose Test1 again from the options, my script is adding this 1 more time, and it continues like this. 

<select name="amount" id="amount">
    <option disabled selected>- Избери -</option>
    <option value="3.20">5v5 Сървър 3.20 <?php echo CURRENCY_CODE; ?></option>
    <option value="9.45">5v5 Сървър 9.45 <?php echo CURRENCY_CODE; ?></option>
    <option value="17.91">PREMIUM (31) <?php echo CURRENCY_CODE; ?></option>
    <option value="12.99">ADVANCED (21) <?php echo CURRENCY_CODE; ?></option>
</select>
<li>
  <div id="custom_price">
    <h3><b><i class="fas fa-info-circle"></i> Информация за услугата:<br>
  </div>
</li>
<li>
  <div id="custom_price2">
    <h3><b><i class="fas fa-info-circle"></i> Информация за услугата:<br>
  </div>
</li>
<script type="text/javascript">
$("#custom_price").hide();
$("select[name=amount]").change(function() {
    var $this = $(this);
    if ($this.val() == '3.20') {
        $("#custom_price").show();
        $("#custom_price").append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)седмица!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    }else if ($this.val() == '9.45') {
        $("#custom_price2").show();
        $("#custom_price2").append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)месец!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    }else{
       document.getElementById('custom_price').innerHTML = "";
        document.getElementById('custom_price').innerHTML = "Custom price:<br>";
        $("#custom_price").hide();
        document.getElementById('custom_price2').innerHTML = "";
        document.getElementById('custom_price2').innerHTML = "Custom price:<br>";
        $("#custom_price2").hide();
    }
});
</script>

after select i have this ...

Custom price: МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО МАКС. (10)СЛОТА ЗА ИГРА.

Тази услуга е валидна (1)седмица!

Цена на тази услуга: 3.20EUR МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО МАКС. (10)СЛОТА ЗА ИГРА.

Тази услуга е валидна (1)седмица!

Цена на тази услуга: 3.20EUR МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО МАКС. (10)СЛОТА ЗА ИГРА.

Тази услуга е валидна (1)седмица!

Цена на тази услуга: 3.20EUR Custom price: МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО МАКС. (10)СЛОТА ЗА ИГРА.

Тази услуга е валидна (1)месец!

Цена на тази услуга: 3.20EUR МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО МАКС. (10)СЛОТА ЗА ИГРА.

Тази услуга е валидна (1)месец!

Цена на тази услуга: 3.20EUR

Upvotes: 1

Views: 142

Answers (3)

Beytulla OO
Beytulla OO

Reputation: 39

Thank you Annshuk my final code is like this:

<div class="row">
<ul class="payform">
<div class="column">
<li>
   <h2>Изберете подходящия за вас план:</h2><br>
</li>
<select name="amount" id="amount">
    <option disabled selected>- Избери -</option>
    <option value="3.20">5v5 Сървър 3.20 <?php echo CURRENCY_CODE; ?></option>
    <option value="9.45">5v5 Сървър 9.45 <?php echo CURRENCY_CODE; ?></option>
    <option value="17.91">PREMIUM (31) <?php echo CURRENCY_CODE; ?></option>
    <option value="12.99">ADVANCED (21) <?php echo CURRENCY_CODE; ?></option>
</select>
</div>
<div class="column">
    <li>
    <div id="custom_price"></div>
    </li>
    <li>
    <div id="custom_price2"></div>
    </li>
    <input type="hidden" name="return" value="<?php echo RETURN_URL; ?>">
    <input type="hidden" name="notify_url" value="<?php echo IPN_URL; ?>"/>
    <li>
    <div>
        <label for="ref">МЕТОД НА ПЛАЩАНЕ:</label>
        <input name="custom" placeholder="PAYPAL" readonly="yes" value="PAYPAL" />
        <span style="float:right; color: #999; font-size: 10px;">Задължителен</span>
    </div>
    </li>
</div>
    <br>
    <p class="pttl"><i class="fas fa-eye"></i> Споразумение с потребителя</p>
    <label id="chkbx"><font color="red">Да</font>, прочетох и съм съгласен с правилата, условията и политиката за поверителност
    <input type="checkbox" required name="checkbox" value="check"></label>
    <li>
    <input type="image" name="submit" src="<?php echo $baseurl;?>/p4f-assets/images/payment/paynow_btn.png" style="max-width:141px;max-height:39px;">
</li>
</ul>
</div>
</form>
</div>

<script type="text/javascript">
$("select[name=amount]").change(function() {
    var $this = $(this);
    if ($this.val() == '3.20') {
            $("#custom_price2").hide().html("");
        $("#custom_price").show().append('<h3><b><i class="fas fa-info-circle"></i> Информация за услугата:</b></h3><p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)седмица!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    } else if ($this.val() == '9.45') {
             $("#custom_price").hide().html("");
          $("#custom_price2").show().append('<h3><b><i class="fas fa-info-circle"></i> Информация за услугата:</b></h3><p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)месец!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    } else {
         $('#custom_price').html("Custom price:");
     $('#custom_price2').html("Custom price:");
        }

});
</script>```

Upvotes: 1

Anshuk
Anshuk

Reputation: 91

please check this one, it more simple https://jsbin.com/rirupuv/edit?html,output

<select name="amount" id="amount">
<option disabled selected>- Избери -</option>
<option value="3.20">5v5 Сървър 3.20 <?php echo CURRENCY_CODE; ?></option>
<option value="9.45">5v5 Сървър 9.45 <?php echo CURRENCY_CODE; ?></option>
<option value="17.91">PREMIUM (31) <?php echo CURRENCY_CODE; ?></option>
<option value="12.99">ADVANCED (21) <?php echo CURRENCY_CODE; ?></option>


<ul class="main">
        <li id="custom_price">
  <div >
    <h3><b><i class="fas fa-info-circle"></i> Информация за услугата:<br>
  </div>
</li>
<li  id="custom_price2">
  <div>
    <h3><b><i class="fas fa-info-circle"></i> Информация 9а услугата:<br>
  </div>
</li>
        </ul>
<script type="text/javascript">
$("select[name=amount]").change(function() {
    var $this = $(this);
    if ($this.val() == '3.20') {
            $("#custom_price2").hide().html("<b>Информация за услугата</b>")
        $("#custom_price").show().append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)седмица!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    } else if ($this.val() == '9.45') {
             $("#custom_price").hide().html("<b>Информация 9а услугата</b>")
          $("#custom_price2").show().append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)месец!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    } else {
         $('#custom_price').html("Custom price:");
     $('#custom_price2').html("Custom price:");
        }

});
</script>

Upvotes: 0

imvain2
imvain2

Reputation: 15847

A simple solution is to give your custom_price divs the same class. Then simply hide that class before showing the matching ID.

So <div id="custom_price2"> becomes <div class="pricing" id="custom_price2"> and <div id="custom_price"> becomes <div class="pricing" id="custom_price">

$(".pricing").hide(); //hide all pricing FIRST
$("select[name=amount]").change(function() {
    var $this = $(this);

    $(".pricing").hide(); //hide all pricing on selecting, just in case one is already visible.

    if ($this.val() == '3.20') {
        $("#custom_price").show();
        $("#custom_price").append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)седмица!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    }else if ($this.val() == '9.45') {
        $("#custom_price2").show();
        $("#custom_price2").append('<p>МОЖЕ ДА ИЗПОЛЗВАТЕ ТОЗИ ТИП СЪРВЪР САМО ЗА УГОВОРЕНИ СРЕЩИ ИЛИ ДО <font color="red"><b>МАКС. (10)СЛОТА ЗА ИГРА</b></font>.</p><br /><p>Тази услуга е валидна <font color="red"><b>(1)месец!</b></font></p> <b>Цена на тази услуга:</b> <font color="red"><em><b>3.20<?php echo CURRENCY_CODE; ?></b></em></font>');
    }else{
       $('#custom_price').html("Custom price:");
       $('#custom_price2').html("Custom price:");
    }
});

Upvotes: 0

Related Questions