dymanic forms fields based on radio boxes

Question

I want to make a dynamic form. I am basing this on the post here How To Show And Hide Input Fields Based On Radio Button Selection which has an updated jsfiddle here http://jsfiddle.net/QAaHP/16/

function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';
}

Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"/>
No <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="noCheck"/>
<br>
<div id="ifYes" style="visibility:hidden">
    If yes, explain:
    <input type='text' id='yes' name='yes'/>
    <br>What can we do to accommodate you?
    <input type='text' id='acc' name='acc'/>
</div>
other 3 <input type='text' id='other3' name='other3'><br>
other 4 <input type='text' id='other4' name='other4'><br>

Not being a big fan of javascript, I tried to modify this in a new jsfiddle here for detection of 'ifno' condition as well

http://jsfiddle.net/35nxgw8o/

My goal is to detect both the 'no' and 'yes' conditions so that I am making this an 'either/or, never 'both' condition but having little luck doing so. Maybe I am goiing about it all wrong?

You're being vague here as to what your actual problem is, but you've set `visibility: hidden` on that div, so its contents will not be visible, regardless of what you set `display` to. — miken32, Apr 05 '19 at 18:14
@Stevish Not sure how to implement "onchange" as suggested here . Maybe someone can show an example? — Mark, Apr 05 '19 at 19:08
@miken32 Let me clarify. When yes/no condition is chaged , it should show one or the other (either or) never both. — Mark, Apr 05 '19 at 19:10
@miken32 one or the other options or set of options; one hidden wile other is displayed — Mark, Apr 05 '19 at 19:12
I'm not following. `
` is the only thing being shown/hidden. There's nothing else but some other inputs. — miken32, Apr 05 '19 at 19:14
@miken32 frst if I knew exactly how to do this I would have no need to post it here . I added the "ifno to the javascript trying to add a toggle option a or option b so that A and B never show at the same time. If tyou compare the oroginal post I references (jsfiddle) with my jsfiddle you will see the difference . — Mark, Apr 05 '19 at 19:25
So the code in your question isn't the code you're asking about? That would explain things a little better. Please include the code in your question, and remove code that isn't relevant to the problem you're having. — miken32, Apr 05 '19 at 19:28
@miken32 its ALL there including what I started from there are 2 jsfiddles. — Mark, Apr 05 '19 at 19:36
Please include the code that you are having problems with **in the question** — miken32, Apr 05 '19 at 19:37
Sorry, I only know how to do it with jQuery. Are you ok with using jQuery? It involves loading up an external library of javascript code. — Stevish, Apr 05 '19 at 19:42
@Stevish I will take whatever I can get at this point, thanks for the offer. I want to empasise in the above example option A stays wither yes or no is selected, and only Option B appears/dissappears. I need to toggle between A and B when yes/no selected/unselected — Mark, Apr 05 '19 at 19:56

score 0 · Answer 1 · answered Apr 06 '19 at 06:31

@Stevish Indeed onchage does it.

I am posting what I used here as is so others may find it useful. It is PHP and Javascript. It allws me to set the pre-determined variable in the URL (GET) , then depending on which way it was loaded,(hideshow or showhide) Javascript handles it from there.

echo '><span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;Yes</span><input type="radio" name="mppdf" value="yes" onChange="getValue(this)"';

    if ($_GET['mppdf']!='yes') 
    {
    $showhide=' style="display: none "';
    $hideshow=' style="display: block "';
    echo ' checked';
    }
    else
    {
    }

    if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') || (isset($_GET['pdfname'])))
    {
    $hideshow=' style="display:none; "';
    $showhide=' style="display: block "';
    echo ' checked';
    }
    else
    {



echo '><div id="yourfield1" '.$showhide.'>';
echo'<input style="width: 120px; height: 16px; color:#666; background-color: #DDD; font-weight:bold" type="text" value="'.$_GET['pdfname'].'" placeholder="'.$name.'" id="pdfname" name="pdfname"'; 


echo' <div id="yourfield2" '.$hideshow.'"> ';
echo'
<span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;jpg</span> 
<input type="radio" name="jpgpdf" value="no" id="JPG"';
    if (($_GET['pdf']!='yes') && ($_GET['mppdf']!='yes') && (!isset($_GET['pdfname'])))
    {
    echo ' checked';
    }
    else
    {
    }
echo '><span style="color:#666; font-weight:bold; line-height: 300%">&nbsp;pdf</span><input type="radio" name="jpgpdf" value="no" id="PDF"';

    if (($_GET['pdf']=='yes') || ($_GET['mppdf']=='yes') ||(isset($_GET['pdfname'])))
    {
    echo ' checked';
    }
    else
    {
    }
echo'>    
</div>';

<script type="text/javascript">
function getValue(x) {
if(x.value == 'No'){
  document.getElementById("yourfield1").style.display = 'none'; // you need a identifier for changes    
  document.getElementById("yourfield2").style.display = 'block'; // you need a identifier for changes
  }
else{
  document.getElementById("yourfield1").style.display = 'block';  // you need a identifier for changes
  document.getElementById("yourfield2").style.display = 'none';  // you need a identifier for changes

   }
}
</script>

dymanic forms fields based on radio boxes

1 Answers1