below is my code. I can get the pieces to work right individually, but can’t pick out why its not working as a whole. You can see a live example of it at http://www.center-center.com/frames-stretcher%20app.php. I would like the form to update the table at the bottom of the page every time a form element is changed. The page functions properly when changing the radio button selected and the text inputs, but doesn’t update on the fly when using the drop down menus for a reason I’m unaware of. The values with the select elements are communicated, but are not updated on the fly like the other inputs for some reason. I’ve tested them individually and it works fine, but when all of it’s together it’s a no go. Any help would be greatly appreciated as I’ve been trying to get this to work properly for the past couple days.
$(document).ready(function(){
var type = null;
$("#stretcher-op").change(function() {
$("#stock-select div").hide();
if (type != $('input[name=type]:checked').val()) {
if (type == 'frame') {
$("select#stock-op").remove();
$("select#corner-op").remove();
$("select#finish-op").remove();
$("label[for=finish-op]").hide();
}
$("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($stretcher_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
$("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($stretcher_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
}
type = $('input[name=type]:checked').val(); //stretcher
});
$("#frame-op").change(function() {
$("#stock-select div").hide();
if (type != $('input[name=type]:checked').val()) {
if (type == 'stretcher') {
$("select#stock-op").remove();
$("select#corner-op").remove();
}
$("label[for=finish-op]").show();
$("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($framing_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
$("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($framing_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
$("label[for=finish-op]").after('<select id="finish-op" name="finish"><option selected="selected"></option><?php $i = 0; foreach($framing_finish_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
}
type = $('input[name=type]:checked').val(); //frame
});
$("input,select").change(function() {
width = $('#width').val();
height = $('#height').val();
quantity = $('#quantity-op').val();
stock = $('#stock-op option:selected').val();
corner = $('#corner-op option:selected').val();
finish = $('#finish-op option:selected').val();
$("#quote").load('art-product-calculator.php?type=' + type + '&width=' + width +'&height=' + height + '&quantity=' + quantity + '&stock=' + stock + '&corner=' + corner + '&finish=' + finish);
});
});
</script>
</head>
<body>
<div id="container">
<header id="banner">
<img src="" />
</header>
<section id="selection">
<div class="option" id="stretcher">
<label for="stretcher-op">Stretcher</label><br />
<input id="stretcher-op" name="type" type="radio" value="stretcher" />
</div>
<div class="option" id="frame">
<label for="frame-op">Frame</label><br />
<input id="frame-op" name="type" type="radio" value="frame" />
</div>
<div class="option" id="quantity">
<label for="quantity-op">Quantity </label><input id="quantity-op" name="width" type="" value="" size="6" />
</div>
<div class="option" id="dimensions">
<input id="width" name="width" type="" value="width" size="6" /> <label for="width">inches</label> by
<input id="height" name="height" type="" value="height" size="6" /> <label for="height">inches</label>
</div>
<div class="option" id="stock-select">
<label for="stock-op">Stock Selection </label><div class="space-holder"> </div>
</div>
<div class="option" id="corner-joint">
<label for="corner-op">Corner Joint </label>
</div>
<div class="option" id="finish">
<label for="finish-op">Finishing </label>
</div>
</section>
<section id="quote">
</section>
</div>
</body>
</html>
Your dropdown menus are added dynamically, you have to delegate event on them like this:
And You also need to use latest version of jQuery if not using.