Почему я получаю undefined вместо выбранного значения?

Когда в этой «форме» выбрана радиокнопка, я должен получать значение выбранного переключателя, но, тем не менее, я становлюсь неопределенным. Какова возможная причина этого и как я могу это исправить? JSFIddle https://jsfiddle.net/uzuwheq4/Почему я получаю undefined вместо выбранного значения?

HTML

<div id="step2"> 
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/></div><p>Enkel bankskiva</p></span> 
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan2.jpg);"><input class="radio" type="radio" value="plan2" name="plan"/></div><p>L-form</p></span> 
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/></div><p>U-form</p></span> 
        <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/></div><p>Mattbestallning</p></span> 
        <button type="button" class="nasta" onClick="processStep2()">Nasta</button> 
        <h3 id="alert2">Please select a plan to proceed</h3> 
       </div>

JQuery

function _(x){ 
    return document.getElementById(x); 
} 

function processStep2(){ 
    plan = _('[name="plan"]').value; 
    if ($(".radio").is(":checked")) { 
    alert (plan); 
     $("#phase2").removeClass("phase"); 
     $("#phase3").removeClass("main_list"); 
     $("#phase2").addClass("main_list"); 
     $("#phase3").addClass("phase"); 
    } else { 
     $("#alert2").show(); 

    } 

}

источник

2016-01-22 ChriChri

'plan = _ (" plan "). Value;' ?? он должен быть «plan = $ (« # plan »). val();' –

1. Идентификаторы уникальны, 2. функция '_' не нужна, просто используйте jQuery – adeneo

Попробуйте это.

plan = $("#plan input[type='radio']:checked").val();

Думает вы должны принять во внимание.

Не используйте один и тот же идентификатор для разных элементов.
Если вы используете JQuery вам не нужна функция _(x), потому что $("#elementID") такие же как document.getElementById(elementID);

источник

2016-01-22 14:53:27 kpucha

Это работает ... попробуйте с помощью jsfiddle если вы хотите https://jsfiddle.net/muc8an22/ перед тем, как что-то не сработает, попробуйте его – kpucha

hmmm, это интересно, что он не относится к вашему селектору типа '$ (" # plan "). find (" input [ type = 'radio']: checked "). val()', который не сработает. – Pete

Разница заключается в том, что если вы используете селектор '$ (" # plan ")' и применяете функцию типа '.find()', он будет искать в первом элементе селектор, но если вы используете селектор '$ ("#plan input [type = 'radio']: checked") 'сначала искать радио типа входного сигнала, которое выбирается внутри элемента с планом id. – kpucha

Прежде всего вы проверяете неправильный элемент. Изменение

plan = _("plan").value;

var plan = $('[name="plan"]:checked').val();

Вторая вещь - атрибут ID должен относиться только к одному DOM элементу =)

источник

2016-01-22 14:55:03 Shlizer

Есть несколько вещей, которые я хотел бы изменить, но я буду придерживаться базового актива вопрос. Я изменил первую строку в коде следующим образом:

plan =$("input[name=plan]:checked").val();

это будет отображаться только «плана1» или «plan2», и т.д., так как это значение, определенное на кнопке радио. Если вы хотите получить значение в теге p, вам нужно будет пройти дерево, чтобы получить это значение. Я предполагаю, что это то, что вы действительно хотите, поэтому я обновляю свой ответ, чтобы включить код для этого. Во-первых, небольшое изменение в вашем html. Я перемещаю закрывающий div для инкапсуляции тега p, я стараюсь как можно больше сохранить исходный текст.

<div id="step2"> 
     <span class="product" href="#" id="plan"><div class="plan"style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/><p>Enkel bankskiva</p></div></span> 
     <span class="product" href="#" id="pl("plan").van"><div class="plan" style="background-image:url(media/images/plan2.jpg);"><input lass="radio" type="radio" value="plan2" name="plan"/><p>L-form</p></div></span>         
     <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/><p>U-form</p></div></span> 
     <span class="product" href="#" d="plan"><div class="plan" style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/><p>Mattbestallning</p></div></span> 
     <button type="button" class="nasta" onClick="processStep2()">Nasta</button> 
     <h3 id="alert2">Please select a plan to proceed</h3> 
       </div>

то первая строка вашей функции processStep2 следует читать:

plan =$("input[name=plan]:checked").next("p").text();

это будет выплюнуть "Enkel bankskiva", "L-формы", "U-форма", "Mattbestallning"

источник

2016-01-22 14:56:59 aemorales1

Вот jsfiddle для этого: https://jsfiddle.net/uzuwheq4/8/ – aemorales1

Почему я получаю undefined вместо выбранного значения?

ответ

Смежные вопросы