在Laravel中使用javascript创建控件

Question

I'm currently working in a project in Laravel in which I have to create Radio Buttons for different diseases to specify Yes/No answers. Here I'm getting the disease names from the database which is passed from the controller.

I have created an php array just to have the names of the disease.

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

diseaseList.blade.php

This is my design view. In this when the button is clicked a new radio button with disease name has to be created.

<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>

Here is the javascript for creating radio buttons.

<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
    }
});
});

Everything works fine. The problem is when I first click the button the radio button with name Diabetes created successfully and when the second time I press the button the previously created radio button Diabetes gets renamed to Disease(default name) and the new control with the second disease name Hypertension has been created.

It is repeated for creating all the radio buttons. Please provide me a solution. Thanks in Advance.

Answer 1

I had to make changes to HTML structure:

<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>

So that the add button doesn't disappear on click.

In your script change the line:

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

To:

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

Here's the link to Codepen: https://codepen.io/anon/pen/NzbYyK?editors=1010