Advertisement
oscarviedma

Código Formulario Donaciones WA OV

Feb 21st, 2024
982
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.40 KB | None | 0 0
  1. <form id="ov-donation-form">
  2.     <input type="hidden" name="amount" id="selected-amount" value="">
  3.     <div id="ov-group-buttons">
  4.         <button type="button" class="ov-donation-button" data-amount="5">$5</button>
  5.         <button type="button" class="ov-donation-button" data-amount="50">$50</button>
  6.         <button type="button" class="ov-donation-button" data-amount="100">$100</button>
  7.         <button type="button" class="ov-donation-button" data-amount="200">$200</button>
  8.         <button type="button" class="ov-donation-button" data-amount="500">$500</button>
  9.         <button type="button" class="ov-donation-button" data-amount="800">$800</button>
  10.         <button type="button" class="ov-donation-button" data-amount="1000">$1000</button>
  11.     </div>
  12.     <label>Ingresa otra cantidad:</label>
  13.     <input type="number" name="custom-amount" id="custom-amount" placeholder="Cantidad personalizada">
  14.     <button type="button" id="ov-donate-button">Donar</button>
  15. </form>
  16.  
  17. <script>
  18. document.getElementById('ov-donate-button').addEventListener('click', () => {
  19.     const selectedAmount = document.getElementById('selected-amount').value;
  20.     const mensajeWhatsApp = `¡Hola! Quiero donar $${selectedAmount} MXN para apoyar la causa.`;
  21.     const whatsappURL = `https://wa.me/529511234567?text=${encodeURIComponent(mensajeWhatsApp)}`;
  22.     window.open(whatsappURL, '_blank');
  23. });
  24.  
  25. document.querySelectorAll('.ov-donation-button').forEach(button => {
  26.     button.addEventListener('click', function() {
  27.         const selectedAmount = this.getAttribute('data-amount');
  28.         document.getElementById('selected-amount').value = selectedAmount;
  29.         document.getElementById('custom-amount').value = '';
  30.         document.querySelectorAll('.ov-donation-button').forEach(btn => {
  31.             btn.classList.remove('selected');
  32.         });
  33.         this.classList.add('selected');
  34.        
  35.         document.getElementById('ov-donate-button').innerText = 'Donar $' + selectedAmount + ' MXN';
  36.     });
  37. });
  38.  
  39. document.getElementById('custom-amount').addEventListener('input', function() {
  40.     const customAmount = this.value;
  41.     document.getElementById('selected-amount').value = customAmount;
  42.     document.querySelectorAll('.ov-donation-button').forEach(btn => {
  43.         btn.classList.remove('selected');
  44.     });
  45.  
  46.     document.getElementById('ov-donate-button').innerText = 'Donar $' + customAmount + ' MXN';
  47. });
  48. </script>
  49.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement