1

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;
}
3
  • if there is a way to do the 'if checked' bit in php please tell me as i can work with that May 25, 2012 at 20:28
  • make sure to see my latest edit :-) May 25, 2012 at 20:34
  • the last edit to my answer is working on my test site. Hope this has been helpful to you! May 25, 2012 at 21:59

2 Answers 2

2

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>
12
  • the div boxes don't appear when i select the related radio button May 25, 2012 at 20:49
  • i copped and pasted your code for accuracy ill try the j query version you have just generated May 25, 2012 at 20:54
  • is id supposed to be declared twice in the j query version? May 25, 2012 at 20:55
  • Nope. It is not declared twice. Also, I fixed the javaScript version for you ;-) Maybe the jQuery version makes more sense now - removed the id attributes from the text inputs. May 25, 2012 at 20:57
  • 1
    i just want to say you have been a tremendous help and my understanding of java has increased tenfold May 26, 2012 at 6:37
0

I would suggest jQuery, it's not hard to learn, in fact I find it much easier than basic javascript also I would go the route of two textboxes that are hidden, and then showing them via jQuery

as it stands now I think if the user checks one radio button and then the other two text boxes will appear

and with jQuery added (which is as easy as including the sript at the top of your page your code would be more like this...

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

    <script language="text/JavaScript">

        $("#issue").css("display","none"); 
        $("#ref").css("display","none"); 

        if ($("#GAZ").checked){ 
            $("#issue").css("display","inline"); 
            $("#ref").css("display","none"); 

        } 
         if ($("#JCP").checked){ 
            $("#issue").css("display","none"); 
            $("#ref").css("display","inline"); 

        } 
        //word of mouth has no additional input so there is no if statement for it 
    </script> 
</form> 
2
  • if you want to use jQuery, you should use show() and hide()... $("#issue").show(); and $("#issue").hide();... just a suggestion :-) May 25, 2012 at 20:42
  • I have had issues with show() and hide() working the same way accross browsers and behaving differently with different elements, I like editting the css, I do use toggle/slideToggle (which esentially shows and hides, when I want something to fade or slide or whatever but) display none/inline/block etc.. has worked better for me
    – ScottC
    May 28, 2012 at 12:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.