How to do if I click on radio button, name must be change. Example, if I click on Issue radio button, Security Name but be change to Recipient or if I click on Return radio button, Security Name must be change to "Return by". And I have no idea how to make it. Is there a way to do that?

<div  style="margin-left: 60px;">
    <p  style="display: inline-flex;white-space: break-spaces;">
        <label><input type="radio" name="status" onclick="check(this.value)" value="issue" ><b>Issue</b></label>
        <br>
        <label><input type="radio" name="status" onclick="check(this.value)" value="returnn" ><b>Return</b></label>
    </p>
  </div>

Second code is for Showing Security Name.

<label  for="badgeid" style="margin-left: -50px;">Security Name:</label>
  <div >
    <p  style="margin-top: -6px;">
        <input type="text"  id="secuname" name="secuname" placeholder="Enter Name" value="<?php echo $securityname; ?>">
    </p>
  </div>
  <div ></div>
  <br>

CodePudding user response：

You can listen for the change event on the radios :

let radios = document.querySelectorAll('input[type=radio][name="status"]');
radios.forEach(radio => {

    radio.addEventListener('change', (radio) => {
       let value = radio.value
       // hide all irrelevant inputs
       let divs = document.querySelectorAll('div.depend-on-radio-status');
       divs.forEach(div => {
           divs.style.display = 'none';
       })
       // show relevant input
       let div = document.querySelector('div.depend-on-radio-status.value-'   value);
       div.style.display = 'block'
    })
});

// set the default value here in the style
<div  style="display:block">
// your issue input / label
<div>
<div  style="display:none">
// your return input / label
</div>

CodePudding user response：

Here Is Your Answer(last code section)

<div  style="margin-left: 60px;">
    <p  style="display: inline-flex;white-space: break-spaces;">
    <label><input type="radio" name="status" onclick="check(this.value)" value="issue" ><b>Issue</b></label>
    <br>
    <label><input type="radio" name="status" onclick="check(this.value)" value="returnn" ><b>Return</b></label>
    </p>
</div>

<label  for="badgeid" style="margin-left: -50px;">Security Name:</label>

<div >
    <p  style="margin-top: -6px;">
        <input type="text"  id="secuname" name="secuname" placeholder="Enter Name" value="<?php echo $securityname; ?>">
      </p>
</div>

That's your code, now the JS you wanted in comments to do change an input's name based on another radio button input

is here

var statusRadioButtons = document.getElementsByName('status');
var specialInput = document.querySelector('#secuname') ;
statusRadioButtons.forEach( item => item.addEventListener("change",handleChangeName)) 
function handleChangeName(ev) {
    var value = ev.target.value;
    if( value == "issue" ) {
         specialInput.setAttribute('name','receipt') ;
    } else if ( value == "returnn" ) { 
         specialInput.setAttribute('name','returnBy') ;
    } 
}