Home > Back-end >  Can a radio button in a form be used to select another radio button in the same form?
Can a radio button in a form be used to select another radio button in the same form?

Time:10-30

I have a HTML form that has 2 groups of radio buttons. I need the first group to also change the selection on the second group, i.e.

Group 1 has options A & B, Group 2 has options C & D; when I select A, I need the form to also select C; when I select B, I need the form to also select D. I need A & C selected by default when the page loads. A & C will always be paired; B & D will always be paired.

I know this sounds impractical, but the reason is that this form is sending its responses to another provider's form where I can't edit the fields. They have effectively got a duplicate question in their form (same question just slightly different wording), and I don't want my users to have to answer the same question twice, so I would hope to hide the buttons for C & D from view.

The "name" on the each group is different, and the "value" & "id" for each radio button is unique.

Can this be done? JQuery & JS solutions are welcome.



<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">
            
<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">

<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true"> 
        

CodePudding user response:

Simply set the checked property of the corresponding button.

document.getElementById("buyer").checked = true;
document.getElementById("buyer-select").addEventListener("click", function() {
  document.getElementById("buyer").checked = true;
});

document.getElementById("agent-select").addEventListener("click", function() {
  document.getElementById("agent").checked = true;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">

<br>

<label class="label-text" for="buyer">Buyer</label>
<input type="radio" name="agent" id="buyer" value="false">

<label class="label-text" for="agent">Agent</label>
<input type="radio" name="agent" id="agent" value="true">
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

You can also replace the second set of radio buttons with a single hidden input. Put the values that would have been sent by the radio button into the value of the hidden input.

document.getElementById("buyer-select").addEventListener("click", function() {
  document.getElementById("buyer-agent").value = "false";
});

document.getElementById("agent-select").addEventListener("click", function() {
  document.getElementById("buyer-agent").value = "true";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buyer-select">
    <div class="user-select-label">Buyer</div>
</label>
<input type="radio" name="answers[1234][answers]" id="buyer-select" class="buyer-select" value="buyer" checked>

<label for="agent-select">
    <div class="user-select-label">Agent</div>
</label>
<input type="radio" name="answers[1234][answers]" id="agent-select" class="agent-select" value="broker">

<input type="hidden" name="agent" id="buyer-agent" value="false">
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

Is this what you wanted:

enter image description here

If yes, try this code:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    $('input[type=radio][name="pet"]').change(function() {
    var $radiobutton = $("input[value='" $(this).val() "']");
    $radiobutton.prop("checked", true);
    });
    $('input[type=radio][name="pet2"]').change(function() {
    var $radiobutton = $("input[value='" $(this).val() "']");
    $radiobutton.prop("checked", true);
    });
  }, false);
</script>
</head>

<h2>Select a Pet</h2>
<div>
  <input name="pet" type="radio" value="dog" /><span>Dog</span>
  <input name="pet" type="radio" value="cat" /><span>Cat</span>
  <input name="pet" type="radio" value="fish" /><span>Fish</span>
</div>
<div>
  <input name="pet2" type="radio" value="dog" /><span>Dog</span>
  <input name="pet2" type="radio" value="cat" /><span>Cat</span>
  <input name="pet2" type="radio" value="fish" /><span>Fish</span>
</div>
  • Related