How to take a input value inserted by a JQuery to the same jQuery?-CodePudding

I am developing variant section in OpenCart using JQuery. I need to store a value to the inputs and take that input values to the another Ajax call.

I'm facing undefined error, when I take the value from the input.

Here is the HTML code:

{% if product_type == '1' %}
    <div >
        <h3>Available Options</h3>
        {% for variant in variants %}
            <div >
                <label>{{variant.variant_name}}</label>
                    {% set i = 1 %}
                    <div >
                      {% for variant_value in variant.variant_values %}
                        <input type="radio" name="rGroup{{variant.variant_name}}" value="{{variant_value.variant_value_id}}" id="r{{variant_value.variant_value_id}}" />
                        <label  for="r{{variant_value.variant_value_id}}" {% if variant.variant_name == 'Color' %} style="background:{{variant_value.code}}" {% endif %}
                        {% if variant.variant_name != 'Color' %} style="background:#fff; text-align:center; padding-top:5px;" {% endif %} value="{{variant.variant_id}}_{{variant_value.variant_value_id}}">{% if variant.variant_name != 'Color' %} {{variant_value.variant_value}}{% endif %}</label> 
                        {% if i == 1 %}
                            <input type="hidden"  name="variant_name[]" value="" />
                        {% endif %}
                        {% set i = i   1 %}
                      {% endfor %}
                    </div>
            </div>
        {% endfor %}
        </div>
    </div>
{% endif %}

JQuery code:

$('.radio').on('click', function() {
    var variant_array = $(this).attr('value').split("_");
    $('.variant_input_'  variant_array[0]).val(variant_array[1]);
    var data = $('input[name="variant_name"]').val();
    alert(data);
});

Please anyone help me on this. Or suggest better method to proceed this task.

Input is an array

CodePudding user response：

There's no input named variant_name, the name is variant_name[]. You can't ignore the [] in the name.

You also need to select the one that's in the same DIV as the label that you're clicking on.

$('.radio').on('click', function() {
    var variant_array = $(this).attr('value').split("_");
    $('.variant_input_'  variant_array[0]).val(variant_array[1]);
    var data = $(this).closest("div").find('input[name="variant_name[]"]').val();
    alert(data);
});