Single radio select on two forms

Question

I have two radio buttons which correspond to two different forms.

Depending on the selected radio, I want to accomplish two different actions, thus the reason why I have two forms.

The problem I'm having is that single-radio select works when the two radios are on a single form. If, by any chance they are in two different forms, the single selection doesn't work.

Both radios have the same name, but I don't know how to force single select based on two different forms. I'm using jQuery (not for radios selection, but the jQuery is there) so although I would prefer not to use jQuery for this action, if it comes down to it, I'm ok with that.

Could anyone provide a solution or a pointer in the solution direction for this?

Best Regards,

EDIT I'm placing some code at request

<div class="payment-details-account-top">
    <form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
        <div class="row all-steps">
            <div class="col-md-12">
                <input type="radio" name="payment-type" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
                <label for="payment-with-card" class="css-radio-label"></label>
                <input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
                <div class="creditcards"></div>
                <!-- <span class="payment-method-message"><?php if ($ba->getMethodCode() == 'payex2') echo $message; ?></span> -->
            </div>
        </div>
    </form> <!-- Close "payment-details-form-card" form -->
</div>
<div class="payment-details-account-bottom">
    <form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
        <div class="col-md-12">
            <input type="radio" name="payment-type" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
            <label for="payment-with-faktura" class="css-radio-label"></label>
            <input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
            <div class="row">
                <ul>
                    <li class="row">
                        <div id="billing-submit" style="display: none;">
                            <input type="reset" name="submit-cancel" id="billing-cancel" value="AVBRYT" class="btn-grey" />&nbsp;&nbsp;
                            <input type="submit" name="submit-payment" id="submit-payment" value="<?php echo $this->__('Bekreft') ?>" class="btn-green" />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>

Answer 1

If I understood correctly, there will be 2 same named radio boxes inside 2 different forms and only one of radio box could be selected at a time. A possible way to achieve this could be like this:

var options = $('form input:radio');

options.click(function() {
  options.prop('checked', false);
  $(this).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form><input type="radio" name="opt"/></form>
<form><input type="radio" name="opt" /></form>

It is basically clean all 'selected' state and re-check the clicked one

Answer 2

Without seeing all of your code, it is hard to tell if you would be better off handling this in a different manner, such as:

1. Use a tab set with each form on a different tab.
2. Use a single form, but change the form's action based on the radio buttons.

If you really want to use two forms with radio buttons like that, you either have to place the radio buttons outside the forms or handle the selecting/unselecting yourself.

---

(1) Placing the radio buttons outside the forms.

HTML:

<label><input type="radio" name="formSelect" value="#form1" checked="checked"/>Form 1</label>
<form id="form1" class="form">
    <input type="text"/>
</form>
<label><input type="radio" name="formSelect" value="#form2"/>Form 2</label>
<form id="form2" class="form">
    <input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>

JQuery:

$('#submitBtn').click(function() {
    var $form = $($('input[name=formSelect]:checked').val());
    alert('submitting form: ' + $form.attr('id'));
    //$form.submit();
});

jsfiddle

---

(2) Handling the selecting/unselecting yourself/.

HTML:

<form id="form1" class="form">
    <label><input type="radio" class="formSelect" checked="checked"/>Form 1</label>
    <input type="text"/>
</form>
<form id="form2" class="form">
    <label><input type="radio" class="formSelect"/>Form 2</label>
    <input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>

JQuery:

$('.formSelect').change(function() {
    $('.form').not($(this).closest('form')).find('.formSelect').prop('checked', false);
});
$('#submitBtn').click(function() {
    var $form = $('.formSelect:checked').closest('form');
    alert('submitting form: ' + $form.attr('id'));
    //$form.submit();
});

jsfiddle

Answer 3

Really, no vanilla JS answer even though OP explicitly mentioned a preference? Simple as this:

var options = document.getElementsByName('mygroup'); 
document.body.addEventListener('click', function(e) {
  if (e.target.name === 'mygroup') {
    for (var i = 0; i < options.length; i++)
      options[i].checked = false;
    e.target.checked = true;
  }
}, false);

See it here: http://jsbin.com/mefibi/1/edit?html,js,output

Answer 4

Most of these answers are almost there and actually provide a path in the right direction..

Since the forms code is a lot more complex than the sample I posted, here's the actual implementation:

$('#payment-with-faktura').on('click', function(){
        $('#payment-with-card').removeAttr("checked");
        $('.billing-address-list input').each(function() {
            $(this).attr({
                'disabled': 'disabled'
            });
        });
        $(".col-order-12").slideDown(300);
        $(".prepaid-extra-method2").slideDown(300);
        if (validateBillingAddress()) {
            $(".payment-button-submit").removeAttr("disabled");
        } else {
            $(".payment-button-submit").attr("disabled", "disabled");
        }
    });

    $('#payment-with-card').on('click', function(){
        $('#payment-with-faktura').removeAttr("checked");
        $("#payment-details-form").find('input[type="text"]').val("");  
        $(".prepaid-extra-method2").slideUp(300);
        $(".col-order-12").slideUp(300);
        if (validateBillingAddress()) {
            $(".payment-button-submit").removeAttr("disabled");
        } else {
            $(".payment-button-submit").attr("disabled", "disabled");
        }
    });