Как из select сделать radio?

Question

[Loopst]

Есть форма с select которую надо перевести в radio button. При выборе одного из значений появляется поле для заполнения данными для этого поля.

<form action="" method="post" class="uap-change-password-form">
    	<div class="uap-ap-field">
    		<label class="uap-ap-label"><?php _e("Тип", 'uap');?></label>
    		<select class="uap-public-form-control" onChange="uapPType();" name="uap_type"><?php
    			foreach ($data['p_types'] as $k=>$v):
    				$selected = ($data['metas']['uap_type']==$k) ? 'selected' : '';
    				?>
    				<option value="<?php echo $k;?>" <?php echo $selected;?>><?php echo $v;?></option>
    				<?php
    			endforeach;
    		?></select>
    	</div>
    	<div class="uap-ap-field" id="uap_with_email" style="display: none;">
    		<label class="uap-ap-label"><?php _e("E-mail", 'uap');?></label>
    		<input class="uap-public-form-control" type="text" value="<?php echo $data['metas']['uap_email'];?>" name="uap_email" />
    	</div>
    	<div class="uap-ap-field" id="uap_with_nm" style="display: none;">
    		<label class="uap-ap-label"><?php _e("Номер", 'uap');?></label>
<input class="uap-public-form-control" type="text" value="<?php echo $data['metas']['uap_data'];?>" name="uap_data"> />
    	</div>
    	<div class="uap-change-password-field-wrap">
    		<input type="submit" value="<?php _e("Сохранить", 'uap');?>" name="save_settings" class="button button-primary button-large" />
    	</div>
    	<?php if (!empty($data['error'])) : ?>
    		<div><?php echo $data['error'];?></div>
    	<?php elseif (!empty($data['success'])) : ?>
    		<div><?php echo $data['success'];?></div>
    	<?php endif; ?>
    </form>

Надо сделать так чтобы при выборе одной из radio button появлялось поле для заполнения данных соответсвующих этой кнопке. Т.е., в принципе, оставить функционал этого скрипта, но с radio, а не select.
Подскажите, пожалуйста, как это сделать?

Comments

[Daria Motorina]

В чем у Вас основная загвоздка? В любом случае надо переписать селект на радиобаттоны вручную, а на js написать обработчик события выбора радиобаттона и подгрузки новых полей в зависимости от выбранного баттона.

[Loopst]

Daria Motorina, Загвоздка в том что я, похоже тупой. Целый день гуглю и бьюсь с этой задачей, а толку ноль. Сейчас попробовал переписать код по совету со СтакОверФлоу. Написал радиобатоны, но в таком случае не меняются поля. Показывается только первое.

Код

<form action="" method="post" class="uap-change-password-form">
	<div class="uap-ap-field">
		<label class="uap-ap-label"><?php _e("Тип", 'uap');?></label>
		<select class="uap-public-form-control" style="display: none;" onChange="uapPType();" name="uap_type"><?php
			foreach ($data['p_types'] as $k=>$v):
				$selected = ($data['metas']['uap_type']==$k) ? 'selected' : '';
				?>
				<option value="<?php echo $k;?>" <?php echo $selected;?>><?php echo $v;?></option>
				<?php
			endforeach;
		?></select>
	</div>
  
  <div class="radio-container">
      <div class="form-radio-btn">
      <input type="radio" value="<?php echo $data['metas']['uap_email'];?>" name="uap_email" id="radio1" checked>
      <label for="radio1">Email</label>
    </div>
      <div class="form-radio-btn">
      <input type="radio" value="<?php echo $data['metas']['uap_data'];?>" name="uap_data" id="radio2">
      <label for="radio2">Номер</label>
    </div>
  </div>
  
	<div class="uap-ap-field" id="uap_with_email" style="display: none;">
		<label class="uap-ap-label"><?php _e("E-mail", 'uap');?></label>
		<input class="uap-public-form-control" type="text" value="<?php echo $data['metas']['uap_email'];?>" name="uap_email" />
	</div>

	<div class="uap-ap-field" id="uap_with_nm" style="display: none;">
		<label class="uap-ap-label"><?php _e("Номер", 'uap');?></label>
		<textarea style="min-height: 100px;" class="uap-public-form-control" name="uap_data"><?php echo $data['metas']['uap_data'];?></textarea>
	</div>


	<div class="uap-change-password-field-wrap">
		<input type="submit" value="<?php _e("Сохранить", 'uap');?>" name="save_settings" class="button button-primary button-large" />
	</div>
	<?php if (!empty($data['error'])) : ?>
		<div><?php echo $data['error'];?></div>
	<?php elseif (!empty($data['success'])) : ?>
		<div><?php echo $data['success'];?></div>
	<?php endif; ?>
</form>
<script>
$("radio").click(function(e){e.preventDefault();})
	</script>

Answer 1

[Виктор]

Если я правильно понял вопрос используй триггер события

Answer 2

[Gosha Say]

Возможно вам сюда https://jqueryui.com/