There is one price output div:

<div class="home-main-block_price"> <p>цена</p> <span> <p id="calculated_price" style="display: inline-block; font-size: 34px;></p> </span> <p>с НДС</p> <button type="button">Заказать</button> </div>

The price is considered out of shape. If the value of the field with id="calculated_price" is 0, then output another div instead:

 <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <p>Позвоните нам!</p> </div> </div> </div>

Help. Very necessary. Thank you in advance.

  • Maybe, by condition, show one block and hide another? - Furry Cat
  • in js, jquery is not strong. could not help. - Viktor
  • id = "calculated_price" will be equal to 0 - do you mean the value of the field? - qpeela
  • @qpeela yes. it is calculated in the function, and put in this field - Viktor
  • @Viktor when pressing the button you need to display a modalku? - qpeela

1 answer 1

When the page is loaded, the field with id = calculated_price checked, if it равно 0 then we display the second <div class="modal-dialog"> and hide the first <div class="home-main-block_price"> . I need to insert my script so that it runs only after it is calculated and the value is added to the field.

 .modal-dialog { display: none; } .visible { display: block; } .hidden { display: none; } 
 <!DOCTYPE html> <html> <body> <div class="home-main-block_price"> <p>цена</p> <span> <p id="calculated_price" style="display: inline-block; font-size: 34px;">0</p> </span> <p>с НДС</p> <button type="button">Заказать</button> </div> <div class="modal-dialog" id="modal"> <div class="modal-content"> <div class="modal-body"> <p>Позвоните нам!</p> </div> </div> </div> <script> var price = document.getElementById('calculated_price').innerHTML; var mainBlock = document.getElementsByClassName('home-main-block_price')[0]; if (price == 0) { var modal = document.getElementById('modal'); modal.classList += ' visible'; mainBlock.classList += ' hidden'; } </script> </body> </html>

  • Something is not displayed div modalki. Price processing takes place in the controller. Assume the variable $tariff = 0; . Using the function <script> function calc(){ $('#calculated_price').load('/calc/?'+$('#calc_form').serialize()); } </script> <script> function calc(){ $('#calculated_price').load('/calc/?'+$('#calc_form').serialize()); } </script> this case is processed and transmitted. - Viktor
  • @Viktor have you inserted mine into your code? can you modalka not give id="modal" - qpeela
  • the "home-main-block_price" block is now hidden. and the modal-dialog block is displayed - Viktor
  • @Viktor what do you want? - qpeela
  • I need to initially show the home-main-block_price div , then when id = "calculated_price" gets a price value for example 10.00, the home-main-block_price div was hidden, and a modal-dialog div popped on top with a message. Thank. - Viktor