How to Show PopUp if clicked radio button?

JavaScript
1

I need to show a popup along with custom information if customer select radio button.

2

You’re not going to be able to do this in PHP. Perhaps you would like us to move this to the JS forum?

1 Like
3

Hi @aveevan, that sounds pretty obtrusive as you wouldn’t normally expect to have to click away a popup after just changing a radio value. Anyway the general approach would be to add a click event listener to that radio, and then show the modal – how to do that however depends on which library (if any) you are currently using for your popups.

Here’s an example using native alert()s though (don’t use that in production):

<input type="radio" value="foo" name="obtrusive-radio">
<input type="radio" value="bar" name="obtrusive-radio">

document.addEventListener('click', function (event) {
  if (event.target.name === 'obtrusive-radio') {
  	alert(event.target.value)
  }
})
4

<input name="shipping_method" type="radio" value="<?php echo $_rate->getCode() ?>" id="s_method_<?php echo $_rate->getCode() ?> "<?php if($_rate->getCode()===$this->getAddressShippingMethod()) echo ' checked="checked"' ?> class="radio"/>

Value inside the input field, how to write my own popup information value inside the script.

5

A PHTML file should contain both HTML and PHP code.

You can add JS by putting the code between <script>...</script> tags and placing the script section before the closing <body> tag.

6

okay, I saw name obtrusive-radio , my input field already has name and id then how can i declare name or id. Help me thanks. how to solve this

7

My input field

<input name="shipping_method" type="radio" value="<?php echo $_rate->getCode() ?>" id="s_method_<?php echo $_rate->getCode() ?> "<?php if($_rate->getCode()===$this->getAddressShippingMethod()) echo ' checked="checked"' ?> class="radio"/>

8

Well then, use the name shipping_method in place of obtrusive-radio in the code that @m3g4p0p gave you.

9

Fine, also have value inside the input field, how to write my own popup information value inside the script.

10

You can store arbitrary (string) data on DOM elements using data attributes, for instance:

<button id="my-button" data-text="Hello world!">click me</button>

document
  .getElementById('my-button')
  .addEventListener('click', function (event) {
    alert(event.target.dataset.text)
  })

But again, the alert() is just for demonstration purposes and not suitable for any real web page.

11

You could do something along the lines of this pen.

12

Bro, can i get help regard PopUp if click button

13

Doesn’t the alert command result in that?

14

What are you using for your popup to begin with? There’s no built-in popup mechanism other than aforementioned alert(), and maybe dialog elements which are however experimental at this point.

So you’ll need a bit of JS and CSS for this; a simple popup is not that difficult to implement yourself, but if you don’t have any prior experience with either of these you’ll have to do some homework first. Otherwise there’s no shortage of 3rd party solutions; some will only require you to include the JS and CSS in your page, and then you can define the logic purely declaratively in the markup (as with bootstrap modals, for example).

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.