How eval() value on select

Question

I have form

var number = $('.price').text().replace(/[^0-9]/g, '');
$('input#pricea').attr('value', number)
$("select.percent").change(function() {
  var selectedPercent = $(this).children("option:selected").val().replace(/[^0-9]/g, '');
  $('input#percenta').attr('value', selectedPercent)
});

var x = eval("number* selectedPercent") + "<br>";
$('#demo').attr('value', x)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">300 $</div>
<select class="percent">
  <option value="0">0%</option>
  <option value="30%">30%</option>
  <option value="40%">40%</option>
  <option value="50%">50%</option>
  <option value="60%">60%</option>
</select>
<div id="demo"></div>
<input type="hidden" name="pricea" id="pricea">
<input type="hidden" name="percenta" id="percenta" value="0">

Finally #demo don't show value . Can someone help me? pls. And Because I used the select , I want to select the options that will return different results at #demo

Don't ever use `eval()`. It's not meant to be used in modern scripts (it's from a much older version of JS, and only still exists because JS never _removes_ features. They just become things you should never do. Like using `document.write` or `alert()`. And it should go without saying, but don't use those either, of course) — Mike 'Pomax' Kamermans, Dec 14 '19 at 06:58

Nick Parsons · Answer 1 · 2019-12-14T06:23:47.283

Don't use eval() for this. Instead, inside your .change() callback convert your string number into an actual number (which is done for you when you use *) and then display the output using .append() (this will allow multiple numbers to be shown each change, use .html() or .text() to show one number per change). Also, to get the selected value you can simply do $(this).val() and remove the % from each <option> value attribute (so you don't need to remove it using regex), there is no need to get the selected child option.

var number = $('.price').text().replace(/[^0-9]/g, '');
$('input#pricea').attr('value', number)
$("select.percent").change(function() {
  var selectedPercent = $(this).val();
  $('input#percenta').attr('value', selectedPercent);
  
  var x = (number * selectedPercent) + "<br>";
  $('#demo').append(x);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">300 $</div>
<select class="percent">
  <option value="0">0%</option>
  <option value="30">30%</option>
  <option value="40">40%</option>
  <option value="50">50%</option>
  <option value="60">60%</option>
</select>
<div id="demo"></div>
<input type="hidden" name="pricea" id="pricea">
<input type="hidden" name="percenta" id="percenta" value="0">

score 0 · Answer 2 · answered Dec 14 '19 at 06:14

you need to use append('yourdata') or html('yourdata') to show data into div. try following:

$(document).ready(function(){
  var number =$('.price').text().replace(/[^0-9]/g,'');
$('input#pricea').attr('value',number);
var selectedPercent = $("select.percent").children("option:selected").val().replace(/[^0-9]/g,'');        
var x = eval("number* selectedPercent") + "<br>";
$('#demo').html(x);

$("select.percent").change(function(){
        selectedPercent = $(this).children("option:selected").val().replace(/[^0-9]/g,'');
        $('input#percenta').attr('value',selectedPercent)
        var y = eval("number* selectedPercent") + "<br>";
        $('#demo').html(y);

    });
});

How eval() value on select

2 Answers2