I have some code that updates form fields based on a radio button being clicked:

html

```
<div class="radio">
    <label><input type="radio" onclick="myFunction(this)" name="extra" value="add_extra_new">Add New Extra</label>
    <label><input type="radio" onclick="myFunction(this)" name="extra" value="exists" checked="checked">Existing Extras</label>
</div>
<span id="add_new">Name of Extra :</span>
<input id="add_more" type="text" name="nameOfExtra" >
<span id="existing">Exsisting Extras :</span>
<select id="extra-select" name="extras">
    <option>deep cleaning</option>
</select>
<span class="extra-heading">Set Price :</span>
<input id="price" type="text" name="price">

```

javascript

```
var new_extra = document.getElementById("add_new");
new_extra.style.display = "none";
var extraText = document.getElementById("add_more");
extraText.style.display = "none";
var extraExist = document.getElementById("existing");
var extra_dropdown = document.getElementById("extra-select");
function myFunction(event) {
    console.log(event.value);
    if (event.value === "add_extra_new") {
        console.log(event.value);
        new_extra.style.display = "block";
        extraText.style.display="block";
        extraExist.style.display="none";
        extra_dropdown.style.display="none";
        $('input[type="radio"]').prop('checked');
        $('input[type="text"]').val("");
    } else {
        extraExist.style.display="block";
        extra_dropdown.style.display="block";
        new_extra.style.display = "none";
        extraText.style.display="none";
    }
    }   

```

JQuery

```
$.ajax({
    type:'POST',
    data:{ "extraOption" : extra_option}, 
    dataType : "JSON", 
    url : "login.php", 
    success:function(response){
        var data = response.data; 
        if(data){
            $.each(data, function (key, name) {    
                $('#price').val(name['price']);
                $('#hour').val(name['hours']);
                $('#minute').val(name['minutes']);
            });
        } else {        
            $('#once').val('');
            $('#reoccurence').val('');
            $('#discount').val('');
        }      
    }
});

```

login.php

```
$con=mysqli_connect("localhost","root","","price");
$result2 = array();
if (isset($_POST['extraOption'])) { 
    $query=mysqli_query($con,"select * from extras where name_of_extra                                                                                     ='$_POST[extraOption]'");
    while ($row = mysqli_fetch_array($query)) {        
       $result2['data'][] = array(
           "price" => $row['price'],
           "hours" => $row['hours'],
           "minutes" => $row['minutes']
       );
    }
    echo json_encode($result2);
}

```

**Initial state**

[![](https://i.stack.imgur.com/aDvEM.png)](https://i.stack.imgur.com/aDvEM.png)

As you can see, form's fields have initial values.

Now when "Add New Extra" radio button is clicked, text fields get emptied because of my code **else** part.

**After "Add New Extra" click**

[![](https://i.stack.imgur.com/lcprf.png)](https://i.stack.imgur.com/lcprf.png)

My problem is: if I then click on the "Existing Extra" the text fields do not recover their initial value. 

[![](https://i.stack.imgur.com/pdVMw.png)](https://i.stack.imgur.com/pdVMw.png) 

What should I do so the text fields get their initial value back (like in the first image) at this time?  

Thank you.