javascript - Have an input button show depending on a selected value -
i have <select>
drop down gets populated database. when list of items generated drop down, buttons display more information of each item. but, keep every button hidden except 1 corresponds selected value of drop down.
so let's user chooses third value of drop down. have javascript monitors change , based on value corresponding button shown. user clicks button , information of selected option displayed on alert window. user changes value again other option, previous button hidden because values don't match, , 1 shown.
please note javascript used on external file, , form has multiple drop downs need take in parameters.
javascript
function determinedisplay(item, itemview) { var locateitem = document.getelementbyid(item); var locateview = document.getelementbyclassname('.' + itemview); locateitem.change(function() { if(locateitem.value == locateview.id) { locateview.style = "block"; locateview.show(); } else locateview.hide(); } }
html
<div id="snackbox" style="display: none"> <select id="dfood" name="dfood" onchange="determinedisplay(this, 'content_one');"> <option>--select--</option> <?php foreach($dfood_products $key => $product) : $name = $product['name']; $cost = number_format($product['cost'], 2); $item = $name . ' ($' . $cost . ')';?> <option value="<?php echo $key; ?>"><?php echo $item; ?></option> <?php endforeach; ?> </select> <input name="df_qty" type="text" placeholder="qty" size="1" maxlength="1"/> <?php foreach($dfood_products $key => $product) : ?> <input type="button" value="view" id="displayinfo('<?php echo $key; ?>');" class="content_one" style="display:none" onclick="displayinfo('<?php echo $key; ?>');"/> <?php endforeach; ?> </div> <span id="snackplate"></span>
to keep solution close tried, do:
function displayinfo(key) { alert(key); } function determinedisplay(item, itemview) { var locateview = document.getelementsbyclassname(itemview); var si = item.selectedindex; var sv = item.options[si].value; var button = document.getelementbyid( "displayinfo('" + sv + "');"); (var i=0, max=locateview.length; < max; i++) { locateview[i].style.display = 'none'; } button.style.display = 'inline-block'; }
this should without chaning php.
recommend change approach use jquery create buttons etc.
some comments above changes:
- item dom element, because calling determinedisplay "this".
- getelementsbyclassname wrong spelled.
- no leading dot class name. (this css syntax - supported jquery)
- your button id strange (
"displayinfo('" + sv + "')
Comments
Post a Comment