Update multiple fields with jQuery Cascade Plugin

Hello,

I have a drop down list "Item Description" that when an item is selected it updates the Child (a select drop down) with "Options" (black, white, etc). This is working already.... What needs to be done:

- I need for the "Price" field to be updated when "Item Description" and "Options" field are selected.
- I need to update the "Code" field with the code for the selected item.

How can i get this done?

Here is JSON data:
[
{"Code":"NF-45SBP","Value":"Black","When":"NF-45SBP","Price":"276.97","Text":"Black"},
{"Code":"NF-45SWP","Value":"White","When":"NF-45SBP","Price":"0.00","Text":"White"},
{"Code":"NF-45SBM","Value":"Black","When":"NF-45SWM","Price":"138.48","Text":"Black"},
{"Code":"NF-45SWM","Value":"Blue","When":"NF-45SWM","Price":"138.48","Text":"Blue"},
]

The code is attached...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Catalyst App!</title>
<link rel="stylesheet" href="http://domain.com/static/css/main.css" />
<link rel="stylesheet" type="text/css" href="http://domain.com/static/css/jquery-ui/default.dialog.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://domain.com/static/css/jquery-ui/tab-screen.css" media="all" />
<link rel="stylesheet" href="http://domain.com/static/css/flexigrid.css" />
<script type="text/javascript" src="http://domain.com/static/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="http://domain.com/static/js/flexigrid.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.form.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.cascade.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.cascade.ext.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.templating.js"></script>
</head>

<body>
<div id="outer">
<div id="header">
        <img src="http://domain.com/static/images/btn_88x31_powered.png" />
        <h1></h1>
</div>

<div id="bodyblock">

<div id="menu">
    Navigation:
    <ul>
        <li><a href="http://domain.com/client">Home</a></li>
        <li>
            <a href="http://domain.com/client/account" title="My Account">
            Account
            </a>
        </li>
        <li>
            <a href="http://domain.com/client/purchaseorder" title="Create Purchase Order">
            Purchase Order
            </a>
        </li>
        <li>
            <a href="http://domain.com/client/orders" title="Orders Status">
            Orders
            </a>
        </li>
        <li>
            <a href="http://domain.com/logout" title="Logout">
            Logout 
            </a>
        </li>
    </ul>
</div><!-- end menu -->


<div id="content">
    
        <script type="text/javascript">
            function commonTemplate(item) {
                return "<option value='" + item.Value + "'>" + item.Text + "</option>"; 
            };
            function commonTemplate2(item) {
                return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; 
            };
            
            function commonMatch(selectedValue) {
                return this.When == selectedValue; 
            };
            
        </script>
        <style type="text/css">
            .cascade-loading    
            {                                                                       
                background: transparent url("indicator.gif") no-repeat center;                  
            }
        </style>
    <script type="text/javascript">
        jQuery(document).ready(function()
        {   
            jQuery("#simple_ajax_child").cascade("#simple_ajax",{                       
                ajax: { 
                    url: '/client/items', 
                    complete: function(){ 
                    //    alert(item.Price); 
                    },
                    data: { myotherdata: jQuery("#ajax_header").html() }
                },              
                template: commonTemplate,
                match: commonMatch              
            });
            jQuery("#row1_child").cascade("#row1_ajax",{               
                ajax: {
                    url: '/client/items',
                    data: { myotherdata: jQuery("#ajax_header").html() }
                },
                template: commonTemplate,
                match: commonMatch
            });

        });
    </script>



<form method="post" action="http://domain.com/client/purchaseorder/save">


<script type="text/javascript">
$(document).ready(function(){

    $('.note').hide();
    $(".note").css({ color: "#b2adad" });

    //add new lien item in invoices
    $("a.add_line_item").click(function () { 
        add_line_item();
        //autoFill($(".note"), "Description");
    });


});

</script>

