Создание элементов управления с использованием JavaScript в Laravel - PullRequest
Новая
       29

Создание элементов управления с использованием JavaScript в Laravel

0 голосов
/ 08 июня 2018

В настоящее время я работаю над проектом в Laravel, в котором мне нужно создать радио-кнопки для различных заболеваний, чтобы указать ответы Да / Нет.Здесь я получаю названия болезней из базы данных, которая передается от контроллера.

Я создал массив php только для того, чтобы иметь названия болезней. 

<?php $value=array();?>
@foreach($list as $disease)
<?php 
  $value[]=$disease->diseaseName; 
?>
@endforeach

sickList.blade.php

Это мой вид дизайна.В этом случае при нажатии кнопки необходимо создать новый переключатель с названием болезни. 

<div class="form-group">
<label>Patient ID &nbsp &nbsp &nbsp &nbsp<b style="font-size: 18px;">{{$id}} 
</b></label>
</div>
<input type="hidden" name="patient_id" value="{{$id}}">
<div class="form-group">
<label>Patient Name &nbsp<b style="font-size: 18px;">{{$name}}</b></label>
</div>
<input type="hidden" name="patient_name" value="{{$name}}">
<div class="field_wrapper">
<div>
<a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img 
style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>
</div>

Вот код JavaScript для создания переключателей. 

<script type="text/javascript">
$(document).ready(function(){
var values = new Array();
<?php foreach($value as $key => $val){ ?>
    values.push('<?php echo $val; ?>');
<?php } ?>

var maxField = values.length; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = $('.field_wrapper'); //Input field wrapper
var x = 0; //Initial field counter is 1


var fieldHTML = '<div class="field_wrapper"><div class="label-group"><div 
class="line"></div><label style="font-weight: 900;" 
id="labelid">Disease</label></div><div class="form-check form-check-inline"> 
<input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio1" value="Yes">&nbsp<label class="form-check-label" 
for="inlineRadio1">Yes</label></div><div class="form-check form-check- 
inline"><input class="form-check-input" type="radio" name="Diabetes" 
id="inlineRadio2" value="No">&nbsp<label class="form-check-label" 
for="inlineRadio2">No</label></div><div class="line"></div><div class="form- 
group" name="dName" value="dName"><input type="text" name="dName" id="dName" 
hidden size="5"><label name="dlabel" id="dlabel" hidden> mg/hg</label></div> 
</div>'; 

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
         var element=values[x];
         $(wrapper).append(fieldHTML); //Add field html
         document.getElementById("labelid").innerText = element;
         x++; //Increment field counter
    }
});
});

Все отлично работает.Проблема заключается в том, что когда я впервые нажимаю кнопку, радио-кнопка с именем Диабет успешно создана, а когда я нажимаю кнопку во второй раз, ранее созданная радио-кнопка Диабет переименовывается в Болезнь (имя по умолчанию) и создан новый элемент управления со вторым названием болезни Гипертония .

First Step Adding

Second Step Adding

Повторяется для создания всех переключателей.Пожалуйста, предоставьте мне решение.Заранее спасибо.

1 Ответ

0 голосов
/ 08 июня 2018

Мне пришлось внести изменения в структуру HTML: 

<div class="field_wrapper"></div>
<div>
    <a href="javascript:void(0);" class="add_button" title="Add field">&nbsp<img style="padding-bottom: 15px;" src="../../images/add_btn.png"></a>
</div>

, чтобы кнопка добавления не исчезала при клике.

В вашем скрипте измените строку: 

$(wrapper).append(fieldHTML); //Add field html

Кому: 

$(wrapper).prepend(fieldHTML); //Add field html

Вот ссылка на Codepen: https://codepen.io/anon/pen/NzbYyK?editors=1010

...