Unable to send 2 values to a javascript function from onchange event of select box

Question

I am trying to write a code where in I am dynamically generating select box options. I need to send 2 values from this onchange event. 1 is the sub_header_id and other is the header_id. I need to send $row["header_id"] to the javascript function. Following is my PHP code. How do I do that? I don't want to send a concatenated string and then split it in javascript function.

<?php
    include('config.php');
    $sql = sprintf("SELECT * FROM retail_sub_headers");
    $result = mysql_query($sql);
    $num = mysql_num_rows($result);
    if ($num > 0)
    {
        echo "<form>";
        echo "<select id = \"my_select_box\" onChange = \"javascript:load_brand_option_box(this, 'populate_brands', '');\">";
        echo "<option selected value = \"-------\">-------</option>";
        while($row = mysql_fetch_array($result))
        {
            echo "<option value = ".$row["sub_header_id"].">".$row["sub_header_name"]."</option>";
        }
        echo "</select>";   
        echo "</form>";
    }
?>

And here is my javascript function javascript:load_brand_option_box.

function load_brand_option_box (sub_header_id, action, brand_id)
{
    var sub_header_value = sub_header_id.options[sub_header_id.selectedIndex].value
     if (action == "populate_brands")
     {
        if (window.XMLHttpRequest)
        {  // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }   
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("brand_names").innerHTML=xmlhttp.responseText;
                //document.getElementById("livesearch").style.border="1px solid #A5ACB2";
            }
        }   
        xmlhttp.open("GET","populate.php?action="+action+"&sub_header_id="+sub_header_value+"&brand_id="+"",true);
        xmlhttp.send();
    }
}

$row["header_id"] is the header_id. Like I am sending $row["sub_header_id"] through the option value, I need to be able to send $row["header_id"]. How to do that? — user1051505
– user1051505, Commented May 26, 2013 at 11:24
Then where is the issue ..you can send it in the javascript function as parameter.. — sAnS
– sAnS, Commented May 26, 2013 at 11:25

sAnS · Accepted Answer · 2013-05-26 12:14:29Z

Try this.... Added a newval attribute in option for header id you can now grab header id inside the function

<?php
        include('config.php');
        $sql = sprintf("SELECT * FROM retail_sub_headers");
        $result = mysql_query($sql);
        $num = mysql_num_rows($result);
        if ($num > 0)
        {
            echo "<form>";
            echo "<select id = \"my_select_box\" onChange = \"load_brand_option_box(this, 'populate_brands', '');\">";
            echo "<option selected value = \"-------\">-------</option>";
            while($row = mysql_fetch_array($result))
            {
                echo "<option value = ".$row["sub_header_id"]."  newval=".$row["header_id"].">".$row["sub_header_name"]."</option>";
            }
            echo "</select>";   
            echo "</form>";
        }
    ?>

    function load_brand_option_box (sub_header_id, action, brand_id)
    {
        var sub_header_value = sub_header_id.options[sub_header_id.selectedIndex].value
        var sel = document.getElementById('my_select_box');
        var header_id=sel.options[sel.selectedIndex].getAttribute('newval');
        //you will get the header id here 
         if (action == "populate_brands")
         {
            if (window.XMLHttpRequest)
            {  // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }   
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("brand_names").innerHTML=xmlhttp.responseText;
                    //document.getElementById("livesearch").style.border="1px solid #A5ACB2";
                }
            }   
            xmlhttp.open("GET","populate.php?action="+action+"&sub_header_id="+sub_header_value+"&brand_id="+"",true);
            xmlhttp.send();
        }
    }

Collectives™ on Stack Overflow

Unable to send 2 values to a javascript function from onchange event of select box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related