CODEWITHSUNDEEP
javascriptjquery
Ravshan Abdurasulov
Ravshan Abdurasulov

Reputation: 547

jQuery Simple Calculation not working and not showing any error

I want to create calculator filtering it through data-filter. I am beginner in programming also in jquery so not be strict. I wrote script however its not working and not showing any error.

<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate" type="submit">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

$('#calculate').click(function(){
    if ($('#kraska').data('data-filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska').data('data-filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})

Upvotes: 2

Views: 459

Answers (4)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Change type of your button to button instead of submit so the form will be not submited and page will not refresh when you click and your click event will fire :

<button id="calculate" type="button ">Calculate</button>

Also when you use data-* attributes you should pass just the name without data-, and note that you want to get the data from the selcted option so you have to add that to your selecto so it'll be :

$('#kraska option:selected').data('filter')

NOTE: you don't have to use html() when you want to affect text, it's better if you use text().

Hope this helps. 

$('#calculate').click(function(){
    var filter = $('#kraska option:selected').data('filter');
  
    if (filter == 1) {
        var result = $('#kraska').val() * $('#metr').val();
    }

    if (filter == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    }

    $('#result').text(result)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate" type="button">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

Upvotes: 0

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

You need to make a few corrections in your code:

  1. When you are using data method for getting any data-attribute's value, you need to use the attribute name without the data- part.
  2. You are trying to get the data-attribute's value for the select element, while you have specified them on your option elements. So, you need to select the :selected option instead.
  3. I have also removed button's type submit, though you can handle it with e.preventDefault() in your click handler even if you want to keep it as a type="submit" button.

$('#calculate').on("click", function(e){
    if ($('#kraska option:selected').data('filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska option:selected').data('filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074178

$('#kraska').data('data-filter') should be $('#kraska').attr('data-filter') (or $('#kraska').data('filter'), but unless you're using the features of data, no need for the other things it does).

Also note that val will always give you a string (if the element exists). * and / will coerce that to number for you, but it's still useful to remember, since + won't (you'll get string concatenation).

The ; after the blocks on your ifs are incorrect (but harmless).

And note that button type="submit" will submit the form if you don't prevent the default action. In your case, you don't want a submit, so you want button type="button". (You can't just leave type off, the default type is "submit", so you need the silly, redundant <button type="button" ...>.)

Upvotes: 0

I&#39;m Geeker
I&#39;m Geeker

Reputation: 4637

U need to remove the data-filter to ('filter')

$('#calculate').click(function(){
    if ($('#kraska').data('filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska').data('filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})

Change the button type to button instead of submit 

<button id="calculate" type="button">Calculate</button>

If its submit button form will be not submited and page will not refresh after the click.

Upvotes: 0

Related Questions