Re: get dropdown selected value and pass to another dropdown

MMZ,

Yes, you can use an IFRAME instead of AJAX. That's actually how a lot of people built dynamic websites before AJAX was implemented. They would send GET and POST requests through the IFRAME and the IFRAME would return JavaScript that would connect back into the original page and manipulate it.

For current day examples, look up methods to transfer images .. we still have to use IFRAMES for that. AJAX, at least to my knowledge, hasn't been updated to handle posting image data yet.

Now to your specific question ...

There are two ways to do that ...

#1 .. the HTML A tag <a href="somepage.php" target=""> has the property "target" in it.

This allows you to specify the IFRAME by "NAME". While this example doesn't contain the year, you can use on onCLICK method to add the year before firing off the link. And, it's being used to set up the next 2 examples .. note the property "TARGET"

#2 .. through JavaScript

window.frames [ target ].location = "somepage.php?yr=" + year + "&";

Note that option #2 will only execute a GET request. Todo a POST request, you will need a FORM to call the IFRAME. This example provides both HTML and JavaScript options for submitting the form. I also included the file upload INPUT tag just for grins and giggles.

#3 through and IFRAME with a FORM

<form id="getReport" method="POST" action="somepage.php" target="getReportFrame">
<input id="reportYear" type="hidden" name="reportYear" value="">
<input id="uploadReport" type="file" name="uploadReport" value="">
<input id="submit" type="submit" name="submit" value="submit">
</form>

<iframe name="getReportFrame">
</iframe>

<script>
function cmdGetReport (yr)
{
$("#reportYear").val (yr);
$("#getReport").submit();
}
</script>

On 9/25/2013 8:11 AM, MMZ wrote:

Thanks alot for your help. your answer is very complete and descriptive.
Just one more question, is it possible to get the year and report value and send them to an iframe of the same page because I want to keep the dorpdowns on the page.

Thanks again

On Tuesday, September 24, 2013 8:40:58 PM UTC-4, ENetArch wrote:

Hello MMZ,

If I understand what you want to do, you have 2 select statements on the same page.

The first select statement allows the user to select a year. You want to pass that year back to the server and have PHP do something. (what you want the server to do is unclear).

The second select statement provides a list of URLs. (No examples were given, so I'm not sure how the Year value is used in the URLs).

OK, so ... here are some thoughts.

PHP only runs on the server, and it does not run inline as the page is drawn on the web browser. Instead you have to think of the PHP and JavaScript in a client server fashion. So, your user types in

Http://www.dirtysocks.com/
The server executes the index.php page
=====
<html>
...

<?php
$result1 = mysql_query("select id,year from year_data where org_id=$org_id") or die(mysql_error());

while ($row = mysql_fetch_assoc($result1))
{
      $period= $row['year'];
      $period_id=$row['id'];
      echo "<option value=\"$period\">$period</option>";
}
?>

...
</html>
=====

The server responds by sending only the HTML for the index.php page.
=====
<html>
...
<script scr="jQuery.js"></script>
<script scr="muddySocks.js"></script>
...
<body>
<form method="post">
        Report Period:
<select id="selectYear" onchange="muddySocks.cmdSelectedYear();">
            <option> Select An Option </option>

            <option value="1973"> 1973 </option>
            <option value="1973"> 1986 </option>
            <option value="1973"> 1995 </option>
            <option value="1973"> 2000 </option>
            <option value="1973"> 2008 </option>

</select>

<select id="selectReport" onchange="muddySocks.cmdSelectedReport();">
            <option> Select An Option </option>


</select>

...
</html>
=====

The user selects an option from the select statement, which in this case calls muddySocks.cmdSelectedYear ();

=====
// The JavaScript looks something like:
// Note: this library requires JQUERY ...

var muddySocks =
{
    selectedYear : "",

    cmdSelectedYear : function ()
    {
        var text = $(this).text();
        var value = $(this).val();
        alert("Selected text=" + text + " Selected value= " + value);

        muddySocks.selectedYear = value; // or text;

        // next I'll use JQUERY to call the web server for the Report List
        $.ajax (
            {
                url : "getYear.php?year=" + value + "&",
                method : "get",
                success : function (szHtml)
                {
                    if (szHtml.length >0)
                    { $("#selectReport").html (szHtml); }
                    else
                    { window.alert ("nothing returned"); }
                },
                error : function ()
                { window.alert ("ajax call failed"); },
            });
    },

    cmdSelectReport : function ()
    {
        var text = $(this).text();
        var value = $(this).val();
        alert("Selected text=" + text + " Selected value= " + value);

        window.location = "genReport.php?" +
            "year=" + muddysocks.selectedYear + "&"
            "report=" + value + "&";
    }
};
=====

Now "getYear.php" does a second query against the database, or something else to create a list of reports available for that year.

=====
<?
$szRtn = <<<HEREDOC
<option value="1">Report #1</option>
<option value="2">Report #2</option>
<option value="3">Report #3</option>
<option value="4">Report #4</option>
<option value="5">Report #5</option>
HEREDOC;

print ($szRtn);
?>
=====

Hope this helps you understand how your page might work a little better.

Mike,

On 9/24/2013 10:55 AM, MMZ wrote:

Hi,
I have two dropdown and want to get the selected year value of the first one and add it to the url of the header page and also to the second dropdown url options so that when I select a php page from the second dropdown I can see the year value on the page.I past my code here but the selected year doesn't show on the php page.

<form method="post">
        Report Period:
        <select name="mySelect" id="mySelect" onchange="'header.php?year='+this.value" >
            <option style="display:none;"> Select</option>-->

            <?php

            $result1 = mysql_query("select id,year from year_data where org_id=$org_id") or die(mysql_error());

            while ($row = mysql_fetch_assoc($result1)) {

                $period= $row['year'];

              $period_id=$row['id'];

                echo "<option value=\"$period\">$period</option>";

            }


            ?>

        </select>
Report Type:
        <select name="selectreport" id="selectreport" >


        <option style="display:none;">--Select--</option>


            <?php

           echo "<option value=\"".reportA.".php?org_id={$org_id}&year=".$_GET['year']."\">report A</option>";
            echo "<option value=\"" . reportB . ".php?org_id={$org_id}&year=".$_GET['year']."\">report B</option>";

            ?>

        </select>
        <input type=submit name=button method="post" onClick="window.open(selectreport.value,
     'popUpWindow','height=800,width=1000,left=200,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"value="view" >

    </form>

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

Web Design

Pages

Re: get dropdown selected value and pass to another dropdown

Thursday, September 26, 2013

0 comments:

Post a Comment

Blog Archive

Followers