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

352
28 июля 2021, 03:40

Есть форма с 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> 
		<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>
Надо сделать так чтобы при выборе одной из radio button появлялось поле для заполнения данных соответсвующих этой кнопке. Т.е., в принципе, оставить функционал этого скрипта, но с radio, а не select. Подскажите, пожалуйста, как это сделать?

UPD После советов ниже код выглядит так:

<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
  1. Ставите display: none для select
  2. Прописываете соответствующе radio
  3. На js/jquery ставите на click в radio действие prevent default и display: block для соответствующего select.
READ ALSO
Много однотипных Entity Doctrine

Много однотипных Entity Doctrine

Есть много одинаковых табличек, по типу table_2019, table_2018, поля в них идентичныМожно ли как то настроить доктрину для работы с такими табличками,...

371
Преобразование даты в unix time

Преобразование даты в unix time

Сообствено вопрос таков, имеем задачу, время формата 1004

301
Как задать id странице Word Press?

Как задать id странице Word Press?

Вот есть страничка aboutphp как ей задать id ?

196
Можно ли использовать $className::$methodName()?

Можно ли использовать $className::$methodName()?

мне приходит вебхук в котором лежит json вида

237