jQuery .change to load different .php file

My project is in PHP / MySQL. I'm using Smarty for a template engine.

I have a < select > tag in my smarty file:

maps.tpl -

    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <form method="post" action="maps.php">

        <td colspan="3">

            <select id="cmdview" name="cmd">
                <option value=""></option>
                <option value="commdata" {if $cmdOn == "commdata"}selected="true"{/if}>Communications</option>
                <option value="contacts" {if $cmdOn == "contacts"}selected="true"{/if}>Contacts</option>
                <option value="enrollment" {if $cmdOn == "enrollment"}selected="true"{/if}>Enrollment</option>
                <option value="all" {if $cmdOn == "all"}selected="true"{/if}>All Schools</option>
            </select>

            <input type="submit" name="doSwitch" value="Submit" />

        </td>

        <div id="append"></div2>

    </form>

So far, my jQuery code finds which value is selected:

{literal}

<script>
$('#cmdview').chan开发者_运维技巧ge(function() {
    //alert('Handler for .change() called.');
        var str = "";
        url = "maps_append.php";

        $("select option:selected").each(function () {
            str += $(this).text() + " ";
           });
        $('#append').text(str);
            })
            .change();
</script>
{/literal}

I need the jQuery to listen for the value of "cmdview" then post that value to file: maps_append.php . I need that file to .append/.change the current file (maps.php/maps.tpl) without reloading.

But, my jQuery is only half working. The jQuery does find the value I'm trying to pass, and I've gotten it to load that correct value in the <.d.i.v.> tag with id #append . The only thing I can't seem to do is that take value and actually post it to maps_append.php

Any help will be very appreciated!

Thank you!

PS: I think the change will be something like this:

This needs to be replaced:

    $('#append').text(str);
        })
        .change();

With something like this:

url = "maps_append.php";
    $.post( url, { cmd: cmdview, value: str } ,
        function( data ) {
            var content = $( data );

          $( "#result" ).append( content );
      }
    );
    $term_input.val('');
});

EDIT::

My current file is maps.php. I now have it appending maps_append.php to maps.php with this code:

<script>
$('#cmdview').change(function() {
    //alert('Handler for .change() called.');
        var str = "";
            url = "maps_append.php";
        url = "maps_append.php";

        $("select option:selected").each(function () {
            str += $(this).text() + " ";
           });
        $('#append').load(url);
            })
            .change();
</script>

I just need to post the value of the select tag now!

Closer still... please see this edit:

  <script>
    $('#cmdview').change(function() {
        //alert('Handler for .change() called.');
            var str = "";
                url = "maps_append.php";
            $("select option:selected").each(function () {
                str += $(this).text() + " ";
               });
            $.post( url, { str: "$cmdOn" } , 
                function( data ) {
                    var content = $( data );
            $('#append').load(url);
                })
                .change();

                    });
    </script>

Now the maps_append.php page only appends to maps.php when I change the value of the select tag. I only need to include the value of the select tag when maps_append.php appears now.

---

I don't quite understand the details of what you are doing here -- all the code looks fine but the plan seems a little strange.

Typically you don't have a program change the source. Instead you would have code store data in a database and the code would be driven by the database to produce different output.

Maybe this is what you want to do with the content -- store it in a database and have a page that displays it.

---

To load content via jQuery use the following

function loadContent(elementSelector, sourceUrl) {
    $(""+elementSelector+"").load("http://yoursite.com/"+sourceURL+"");
}

See this link: http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html