Search code examples
javascriptjqueryeval

Problem with script to extract strings from database field


what am I doing wrong?

I am generating a button for each price option for each product number which may be up to 12 price options from an SQL database. That works fine. For each button created, I am generating each item variables for div1price, div2 price etc, div1minorder, div2minorder etc, div1pricequantity, div2 price quantity etc. So when a price option button is pressed, it displays the price, minimum order and minimum quantity for that particular size. All works apart from it only works when numbers are in the data - strings throw errors which defeats the object. I know I am doing something wrong fundamentally but can’t work out what. Think it must be to do with the eval! Please be gentle - very amateur coder. Thank you

Price Option Price Price Quantity Min Order
Small £3 Each 1
Medium £5 Case of 2 2
Large £7 3 1
Extra Large £9 Each 2

/* needs proper JavaScript formatting perhaps for the <% %> things
$('#divx').attr('id', 'div' + butno);
price = <% =(price.Fields.Item("itemprice").Value)%>;
minorder = <% =(price.Fields.Item("minquantity").Value)%>;
pricequantity = <% =(price.Fields.Item("pricequantity").Value)%>;
a = ('div' + butno + 'price');
a2 = ('div' + butno + 'minorder');
a3 = ('div' + butno + 'pricequantity');
eval('var ' + a + '= ' + price + ';');
eval('var ' + a2 + '= ' + minorder + ';');
eval('var ' + a3 + '= ' + pricequantity + ';');
butno = butno + 1;
*/

$("#div1").click(function() {
  $("#bigprice").text('£' + div1price);
  $("#minorder").text('Minimum Order Quantity: ' + div1minorder);
  $("#pricequantity").text('Price Quantity: ' + div1pricequantity);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div>HTML here please to reproduce this</div>

<script>
    $('#divx').attr('id', 'div' + butno);
    price = <% =(price.Fields.Item("itemprice").Value)%>;
    minorder = <% =(price.Fields.Item("minquantity").Value)%>;
    pricequantity = <% =(price.Fields.Item("pricequantity").Value)%>;
    a = ('div' + butno + 'price');
    a2 = ('div' + butno + 'minorder');
    a3 = ('div' + butno + 'pricequantity');
    eval ('var ' + a + '= ' + price + ';');
    eval ('var ' + a2 + '= ' + minorder + ';');
    eval ('var ' + a3 + '= ' + pricequantity + ';');
    butno = butno+1;
   </script>


I have tried the above and it works fine when all numbers are involved. The logic indicates I am not extracting the string.

Sorry, didn't include the click code for buttons. Here is the code for first of 12 possible buttons.

    <script>
    $("#div1").click(function(){
    $("#bigprice").text('£' + div1price);
    $("#minorder").text('Minimum Order Quantity: ' + div1minorder);
    $("#pricequantity").text('Price Quantity: ' + div1pricequantity);
    });
</script>

For clarity the a, a2 and a3 sections of code generate the variable names, the eval parts assign values from the database to each variable. May not be elegant but seems to work apart from the string values


Solution

  • As I have already mentioned in the comment just enclose your price/minorder variables in escaped double/single quotes. Some sample code

    let x = 'test';
    let y = 10;
    
    let a1 = 'div' + 1;
    let a2 = 'div' + 2;
    
    eval('var ' + a1 + '= \"' + x + '\";');
    eval('var ' + a2 + '= \"' + y + '\";');
    console.log(div1);
    console.log(div2);