Auto-Select Radio Button By Default And Execute 'onchange' Function

Question

I've achieved the first part of the question using php or js. I use php to echo checked attribute. The problem here is that the radio inputs have other inputs that become visible upon selection with onchange event. However, if any of the radio gets selected/checked by default, the conditional inputs aren't displayed until I change the radio selections. Hence the question, how do I get it checked by default and still have the respective conditional inputs displayed.

<input  name="mode" id="single" onchange="conditionalDisplay(this.value)"  type="radio"  value="single" <?php if($mode == single){echo 'checked';}>
<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio"  value="multi" <?php if($mode == multi){echo 'checked';}>

When single is selected, other inputs become visible. Same goes for multi. If the condition specified in the php code is true, then one of them gets selected/checked by default but the accompanying hidden inputs from the onchange function are not displayed until the selection is changed.

N:B - The value of $mode is retrieved from a database.

Did you try to trigger an `onchange` event programmatically? For ex., `document.getElementById('single').onchange()`. — Ihor Vyspiansky, Aug 30 '20 at 06:25
Yeah, I've done that already. The problem is that it doesn't get triggered if the input is autochecked, only when it's selected by the user does it get triggered. — Samuel Jones, Aug 30 '20 at 06:32
Hmm, interesting. Take a look https://codepen.io/vyspiansky/pen/poywOJa?editors=1011 I've tested in Chrome and it prints a `conditionalDisplay` output in the browser console without any user action. — Ihor Vyspiansky, Aug 30 '20 at 06:48
Thanks very much. The code helped point me in the right direction. All that was needed was adding an event listener. A few changes and my problem was solved. If you can add your comment in a more detailed fashion as an answer so I can mark as answer. — Samuel Jones, Aug 30 '20 at 09:02

score 0 · Accepted Answer · answered Aug 30 '20 at 09:13

You can trigger onchange programmatically, for ex., with element.onchange();.

function conditionalDisplay(value) {
  // Let's for example log to browser console
  console.log('Do something useful with ' + value);
}

// When DOM is ready, trigger an `onchange` event
document.addEventListener('DOMContentLoaded', function() {
  var singleElement = document.getElementById('single');
  var multiElement = document.getElementById('multi');
  
  // Test which exactly element is checked
  console.log(`singleElement.checked: ${singleElement.checked}`);
  console.log(`multiElement.checked: ${multiElement.checked}`);
  
  if (singleElement.checked == true) {
    singleElement.onchange();
  } else {
    multiElement.onchange();
  } 
});

<input name="mode" id="single" onchange="conditionalDisplay(this.value)" type="radio" value="single">

<input name="mode" id="multi" onchange="conditionalDisplay(this.value)" type="radio" value="multi" checked>

This one might be useful for you as well How can I trigger an onchange event manually?

Auto-Select Radio Button By Default And Execute 'onchange' Function

1 Answers1