Getting undefined output from jQuery function

Question

I'm getting undefined output from my jQuery function below. I initially assigned empty string to my product_type, I want it to be empty when I don't choose anyone of them, but still getting undefined output. Hopefully, I can have some hints here.

$(function () {
    var internal_note = {};
    var customer_note = {};
    var product_type = "";
    var web_camera = "";
    var touch_screen = "";
    $( "#test" ).on("click" , 'button:not(:disabled)',function(event){
        if ($('input[name="product_type"]:checked')){
            product_type = $('input[name="product_type"]:checked').attr("value");
        };
        if($('input[name="web_camera"]:checked')){
           web_camera = $('input[name="web_camera"]:checked').attr("value");
        };
        if($('input[name="touch_screen"]:checked')){
           touch_screen = $('input[name="touch_screen"]:checked').attr("value");
        };
        $('#left_note_list input').each(function(){
            internal_note[this.value] = JSON.stringify($(this).val());
         });
        alert(product_type);
        $.ajax({
        type: "post",
        url: '/insert/',
        data: {
        'internal_note': JSON.stringify(internal_note),
        'product_type': JSON.stringify(product_type),
        'web_camera': JSON.stringify(web_camera),
        'touch_screen': JSON.stringify(touch_screen)
        },
        success: function (data) {
            swal(data,'You Click the Button','success');
            $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled');
            },
        error: function(data){
            swal(data.responseText,'You Click the Button', 'error');
        }

        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-4">
     <h4 class="sub-header" id="product_type">Product Type</h4>
                        <form>
                            <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div>
                        </form>
                  </div><!-- /.col-lg-4  Product Type-->
                  
                <div class="text-center" id="test">
                <button target="_blank"
                    class="btn btn-primary ">
                    Test
                </button>
                </div>

Can you recreate this issue in plunker or something equivalent? It is hard to see what is going on from your code posted. — Agrejus, Feb 28 '17 at 22:03
your question is unclear, when is it being undefined? After you click on `#test`? — A. L, Feb 28 '17 at 22:10
Please [don't put the tags in the title](http://meta.stackexchange.com/q/19190/194720). — Heretic Monkey, Feb 28 '17 at 22:18

score 1 · Answer 1 · answered Feb 28 '17 at 22:27

It's because your conditional check is never returning false, so it's always assigning the value of product_type, even when nothing is selected. Instead of the check you have, use this:

if ($('input[name="product_type"]:checked').length>0){ ... }

That'll correctly check to ensure you have a checked product type.

score 1 · Accepted Answer · edited May 23 '17 at 12:25

Your issue is coming from the way you are checking to see is the checkbox is checked. This if check if ($('input[name="product_type"]:checked')). This works, but you do not get a true or false answer back, so you are essentially checking truthy instead. You can either check the length of $('input[name="product_type"]:checked') or you can do this instead

$('input[name="product_type"]').is(":checked")

Here is a good post on how to check whether or not a checkbox is checked

jQuery if checkbox is checked

$(function () {
    var internal_note = {};
    var customer_note = {};
    var product_type = "";
    var web_camera = "";
    var touch_screen = "";
    $( "#test" ).on("click" , 'button:not(:disabled)',function(event){

        if ($('input[name="product_type"]').is(":checked")){
            product_type = $('input[name="product_type"]:checked').attr("value");
        }
        if($('input[name="web_camera"]:checked')){
           web_camera = $('input[name="web_camera"]:checked').attr("value");
        }
        if($('input[name="touch_screen"]:checked')){
           touch_screen = $('input[name="touch_screen"]:checked').attr("value");
        }
        $('#left_note_list input').each(function(){
            internal_note[this.value] = JSON.stringify($(this).val());
         });
        alert(product_type);
        $.ajax({
        type: "post",
        url: '/insert/',
        data: {
        'internal_note': JSON.stringify(internal_note),
        'product_type': JSON.stringify(product_type),
        'web_camera': JSON.stringify(web_camera),
        'touch_screen': JSON.stringify(touch_screen)
        },
        success: function (data) {
            swal(data,'You Click the Button','success');
            $("#test button:not(:disabled)").text('Done!').attr('disabled', 'disabled');
            },
        error: function(data){
            swal(data.responseText,'You Click the Button', 'error');
        }

        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="col-md-4">
                    <h4 class="sub-header" id="product_type">Product Type</h4>
                        <form>
                            <div class="radio"><label><input type="radio" name="product_type" value="Laptop">Laptop</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Tower">Tower</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Minitower">Minitower</label></div>
                            <div class="radio"><label><input type="radio" name="product_type" value="Small Form Factor">Small Form Factor</label></div>
                        </form>
                  </div><!-- /.col-lg-4  Product Type-->
                  
                <div class="text-center" id="test">
                <button target="_blank"
                    class="btn btn-primary ">
                    Test
                </button>
                </div>

Getting undefined output from jQuery function

2 Answers2