<table> <!-- #main -->
  <tr> <!-- #main -->
    <td> <!-- #main -->

    <table id="client_info" width="500">
      <tr>
        <td>
        <div id="MyApp_logo">MyApp Logo</div>
        <div id="address">
        3732 SW 30th Ave.<br />
        Hollywood, FL, 33312
        </div>

        <div id="po_number">PO Number:
        <input type="text" class="" name="po_number" size="15">
        </div>
        </td>
        <td>
        <div id="MyApp_logo">
        <input type="text" class="" name="company" size="25" 
            value="Coastal MyApp">
        </div>
        <div id="address">

        <input type="text" class="" name="contact" size="25"
            value="Douglass Wales"><br />
        <input type="text" class="" name="address_1" size="25" 
            value="1005 Broad Street"><br />
        <input type="text" class="" name="city" size="6" 
            value="Oriental">,
        <input type="text" class="" name="state" size="2" 
            value="NC">,
        <input type="text" class="" name="zip" size="3" 
            value="28571">
        </div>
        </td>
      </tr>
    </table> <!-- #client_info -->

    </td> <!-- #main -->
  </tr> <!-- #main -->
  
  <tr> <!-- #main -->
    <td> <!-- #main -->
    <table id="itemtable">
    <tbody id="itemtable-tbody">

    <tr>
        <td class=""></td>
        <td class="">Code</td>
        <td class="">Description</td>
        <td class="">Caulking</td>
        <td class="">Quantity</td>
        <td class="">Unit Price</td>
        <td class="">Total Price</td>
    </tr>
    </tbody>
    
    <tbody class="line_item" id="row0">
    <tr>
        <td><a href="#" class="trash_link" id="trash_link0"> X </a></td>
        <td><input type="text" name="code0"></td>
        <td>
            <select id="simple_ajax" name="description0">
            <option value=""></option>
            
            <option value="NF-45SBP">
            **Flexible Single Plank 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-45SWM">

            Flexible Margin 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-45SBM">
            Flexible Margin 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-2x45DBP">
            Flexible Double Plank 2 x45mm (2 x1.8&quot;) 
            </option>
            
            <option value="NF-2x45DWP">

            Flexible Double Plank 2 x45mm (2 x1.8&quot;) 
            </option>
            
            <option value="NF-45SWP">
            **Flexible Single Plank 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-60SBP">
            **Flexible Plank 60mm (2.4&quot;) 
            </option>
            
            <option value="NF-60SWP">

            **Flexible Plank 60mm (2.4&quot;) 
            </option>
            
            </select>

        </td>
        <td>
            <select id="simple_ajax_child" name="options0">
            </select>
        </td>

        <td>
        <input type="text" class="validate[required]" name="quantity0"
            id="quantity0" size=5" />
        </td>
        <td>
        <input type="text" class="" name="price0" id="price0" 
            size="7" />
        </td>
        <td>
        <input type="text" class="" name="total_price0" id="total_price0" 
            size="7" />
        </td>

    </tr>
    <tr class="note">
        <td colspan="4">
        <textarea input type="text" class="note" name="note0" 
            id="note0" rows="3 cols="3" WRAP=nowrap></textarea>
        </td>
    </tr>
    </tbody>

<!-- row -->

    <tbody class="line_item" id="row1">
    <tr>
        <td><a href="#" class="trash_link" id="trash_link1"> X </a></td>
        <td><input type="text" name="code1"></td>
        <td>
            <select id="row1_ajax" name="description1">

            <option value=""></option>
            
            <option value="NF-45SBP">
            **Flexible Single Plank 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-45SWM">
            Flexible Margin 45mm (1.8&quot;) 
            </option>
            
            <option value="NF-45SBM">
            Flexible Margin 45mm (1.8&quot;) 
            </option>

            
            <option value="NF-2x45DBP">
            Flexible Double Plank 2 x45mm (2 x1.8&quot;) 
            </option>
            
            <option value="NF-2x45DWP">
            Flexible Double Plank 2 x45mm (2 x1.8&quot;) 
            </option>
            
            <option value="NF-45SWP">
            **Flexible Single Plank 45mm (1.8&quot;) 
            </option>

            
            <option value="NF-60SBP">
            **Flexible Plank 60mm (2.4&quot;) 
            </option>
            
            <option value="NF-60SWP">
            **Flexible Plank 60mm (2.4&quot;) 
            </option>
            
            </select>
        </td>
        <td>

            <select id="row1_child" name="options1">
            </select>
        </td>
        <td>
        <input type="text" class="validate[required]" name="quantity1"
            id="quantity1" size=5" />
        </td>
        <td>
        <input type="text" class="" name="price1" id="price1"
            size="7" />
        </td>

        <td>
        <input type="text" class="" name="total_price1" id="total_price1"
            size="7" />
        </td>
    </tr>
    <tr class="note">
        <td colspan="4">
        <textarea input type="text" class="note" name="note1"
            id="note1" rows="3 cols="3" WRAP=nowrap></textarea>
        </td>
    </tr>
    </tbody>

    </table>
    
    <table>
    <tr>
        <td colspan="4">
        <table class="buttons" align="left">
        <tr>

            <td>
            <a href="#" class="add_line_item" >
            <img src="/static/images/add.png" alt="" /> Add new row </a> 
            </td>
            <td>
            <a href='#' class="show-note" onclick="javascript: $('.note').show();$('.show-note').hide();">
            <img src="/static/images/page_white_add.png" title="Show details" alt="" />Show details
            </a>

            <a href='#' class="note" onclick="javascript: $('.note').hide();$('.show-note').show();">
            <img src="/static/images/page_white_delete.png" title="Hide details" alt="" />Hide details
            </a>
            </td>
        </tr>
        </table>
        </td>
    </tr>
    </table>

