CODEWITHSUNDEEP
phpjavascripthtml
KaHeL
KaHeL

Reputation: 4371

Changing the src content of iframe dynamically

I am making a page which do a search result. To brief the scene is that I have a login page which will direct you to another page (let's say homepage) This page contains 1 drop-down box ( and ), 1 textbox, 1 button and 1 iframe which contains the page where I have my table. Now I have a list of user which is displayed on that table having a header of firstname, lastname and middlename which is all the data is displayed on at startup Now I selected the firstname from the drop-down box then key in my name which should result to a filter for those who have the same name as mine. I used a filter on my table page in which I add the parameters e.g. //localhost/test/table.php?fname=test

Now the thing is that the iframe should be the only one that will change making my homepage intact. Now the iframe src will be changed on click based on what I selected on the drop-down box as I already said without using a form submit and the value will be based on the text on the text box. And also if possible without using http:// on the src link.

Well I almost done the part of onclick will change the iframe page using this script:

<script type='text/javascript'>
        function goTo(){
        top.table.location = 'http://localhost/test/home.php; 
        }
        </script>

It should be like this:

$dropdownvalue = dropdownselectedtext
$textvalue = valueoftextbox

//localhost/test/table.php?$dropdownvalue$textvalue

Well here it is my first work. commented for better understanding. Assume that '#' followed by text means some value. For reference.

$acct_no = "#LOG_IN_ID OF USER";

            echo "<script type='text/javascript'>
            function goTo(){
            top.table.src = '#SOMEURLHERE'; 
            }
            </script>";

            echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
            <tr>
                <td style='padding-left:30px;padding-top:20px;'>
                    <h3>SELECTION TEST</h3>
                </td>
                <td align='right' style='padding-right:30px;' height='120px'>
                    <select name='filter' id='filter'>
                        <option value='fname'>fname</option>
                        <option value='lname'>lname</option>
                        <option value='mname'>mname</option>
                    </select>
                    <input type='text' value='Enter text here' id='textbox'>
                    &nbsp; 
                    <input type='button' value='Search' onClick='goTo();'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
                </td>
            </tr>
            <tr>
                <td colspan='2' align='center'>
                    <iframe src='table.php?ref=$acct_no' name='table' width='730px' height='300px' frameborder='0'></iframe> 
                </td>
            </tr>
            </table>";

Upvotes: 2

Views: 4613

Answers (3)

hjpotter92
hjpotter92

Reputation: 80639

I would suggest that you keep the <script> container outside of PHP area.

<script type="text/js" language="javascript">
    //Your function goes here
</script

<?php echo "<form name='someName' action='#'>
echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
<tr>
    <td style='padding-left:30px;padding-top:20px;'>
        <h3>SELECTION TEST</h3>
    </td>
    <td align='right' style='padding-right:30px;' height='120px'>
        <select name='filter' id='filter'>
    <option value='fname'>fname</option>
    <option value='lname'>lname</option>
    <option value='mname'>mname</option>
        </select>
        <input type='text' value='Enter text here' id='textbox'>
        &nbsp; 
        <input type='button' value='Search' onClick='javascript: return goTo(\"this.parent.filter.value, this.parent.textbox.value\");'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
    </td>
</tr>
<tr>
    <td colspan='2' align='center'>
        <iframe src='' name='table' width='730px' height='300px' frameborder='0'></iframe> 
    </td>
</tr>
</table></form>";?>

You didn't use a <form> tag in your whole section, so managing fields is difficult. Also, try the javascript I defined in previous post.

Upvotes: 1

Bud Damyanov
Bud Damyanov

Reputation: 31829

You can use jquery for this:

$('#myiframeid').attr('src', 'http://some.url.here');

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80639

Try using this in onclick/onchange handler in your drop down box(for each value):

javascript: return goto(\"$dropdownvalue\", \"$textvalue\");

And, to incorporate it

<script type='text/javascript'>
    function goto(var1, var2){
        finLink = "http://localhost/test/table.php?" + var1 + var2
        top.table.location = finLink; //Not sure if it will be top.table.location or top.table.src
    }
</script>

Upvotes: 1

Related Questions