CODEWITHSUNDEEP
jquery
theFAILcoder
theFAILcoder

Reputation: 7

A variable is breaking my code

I am trying to build a custom calculator for a website I develop. I am a new developer and this is a bit over my head but I am trying to learn.

I am trying to grab 2 variables and combine them into 1 and then use that to call a div from another page through ajax. Well the problem I am having is that when I add the code to combine the 2 vars, it makes the page break and I am not sure why.

     $(function(){
        $("input:radio[name=f_1]").click(function() {
          var type = $(this).val();
        });
        $("input:radio[name=f_1a]").click(function() {
          var prod = $(this).val();
        });

        var JobType = type + prod;
    });

You can see it live here: http://rdmproductions.com/dev/

if you take the line for the JobType variable, the page will act as it should. I just don't understand what's happening and how to fix it.

Upvotes: -1

Views: 111

Answers (4)

jfriend00
jfriend00

Reputation: 707376

Your variables type and prod are local variables so they are not available outside the click handler callback functions.

if you want them to be available outside those click handlers, then you need to declare them at a higher level scope or store them in some other object that is persistent beyond the life of your click handler function.

Probably what you want to do is fetch the values of type and prod when you need them rather than try to keep them in JobType.

You could fetch the data upon demand like this:

var JobType = $("input:radio[name=f_1]").val() + $("input:radio[name=f_1a]").val();

You wouldn't even need the click handlers on the two radio buttons at all.

EDIT based on your lastest comments:

You can listen for changes to both radio groups, check when both have been selected and then do something with the combined value using code like this:

$("input:radio[name=f_1], input:radio[name=f_1a]").change(function() {
    var f1 = $("input:radio[name=f_1]:checked").val();
    var f1a = $("input:radio[name=f_1a]:checked").val();
    if (f1 && f1a) {
        // both radio buttons have been selected, do something here
        var jobType = f1 + f1a;
        // do something with jobType here
        alert(jobType);
    }
});

You can see it work here: http://jsfiddle.net/jfriend00/FJcTA/

Upvotes: 2

Gwyn Howell
Gwyn Howell

Reputation: 5424

The variables type and prod are only valid within the scopes of their relative functions. Further, the onclick events only get fired when the controls are clicked, which will be at some point in the future after your code runs. The code appears to run as the page is rendered, so the user will not have had chance to click the buttons yet anyway. You therefore need to perform the calculation at a logical time after the user has had chance to complete the form. Obvious candidates would be on page submit, or via another event such as user clicking a button. You don't even need to use the onclick events from the radio buttons, you just need to concatenate the values from the radios, such as ...

function onSubmit() {
    var type = $("input:radio[name=f_1]").val();
    var type = $("input:radio[name=f_1a]").val();
    var jobType = type + prod;
    // do something with jobType
}

Hope this helps

Upvotes: 1

Ram
Ram

Reputation: 144689

try this:

$(function() {

    $("input:radio[name^=f_1]").click(function () {

      var total = 0;           

       $("input:radio[name^=f_1]").each(function () {
           total += parseInt($(this).val());
       });

   });

});

Upvotes: 0

Fleshgrinder
Fleshgrinder

Reputation: 16253

 $(function () {
    var type, prod, jobType;
    $("input:radio[name=f_1]").click(function() {
      type = $(this).val();
    });
    $("input:radio[name=f_1a]").click(function() {
      prod = $(this).val();
    });
    jobType = type + prod;
});

Upvotes: 0

Related Questions