html - Add/Remove an input field using javascript -
i working on alert button gets generated depending on select drop-down. javascript has been able read , send values of <select>
drop-down want to. but, when comes displaying button triggers alert message, problem.
issues
-- not sure if removing child correctly (syntax issue)
-- can't seem button display. instead, performs onclick
command.
javascript
function displayinfo(key) { alert(key); } function determinedisplay(item, buttonlocation) { // selected value drop down var si = item.selectedindex; var sv = item.options[si].value; // create view button display info var vb = document.createelement("input"); // assign attributes button vb.setattribute("type", "button"); vb.setattribute("value", "view"); vb.setattribute("display", "inline-block"); vb.onclick = displayinfo(sv); // insert button var inserthere = document.getelementsbyid(buttonlocation); var checkchild = inserthere.lastchild; if(lastchild) { inserthere.removechild(checkchild); inserthere.appendchild(vb); } else inserthere.appendchild(vb); }
html
<div id="soupbox"> <select id="soup" name="soup" onchange="determinedisplay(this, 'contentview_two');"> <option>--select--</option> <?php foreach($soup_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="s_qty" type="text" placeholder="qty" size="1" maxlength="1" /> <label id="contentview_two"></label> </div>
html without php
<div id="soupbox"> <select id="soup" name="soup" onchange="determinedisplay(this, 'contentview_two');"> <option>--select--</option> <option value="cn-cf">healthy choice hearty chicken ($1.31)</option> <option value="cn-ct">pacific foods organic creamy tomato ($3.75)</option> <option value="cn-lt">amy's organic lentil vegetables ($2.62)</option> <option value="nd-bf">ramen beef noddles ($0.50)</option> <option value="nd-cf">ramen chicken noddles ($0.50)</option> <option value="nd-ls">ramen lime shrimp noddles ($0.50)</option> <option value="nd-sf">ramen shrimp noddles ($0.50)</option> </select> <input name="s_qty" type="text" placeholder="qty" size="1" maxlength="1" /> <label id="contentview_two"></label> </div>
different problems here:
vb.setattribute("display", "inline-block")
: wrong, because display attribute style of element, not of element itself. usevb.style.display
instead.vb.onclick = displayinfo(sv)
: wrong, because you're doing here executing function right away. meantvb.onclick = function() { displayinfo(sv); }
also, try adding following styles attributes:
vb.style.position = 'absolute'; vb.style.left = '5px'; vb.style.top = '5px'; vb.style.width = '50px'; vb.style.height = '20px';
otherwise i'm not sure how js render it.
Comments
Post a Comment