How to retain the values in the text field with Radio buttons using JQuery

Question

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

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

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

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

Answer 1

use this to reset to initial value

$('radio[value=existing_data]').click(function(){
  if($(this).is(":checked")){
    $('.setprice').val(11);//these three line set value to inputs
    $('.min').val(10);
    $('.timehrs').val(1);
 }
});

PS set select as per your need

Answer 2

You can use localStorage , check this link https://www.w3schools.com/html/html5_webstorage.asp

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 value="">Please select</option>
   <option value="deep cleaning">deep cleaning</option>
   <option value="dishes">dishes</option>
</select>

<span class="extra-heading">Set Price :</span>
<input id="price" type="text" name="price">

JS

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) {
        if (event.value === "add_extra_new") {
            localStorage.setItem("pirce", $('#price').val());

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

          $('#price').val(localStorage.getItem("pirce"));
        }
     }

   $("#extra-select").on('change',function () {
      $.ajax({
         type: 'POST',
         data: {"extraOption": $(this).val()},
         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_extras ='$_POST[extraOption]'");
   while ($row = mysqli_fetch_array($query)) {
      $result2['data'][] = array(
         "price" => $row['price'],
         "hours" => $row['hours'],
         "minutes" => $row['minutes']
      );
   }
   echo json_encode($result2);
}

Explanation

You need to check when ever user change the dropdown values.