AIM

I'm trying to create a form that lets users select an item, and then displays the item's details once the user has selected an item. However, before i do that, i am trying to test if it would be possible by creating a simple testpage which replaces the item details to be displayed with a simple alert

Code(JQuery):

<!--Function to display item details upon selection-->

<script type="text/javascript">
function LoadDetails(cat,subcat,item)
{
    return function(){
    alert("Values are passed through successfully.Category is"+cat+", subcategory is"+subcat+"and item is"+item);
    }
}
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#itemsubcat").hide();
    $("#item").hide();
    $("#submititem").hide();
    $("#itemcat").load("getcategory.php");

    $("#itemcat").change(function(){
        var cat=$("#itemcat").val();
        $("#itemsubcat").show();
        $("#itemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#itemsubcat").change(function(){
        var cat=$("#itemcat").val();
        var subcat=$("#itemsubcat").val();
        $("#item").show();
        $("#item").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#item").change(function(){
        $("#submititem").show();
    });
        var cat=$("#itemcat").val();,
        var subcat=$("#itemsubcat").val();,
        var item=$("#item").val();,
    $("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);
    });
});
</script>

Code(Html):

 <table>
    <tr>
        <td><select id="itemcat" /></td>
        <td><select id="itemsubcat" /></td>
        <td><select id="item" /></td>
        <td><input type="button" id="submititem" name="submititem" value="Get Item" /></td>
    </tr>
    </table>

Problem

When i click 'submititem', the alert pops up successfully, but the values cat,subcat and item are shown as undefined instead of the values that were supposed to be passed through.How would i pass data/values through to the function LoadDetails?

Solutions tried:

I've tried using .bind(), but to no avail.

E.g

var cat=$("#itemcat").val();,
var subcat=$("#itemsubcat").val();,
var item=$("#item").val();,
$("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);

Question:

Would it be possible to use the function LoadDetails to retrieve the item details form my database(through PHP) and then echo it out ?

AIM

I'm trying to create a form that lets users select an item, and then displays the item's details once the user has selected an item. However, before i do that, i am trying to test if it would be possible by creating a simple testpage which replaces the item details to be displayed with a simple alert

Code(JQuery):

<!--Function to display item details upon selection-->

<script type="text/javascript">
function LoadDetails(cat,subcat,item)
{
    return function(){
    alert("Values are passed through successfully.Category is"+cat+", subcategory is"+subcat+"and item is"+item);
    }
}
</script>

<script type="text/javascript">
$(document).ready(function(){
    $("#itemsubcat").hide();
    $("#item").hide();
    $("#submititem").hide();
    $("#itemcat").load("getcategory.php");

    $("#itemcat").change(function(){
        var cat=$("#itemcat").val();
        $("#itemsubcat").show();
        $("#itemsubcat").load('getsubcategory.php?cat='+cat);
    });

    $("#itemsubcat").change(function(){
        var cat=$("#itemcat").val();
        var subcat=$("#itemsubcat").val();
        $("#item").show();
        $("#item").load('getitem.php?cat='+cat+'&subcat='+subcat);
    });

    $("#item").change(function(){
        $("#submititem").show();
    });
        var cat=$("#itemcat").val();,
        var subcat=$("#itemsubcat").val();,
        var item=$("#item").val();,
    $("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);
    });
});
</script>

Code(Html):

 <table>
    <tr>
        <td><select id="itemcat" /></td>
        <td><select id="itemsubcat" /></td>
        <td><select id="item" /></td>
        <td><input type="button" id="submititem" name="submititem" value="Get Item" /></td>
    </tr>
    </table>

Problem

When i click 'submititem', the alert pops up successfully, but the values cat,subcat and item are shown as undefined instead of the values that were supposed to be passed through.How would i pass data/values through to the function LoadDetails?

Solutions tried:

I've tried using .bind(), but to no avail.

E.g

var cat=$("#itemcat").val();,
var subcat=$("#itemsubcat").val();,
var item=$("#item").val();,
$("#submititem").bind('click',{param:cat,subcat,item},LoadDetails);

Question:

Would it be possible to use the function LoadDetails to retrieve the item details form my database(through PHP) and then echo it out ?

• javascript
• php
• jquery
• html

Share Improve this question Follow asked Sep 21, 2013 at 11:53 Kenneth .JKenneth .J 1,43388 gold badges2929 silver badges4949 bronze badges 2

• As a test why don't you just pass the params cat, subcat and item directly to LoadDetails within the bound callback? and of course you could just have the callback deal directly too? esp. since you don't seem to be reusing. "bind.('click', function(cat, subcat, item){...}); – SaminOz Commented Sep 21, 2013 at 12:08
• @SaminOz I'm still rather new to programming so i don't really get what you mean by bound callbacks.Could i trouble you for an example? – Kenneth .J Commented Sep 21, 2013 at 12:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

To pass a value to a function with an event, the syntax is :

$("#submititem").bind('click', LoadDetails(cat, subcat, item));

jsFiddle for exemple.

For your question, your code seems to be only client-side but if you want to load data from your server I suggest you to read this learn jQuery ajax

To get the values selected in the drop downs, you can just do this:

function LoadDetails()
{
    var cat=$("#itemcat").find(":selected").text();
    var subcat=$("#itemsubcat").find(":selected").text();
    var item=$("#item").find(":selected").text();    
    alert("Values are passed through successfully.Category is"+cat+", subcategory is"+subcat+"and item is"+item);    
}

This is strictly client-side, it doesn't talk to the server.