<table class="buttons" align="center">
    <tr>
        <td>
        <button type="submit" class="invoice_save positive" name="submit" value="Submit">

                <img class="button_img" src="/static/images/tick.png" alt="" /> 
                Save
            </button>
            
        </td>
        <td>

        <input type="hidden" id="max_items" name="max_items" value="5" />
            <input type="hidden" name="type" value="2" />
            
            <a href="#" class="negative">
                <img src="/static/images/cross.png" alt="" />
                Cancel
            </a>

    
        </td>
    </tr>
</table>

    </td> <!-- #main -->
  </tr> <!-- #main -->
</table> <!-- #main -->

</form>

</div><!-- end content -->
</div><!-- end bodyblock -->

<div id="footer">Copyright (c) MyApp</div>

</div><!-- end outer -->

</body>
</html>

Open in new window

larrytousAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

hieloCommented:

>>
<link rel="stylesheet" href="http://domain.com/static/css/main.css" />
<link rel="stylesheet" type="text/css" href="http://domain.com/static/css/jquery-ui/default.dialog.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://domain.com/static/css/jquery-ui/tab-screen.css" media="all" />
<link rel="stylesheet" href="http://domain.com/static/css/flexigrid.css" />
<script type="text/javascript" src="http://domain.com/static/js/jquery-1.4.2.min.js"></script>
<script language="javascript" src="http://domain.com/static/js/flexigrid.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.form.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.cascade.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.cascade.ext.js"></script>
<script language="javascript" src="http://domain.com/static/js/jquery.templating.js"></script>

what is domain.com? Or do you seriously expect use to hunt down all these dependency files?

Open in new window

leakim971PluritechnicianCommented:
Each time we change the description, run :


function updateOptions(rowNumber) {
		// clear current options dropdown list
		emptyOptions(rowNumber);
		// get a ref on the description field
		var sa = document.getElementById("description"+rowNumber);
		// get value of the selected description field
		val2search = sa.options[sa.selectedIndex].value;
		// start parsing of the json (responseText from the last ajax call)
		// we parse the json object to found the right entry (json object -> Code,Vale,When,Price, Text)
		for(j in json) {
			// current description is the current Code ?
			if( json[j].Code == val2search ) {
				// Yes, we add the Value as option in the Options dropdown list
				var o = document.createElement("option");
				o.value = json[j].Value;
				o.text = json[j].Value;
				document.getElementById("options"+rowNumber).add(o,null);
			}
		}
		// We update the price for the current selected options of the Options dropdown list
		updatePrice(rowNumber);
	}

Open in new window

leakim971PluritechnicianCommented:
Each time we change the options :


function updatePrice(rowNumber) {
		// Clear the price
		document.getElementById("price"+rowNumber).value = "";
		// Get the current selected value of Description dropdown list
		var sa = document.getElementById("description"+rowNumber);
		currentDescription = sa.options[sa.selectedIndex].value;
		// Get the current selected value of the Options dropdown list
		var sac = document.getElementById("options"+rowNumber);
		currentOption = sac.options[sac.selectedIndex].value;
		// parse json object to found the right json object (Code,Vale,When,Price, Text)
		for(j in json) {
			// Check for Code and Value 
			if( ( json[j].Code == currentDescription ) && ( json[j].Value == currentOption ) ) {
				// We found the right entry, set the price
				document.getElementById("price"+rowNumber).value = json[j].Price;
			}
		}
	}

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

leakim971PluritechnicianCommented:
To clear the "Options" selectbox (needed when Description change) :


function emptyOptions(on) {
		_options = document.getElementById("options"+on);
		for(o=0;o<_options.length;o++) {
			_options.remove(0);
		}
	}

Open in new window

leakim971PluritechnicianCommented:
You need to "index" id of Description(s) field.

So replace :
           <select id="simple_ajax" name="description0">
By :
            <select id="description0" name="description0" onchange="updateOptions(0);" >


I.E. :
<select id="description0" name="description0" onchange="updateOptions(0);" >
            <select id="description1" name="description1" onchange="updateOptions(1);" >
            <select id="description2" name="description2" onchange="updateOptions(2);" >
            <select id="description3" name="description3" onchange="updateOptions(3);" >

