1

I have this form: 

<form id="platba">
             <label class="c-input c-radio">
              <input id="radio1" name="radio" type="radio" value="https://www.paypal.com/uk/webapps/mpp/home">
              <span class="c-indicator"></span>
              <img src="img/payments/paypal.png" width="80" style="margin-top:-5px">&nbsp Paypal
            </label>
             <br />
             <br />
            <label class="c-input c-radio">
              <input id="radio2" name="radio" type="radio" value="http://www.mbank.cz/osobni/">
              <span class="c-indicator"></span>
              <img src="img/payments/mbank.png" width="80" style="margin-top:-5px">&nbsp mBank
            </label>
             <br />
             <br />
            <label class="c-input c-radio">
              <input id="radio2" name="radio" type="radio" value="http://example.com/platebnikarta">
              <span class="c-indicator"></span>
              <img src="img/payments/visa_mastercard.png" width="80" style="margin-top:-5px">&nbsp Platební karta
            </label>
            <hr>            

            <button type="submit" class="btn btn-primary">Pokračovat v placení</button>
</form>

And at the end of the file i have javascript which open new window based on radio button selection:

$(document).ready(function(){
      $("#platba").submit(function(){
        event.preventDefault();
        var loc = $('input[name="radio"]:checked').val();
        window.open(loc,'_blank');
        //self.close ();
      });

    });

It is working fine in Google Chrome and IE, but in firefox it just add the value of radio button into the adressbar. Example:

http://something/something/something/something.php?radio=https%3A%2F%2Fwww.paypal.com%2Fuk%2Fwebapps%2Fmpp%2Fhome
user3197269
  • 93
  • 3
  • 12
  • Not sure if this causes your problems, but the first thing I noticed is that you have two radio's with the same `id="radio2"`! (the second one and the third one). The third one should be `id="radio3"` – Laurens Swart Feb 02 '16 at 14:04
  • Perhaps the windows is blocked considered as a popup? try removing _blank, it should open as a new tab. – peterpeterson Feb 02 '16 at 14:05
  • Thank you, i changed the id, but the problem still persist. – user3197269 Feb 02 '16 at 14:07
  • Removing "_blank" did not solved the problem. – user3197269 Feb 02 '16 at 14:09
  • afaik. every window.open that doesn't trigger withing like 40ms after a physical click-event (nothing simulated) is considered being a popup. **use a modal box** – Thomas Feb 02 '16 at 14:09
  • I tried to run firefox in safe mode with addons disabled, did not helped. – user3197269 Feb 02 '16 at 14:15
  • FF doesn't use global event model, see @LaurensSwart answer below. That's said, if you just had opened your console to debug your code, you wouldn't have to post any question here... – A. Wolff Feb 02 '16 at 14:16

1 Answers1

3

Your event in event.preventDefault is undefined. You have to define it in the function that you call it in:

$("#platba").submit(function(event) {
  event.preventDefault();
});

Here is your corrected code that also works in Firefox (tested it myself on jsfiddle): https://jsfiddle.net/duzwo5bk/7/

Here is the code. Note: it doesn't work here because you cannot do popups from these snippets on StackOverflow

I also fixed the ID of your third radio :)

$(document).ready(function() {
  $("#platba").submit(function(event) {
    event.preventDefault();
    var loc = $('input[name="radio"]:checked').val();
    window.open(loc, '_blank');
    //self.close ();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="platba">
<label class="c-input c-radio">
  <input id="radio1" name="radio" type="radio" value="https://www.paypal.com/uk/webapps/mpp/home">
  <span class="c-indicator"></span>
  <img src="img/payments/paypal.png" width="80" style="margin-top:-5px">&nbsp; Paypal
</label>
<br />
<br />
<label class="c-input c-radio">
  <input id="radio2" name="radio" type="radio" value="http://www.mbank.cz/osobni/">
  <span class="c-indicator"></span>
  <img src="img/payments/mbank.png" width="80" style="margin-top:-5px">&nbsp; mBank
</label>
<br />
<br />
<label class="c-input c-radio">
  <input id="radio3" name="radio" type="radio" value="http://example.com/platebnikarta">
  <span class="c-indicator"></span>
  <img src="img/payments/visa_mastercard.png" width="80" style="margin-top:-5px">&nbsp; Platební karta
</label>
<hr>

<button type="submit" class="btn btn-primary">Pokračovat v placení</button>
</form>
Laurens Swart
  • 1,234
  • 9
  • 24
  • Thank you, it solved my problem. – user3197269 Feb 02 '16 at 14:20
  • You're most welcome! Pro tip: open the console in firefox (right click anywhere on your page, then click Inspect element, then select the console tab) and you would have seen your: `event is undefined` error :) – Laurens Swart Feb 02 '16 at 14:28