Home/ Questions/Q 8000349
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T15:45:56+00:00

I’m having a little ‘teething’ problem here is my code so far <form name=job_app>

  • 0

I’m having a little ‘teething’ problem here is my code so far

<form name="job_app">
    Source?<br/>
        <input type="radio" name="source" value="GAZ" id="GAZ" /> Stonoway Gazette <br/>
        <input type="radio" name="source" value="JCP" id="JCP" /> Job Center <br/>
        <input type="radio" name="source" value="WOM" id="WOM" /> Word of Mouth <br/><br/>

    <script language="text/JavaScript">
        if (document.job_app.source.GAZ.checked){
            document.write='Issue <br/><input type="text" name="issue" /><br/><br/>';
        }
        else if (document.job_app.source.JCP.checked){
            document.write='Ref <br/><input type="text" name="ref" /><br/><br/>';
        }
        //word of mouth has no additional input so there is no if statement for it
    </script>
</form>

what i want this to do is create (or unhide) the issue or ref text box depending on which radio button is selected without creating multiple text boxes.

sorry for any inconvenience if this is a rookie mistake, i have never worked with java before nor a language like it.

This is the working code as of 07:15 26/05/2012 as thanks to Amy McCrobie.
It has undergone some edits since Amy’s version (see below) i have moved all scripts above the form to make adding the next few fields easier, added a statement for word of mouth, omitted <head> as that is part of index.php and meta.php while this is for form.php, added a spacer and made the function name more specific.

index.php

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
    <head>
        <?php
            include './meta.php';
        ?>
    </head>
    <?php
        /*if(isset($_POST['submit'])){
            include './submit.php';
        }
        else{*/
            include './form.php';
        //}
    ?>
</html>

meta.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-Equiv="Cache-Control" Content="no-cache" />
<meta http-Equiv="Pragma" Content="no-cache" />
<meta http-Equiv="Expires" Content="0" />
<title>job_app</title>
<link rel="StyleSheet" type="text/css" href="./style.css"/>

form.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#issueEl").hide();
    $("#refEl").hide();
});
    function showHide_source(){
        if (document.getElementById('GAZ').checked)
        {
            document.getElementById('issueEl').style.display = 'block';
            document.getElementById('refEl').style.display = 'none';
            document.getElementById('src_spEl').style.display = 'none';
        } 
        if (document.getElementById('JCP').checked)
        {
            document.getElementById('issueEl').style.display = 'none';
            document.getElementById('refEl').style.display = 'block';
            document.getElementById('src_spEl').style.display = 'none';
        }
    if (document.getElementById('WOM').checked)
        {
            document.getElementById('issueEl').style.display = 'none';
            document.getElementById('refEl').style.display = 'none';
            document.getElementById('src_spEl').style.display = 'block';
        }
    }
</script>
<form name="job_app" action="" method="post"> 
    Source?<br/> 
        <input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide_source()" /> Stonoway Gazette <br/> 
        <input type="radio" name="source" value="JCP" id="JCP" onChange="showHide_source()" /> Job Center <br/> 
        <input type="radio" name="source" value="WOM" id="WOM" onChange="showHide_source()" /> Word of Mouth <br/><br/> 
    <div class="hideable" id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
    <div class="hideable" id="refEl">Ref <br/><input type="text" name="ref" /><br/><br/></div>
    <div class="hideable" id="src_spEl"></div>
    rest of form        
    <input...
     .../>
</form>

style.css

div.hideable{
    height: 62px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-Equiv="Cache-Control" Content="no-cache">
    <meta http-Equiv="Pragma" Content="no-cache">
    <meta http-Equiv="Expires" Content="0">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#issueEl").hide();
            $("#refEl").hide();
        });
    </script>
    <title>Test</title>
</head>
<body>
<form name="job_app" action="" method="post"> 
    Source?<br/> 
        <input type="radio" name="source" value="GAZ" id="GAZ" onChange="showHide()" /> Stonoway Gazette <br/> 
        <input type="radio" name="source" value="JCP" id="JCP" onChange="showHide()" /> Job Center <br/> 
        <input type="radio" name="source" value="WOM" id="WOM" onChange="showHide()" /> Word of Mouth <br/><br/> 
        <div id="issueEl">Issue <br/><input type="text" name="issue" /><br/><br/></div>
        <div id="refEl">Issue <br/><input type="text" name="ref" /><br/><br/></div>
</form>
<script type="text/javascript">
function showHide(){
    if (document.getElementById('GAZ').checked)
    {
        document.getElementById('issueEl').style.display = 'block';
        document.getElementById('refEl').style.display = 'none';
    } 
    if (document.getElementById('JCP').checked)
    {
        document.getElementById('issueEl').style.display = 'none';
        document.getElementById('refEl').style.display = 'block';
    }
}
</script>
</body>
</html>
    • 0