Open in new window

leakim971PluritechnicianCommented:
Same thing for Option(s) :


<select id="options0" name="options0" onchange="updatePrice(0);" ></select>
                <select id="options1" name="options1" onchange="updatePrice(1);" ></select>
                <select id="options2" name="options2" onchange="updatePrice(2);" ></select>

Open in new window

leakim971PluritechnicianCommented:
Test page :


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Catalyst App!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="javascript">
	var json = [ {"Code":"NF-45SBP","Value":"Black","When":"NF-45SBP","Price":"276.97","Text":"Black"}, {"Code":"NF-45SWP","Value":"White","When":"NF-45SBP","Price":"0.00","Text":"White"}, {"Code":"NF-45SBM","Value":"Black","When":"NF-45SWM","Price":"138.48","Text":"Black"}, {"Code":"NF-45SWM","Value":"Blue","When":"NF-45SWM","Price":"1990.90","Text":"Blue"} ];
	
	function updateOptions(rowNumber) {
		// clear current options dropdown list
		emptyOptions(rowNumber);
		// get a ref on the description field
		var sa = document.getElementById("description"+rowNumber);
		// get value of the selected description field
		val2search = sa.options[sa.selectedIndex].value;
		// start parsing of the json (responseText from the last ajax call)
		// we parse the json object to found the right entry (json object -> Code,Vale,When,Price, Text)
		for(j in json) {
			// current description is the current Code ?
			if( json[j].Code == val2search ) {
				// Yes, we add the Value as option in the Options dropdown list
				var o = document.createElement("option");
				o.value = json[j].Value;
				o.text = json[j].Value;
				document.getElementById("options"+rowNumber).add(o,null);
			}
		}
		// We update the price for the current selected options of the Options dropdown list
		updatePrice(rowNumber);
	}
	
	function emptyOptions(on) {
		_options = document.getElementById("options"+on);
		for(o=0;o<_options.length;o++) {
			_options.remove(0);
		}
	}

	function updatePrice(rowNumber) {
		// Clear the price
		document.getElementById("price"+rowNumber).value = "";
		// Get the current selected value of Description dropdown list
		var sa = document.getElementById("description"+rowNumber);
		currentDescription = sa.options[sa.selectedIndex].value;
		// Get the current selected value of the Options dropdown list
		var sac = document.getElementById("options"+rowNumber);
		currentOption = sac.options[sac.selectedIndex].value;
		// parse json object to found the right json object (Code,Vale,When,Price, Text)
		for(j in json) {
			// Check for Code and Value 
			if( ( json[j].Code == currentDescription ) && ( json[j].Value == currentOption ) ) {
				// We found the right entry, set the price
				document.getElementById("price"+rowNumber).value = json[j].Price;
			}
		}
	}
	
</script>
</head>
<body>
<form>
<table id="itemtable">
    <tbody class="line_item" id="row0">
        <tr>
            <td>
            <select id="description0" name="description0" onchange="updateOptions(0);" >
                <option value="" selected="selected">Choose one...</option>
                <option value="NF-45SBP">**Flexible Single Plank 45mm (1.8&quot;)</option>
                <option value="NF-45SWM">Flexible Margin 45mm (1.8&quot;)</option>
                <option value="NF-45SBM">Flexible Margin 45mm (1.8&quot;)</option>
                <option value="NF-2x45DBP">Flexible Double Plank 2 x45mm (2 x1.8&quot;)</option>
                <option value="NF-2x45DWP">Flexible Double Plank 2 x45mm (2 x1.8&quot;)</option>
                <option value="NF-45SWP">**Flexible Single Plank 45mm (1.8&quot;)</option>
                <option value="NF-60SBP">**Flexible Plank 60mm (2.4&quot;)</option>
                <option value="NF-60SWP">**Flexible Plank 60mm (2.4&quot;)</option>
            </select>
            </td>
            <td>
                <select id="options0" name="options0" onchange="updatePrice(0);" ></select>
            </td>
            <td>
                <input type="text" class="validate[required]" name="quantity0" id="quantity0" size="5" />
            </td>
            <td>
                <input type="text" class="" name="price0" id="price0" size="7" />
            </td>
            <td>
                <input type="text" class="" name="total_price0" id="total_price0" size="7" />
            </td>
        </tr>
        <tr class="note">
            <td colspan="4">
                <textarea input type="text" class="note" name="note0" id="note0" rows="3" cols="3" WRAP=nowrap></textarea>
            </td>
        </tr>
    </tbody>
</table>
</form>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
leakim971PluritechnicianCommented:
Miss you're using jquery so sorry...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.