Databases
StackOverflow2013
Postsdbo
POConvert js Select to Radio buttons?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConvert js Select to Radio buttons?
    text
    copied!<p>I'm trying to convert a Select menu with an onchange function to radio buttons. But I'm no programmer. The example here has both sets, the Select working, the Radio's not. I <em>think</em> it might be a problem with the handling of the 'field_type'.</p> <p>Link to the example - <a href="http://originscards.com/pledge/strip.php" rel="nofollow">http://originscards.com/pledge/strip.php</a></p> <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt; var field_type = { check: 0, group: 1 }; // Control Type var c_iitem = { pledge: 0, pledge2: 1, pledge3: 2, pledge4: 3, shipping: 4 }; var s_aitem = [ {sz: 'pledge', ct: field_type.group, pledgeAmt: 12, qty: 0}, {sz: 'pledge2', ct: field_type.group, pledgeAmt: 17, qty: 0}, {sz: 'pledge3', ct: field_type.group, pledgeAmt: 29, qty: 0}, {sz: 'pledge4', ct: field_type.group, pledgeAmt: 41, qty: 0}, {sz: 'shipping', ct: field_type.check, pledgeAmt: 0, qty: 0} ]; function UpdateQty(iitem) { var ctl = document.getElementById(s_aitem[iitem].sz); if (s_aitem[iitem].ct == field_type.check) { s_aitem[iitem].qty = ctl.checked ? 1 : 0; } else if (s_aitem[iitem].ct == field_type.group) { if (iitem == c_iitem.pledge) s_aitem[c_iitem.pledge].qty = s_aitem[c_iitem.pledge2].qty = s_aitem[c_iitem.pledge3].qty = s_aitem[c_iitem.pledge4].qty = 0; i = parseInt(ctl.value, 4); if (i &gt;= 0) s_aitem[iitem + i].qty = 1; } else // num { s_aitem[iitem].qty = (ctl.value == '' || isNaN(ctl.value)) ? 0 : parseInt(ctl.value, 10); } } function NewVal(iitem) { var i, pledgeAmt, shipping; UpdateQty(iitem); pledgeAmt = 0; for (i = s_aitem.length; --i &gt;= 0; ) pledgeAmt += s_aitem[i].qty * s_aitem[i].pledgeAmt; if (s_aitem[c_iitem.shipping].qty == 0) shipping = 0; else { shipping = s_aitem[c_iitem.pledge].qty * 9 + s_aitem[c_iitem.pledge2].qty * 9 + s_aitem[c_iitem.pledge3].qty * 14 + s_aitem[c_iitem.pledge4].qty * 14 ; } document.getElementById('pledgeAmt').innerHTML = pledgeAmt; document.getElementById('shipAmt').innerHTML = shipping; document.getElementById('total').innerHTML = pledgeAmt + shipping; } function UpdatePrices() { UpdateQty(c_iitem.pledge); NewVal(c_iitem.shipping); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;form name="form1"&gt; &lt;!-- SELECT WORKS --&gt; &lt;select size=1 name="pledge" id="pledge" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"&gt; &lt;option value="-1" selected&gt; &lt;/option&gt; &lt;option value="0"&gt;pledgeA&lt;/option&gt; &lt;option value="1"&gt;pledgeB&lt;/option&gt; &lt;option value="2"&gt;pledgeC&lt;/option&gt; &lt;option value="3"&gt;pledgeD&lt;/option&gt; &lt;/select&gt; &lt;!-- RADIO DOES NOT --&gt; &lt;input name="pledge" id="pledge" type="radio" value="-l" style="display:none" checked&gt; &lt;input name="pledge" id="pledge" type="radio" value="0" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"&gt;Pledge A&lt;br/&gt; &lt;input name="pledge" id="pledge" type="radio" value="1" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"&gt;Pledge B&lt;br/&gt; &lt;input name="pledge" id="pledge" type="radio" value="2" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"&gt;Pledge C&lt;br/&gt; &lt;input name="pledge" id="pledge" type="radio" value="3" onchange="NewVal(c_iitem.pledge);" onkeyup="NewVal(c_iitem.pledge);"&gt;Pledge D&lt;br/&gt; &lt;input id="shipping_us" type="radio" name="shipping" value="-1" checked onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);"&gt; No Shipping&lt;br/&gt; &lt;input id="shipping" type="radio" name="shipping" value="0" onchange="NewVal(c_iitem.shipping);" onkeyup="NewVal(c_iitem.shipping);"&gt; Shipping Pledge $&lt;span id="pledgeAmt"&gt;0&lt;/span&gt; Shipping $&lt;span id="shipAmt"&gt;0&lt;/span&gt; Total $&lt;span id="total"&gt;0&lt;/span&gt; &lt;/form&gt; &lt;script language="JavaScript" type="text/javascript"&gt;UpdatePrices();&lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload