asynchronous iframe using jquery

Question

So I'm creating a code portfolio based upon what's in my svn repo.

I'm currently set up like this:

PHP loops through my JSON and creates these little menus for each file in each project. Here's some (very poorly structured) code showing how I generate each of these:

<form action = "" method = 'post'><select name = "s2" id = "s2"> <?php
    foreach($proj2->item_vers as $ver)
    {
         ?>
         <option value = <?php
         $base_str = (string)$ver->revision;
         $full_str = "\"".$base_str."\"";
         echo($full_str); ?> > <?php
         echo($base_str); ?> </option>
         <?php

    }   ?> </select><input type = 'submit'/></form>
        <a href = <?php
        if (isset($_POST['2']))
        {
             $rev2 = $_POST['s2'];
        }
        else 
             $rev2 = "";
        $full_url = "https://myrepo".
        $proj2->name."?p=".$rev2;
        $ret_url = "\"".$full_url."\"";
        echo($ret_url); ?> > Code </a></td>

So I have a form , select , option . The select will post the selected version from the drop down. Then I have a hyperlink which forms the correct url based upon the posted version number. This hyperlink will need to be replaced with an iframe . For the sake of simplicity, lets say that each project has its own iframe which is updated with appropriate project file any time you click one of the submit buttons.

So like this:

I'm looking for the simplest way to set this up to work asynchronously.

My thoughts: I've already set up an asynchronous comment system using jQuery. The difference was that I only had three little inputs and a button to submit the comment. This just seems like it will be much more complicated as the code I posted above will loop through about 100 times. I cant just hard code a different id to every single submit button and write 100 different .js scripts to operate when each individual button is clicked.

Answer 1

OK, so im going to simplify your form generation code to make this clearer. I am including the outer loop you dont show:

<div id="forms-holder">
    <!--this is the outer loop-->
    <?php foreach ($projects as $project):?>

    <!-- remove any ids in the loop, they can not be duplicated-->  
    <form action="" class="projectform">

    <!-- add name to data attribute for easy retrieval by js-->
    <select name="s2" data-projectname="<?php echo $project->name;?>">
        <?php foreach ($project->item_vers as $ver):?>
        <option value="<?php echo'"'. $ver->revision .'"';?>"><?php echo $ver->revision;?></option>
        <?php endforeach;?>
    </select>

    <input type = 'submit'/>

    <form>

    <?php endforeach;?>
</div>
<iframe src="" frameborder="0" id="myiframe"></iframe>

<script type="text/javascript">
    $(function(){
        //when any form is submitted
        $('.projectform').submit(function(ev){
            ev.preventDefault();

            //grab revision and project name
            var revision = $(this).find('select').val();
            var projname = $(this).find('select').attr('data-projectname');

            //generate the url
            var iframeurl = "https://myrepo"+projname+"?p="+revision;

            //set the iframes url
            $('#myiframe').attr('src', iframeurl);
        })
    });
</script>