My First JQuery Programme


#1

I have created a small pen here →

I have glanced almost everything that I read here today W3S

My intention is to change the amount on the basis of the selection.

But I got stuck at this line →

$("#amount").val("");

I think this is not going to be simple - some mathematics is involved. Please guide me how to or perhaps suggest me ay further reading.

I promptly thank you for all the help.

Addendum: I have added a set of data-value probably that will be helpful.


#2

Yup. So instead of pulling the .val, pull the .attr() for the correct attribute.

Alternatively, implement jQuery’s own .data() management. But i’d probably stick with the attribute for now. Cleaner.


#3

I browsed that link. so what is the test here? It doesn’t seem either to be an ID or a Class here.


#4

That’s not a test, it’s a key.


#5

Got it sir.


#6

Based on my 1 or 2 days understanding of basics of JQuery I have written a small code just to fetch the vale of what is selected, but I could not publish(in alert box) that →


#7

$("#myactivity")

Your select boxes have a class. That is the selector for an ID.


#8

Oh sorry, but even fixing that doesnt solve the issue.


#9

Our “job” as such here is not so much to solve your issue, but more of helping you to find the next step towards a solution.


#10

So there are two things wrong with the current version:
#1: You fixed it in the wrong direction. Make your selector the class one, you cant have two elements with the same ID.
#2: Your codepen doesnt have jquery loaded.


#11

Thanks. code doesn’t have any issues, but silly mistakes. I will remember to load JQuery in codepen in future for sure.

Alert: we use is to check if the code is working. Can you please guide me what should I do next. I believe some math and some conditions are needed now to generate output which may require adding more than one prices selected.


#12

I believe that something like this will be the solution →

$(document).ready(function() {        
    $(".myactivity").click(function(event) {
        var total = 0;
        //some code here to do mathematical calculations
        
        if (total == 0) {
            $('#finalprice').val('');
        } else {                
            $('#finalprice').val(total);
        }
    });
});

But this code →
//some code here to do mathematical calculations

should have some mathematical code - I am missing that link.

I got the rest of the idea from JQuery DOM manipulation.


#13

Well, let’s go back to the basics of programming.

Describe in words what you want to do, step by step, to determine what total should equal.