Question: I have a HTML page which is divided into two frame sets,
the first frame contains 4 buttons, the second frame shows forms, only 1 of 4 forms can be shown according to which button is clicked. 

e.g. if the user clicks on button 'form1' in frame1, the 2nd frame should show 'FORM1' if the user clicks on button 'frame3' in frame1, the 2nd frame should show 'FORM3'.

What I need is to be able to change the source of the form in the second frame based on the button clicked in the first frame. 

Here is main frame file:

```
<html>
    <head>
        <title>User Management</title>
    </head>

    <frameset rows="9% ,91%" >
        <frame src="buttons.php" 
               name='Frame1' 
               scrolling="no" 
               name="work_disply" 
               noresize="noresize" />

        <frame src="form1.php" 
               name='Frame2' 
               scrolling="yes" 
               name="work_ground" 
               noresize="noresize" />
    </frameset>
</html>

```

Answer: 
This should do what you need:

```
<a target="Frame2" href="form1.php">Show form 1</a>
<a target="Frame2" href="form2.php">Show form 2</a>
<a target="Frame2" href="form3.php">Show form 3</a>
<a target="Frame2" href="form4.php">Show form 4</a>

```

More about targets and frames in [HTML 4 spec](http://www.w3.org/TR/html401/present/frames.html#adef-target).
Child (Frame1):

```
            // Get Button Values & Pass to Parent       

            $(document).ready(function() {
                   $('#list-1').click(function() {
                //     alert($(this).attr("value"));
                       window.parent.fchanger($(this).attr("value"));
                    });
                }); 

            $(document).ready(function() {
                   $('#list-2').click(function() {
                //     alert($(this).attr("value"));
                       window.parent.fchanger($(this).attr("value"));
                    });
                });     

            $(document).ready(function() {
                   $('#list-3').click(function() {
                //     alert($(this).attr("value"));
                       window.parent.fchanger($(this).attr("value"));
                    });
                }); 

            $(document).ready(function() {
                   $('#list-4').click(function() {
                //     alert($(this).attr("value"));
                       window.parent.fchanger($(this).attr("value"));
                    });
                }); 

```

Parent File to set the 'src' of Frame1:

```
            function fchanger(fname){

            //  alert("Welcome");
            //  document.getElementById("Frame2").src = 'form10.php' ;

                        switch (fname) {
                            case 'form1':
                                document.getElementById("Frame2").src = 'form1.php' ;
                                break;
                            case 'form2':
                                document.getElementById("Frame2").src = 'form2.php' ;
                                break;
                            case 'form3':
                                document.getElementById("Frame2").src = 'form3.php' ;
                                break;
                            case 'form4':
                                document.getElementById("Frame2").src = 'form4.php' ;
                                break;
                            case 'form5':
                                document.getElementById("Frame2").src = 'form5.php' ;
                                break;
                            case 'form6':
                                document.getElementById("Frame2").src = 'form6.php' ;
                                break;
                            case 'form7':
                                document.getElementById("Frame2").src = 'form7.php' ;
                                break;
                            case 'form8':
                                document.getElementById("Frame2").src = 'form8.php' ;
                                break;
                            case 'form9':
                                document.getElementById("Frame2").src = 'form9.php' ;
                                break;
                            case 'form10':
                                document.getElementById("Frame2").src = 'form10.php' ;
                                break;
                            case 'form11':
                                document.getElementById("Frame2").src = 'form11.php' ;
                                break;

                        default:
                                text = "Looking forward to the Weekend";
            } }             

```