How I Change A Value Of Hidden File According Which Radio Selected

I have in a file HTML.twig: 1- a hidden file should take 3 values according which radio selected, one from my database and two others hiden files values the number 10, like this: &

Solution 1:

Change the name values of the hidden inputs

<input type="hidden" name="lt" data-id="spare" value="{{ price.getLt }}">
<input type="hidden" name="lt" data-id="repair" value="10">
<input type="hidden" name="lt" data-id="test" value="10">

add the following lines to the appropiate if else clauses:

document.querySelector("input[data-id='spare']").value = spare.value;
document.querySelector("input[data-id='repair']").value = repair.value;
document.querySelector("input[data-id='test']").value = test.value;

I'm introducing unique data properties in the hiddens. In this way you can select them using document.querySelector and assign the correct value.

You can easily select HTML-elements with document.querySelector and CSS-selectors

Solution 2:

First you need to change the name of your input hidden to be able to select them independently one from the other :

<input type="hidden" name="lt-spare" value="">
<input type="hidden" name="lt-repair" value="">
<input type="hidden" name="lt-test" value="">

I also removed the value since those will be added by the javascript later on.

<input id="spa-price" name="price" class="w3-radio" onchange='valueLt();' value="Spare {{ price.getSparePrice }}" type="radio">
<input id="rep-price" name="price" class="w3-radio" onchange='valueLt();' value="Repair{{ price.getRepairPrice }}" type="radio">
<input id="tes-price" name="price" class="w3-radio" onchange='valueLt();' value="Test {{ price.getTestPrice }}" type="radio">

I've noticed a mistake in your radios since the two last had the same name you wouldn't be able to distinct them in your JS and I also added a onchange() attribute to trigger your function.

<script>
        function valueLt(){
          var spare= document.getElementById('spa-price');
          var repair= document.getElementById('rep-price');
          var test= document.getElementById('tes-price');

          var hiddenSpare =   document.getElementsByName("lt-spare");
          var hiddenRepair =   document.getElementsByName("lt-repair");
          var hiddenTest =   document.getElementsByName("lt-test");

          if (repair.checked){ // Should take the value 10
              alert("repair checked");
              hiddenSpare.value = 10;
              hiddenRepair.value = 10;
              hiddenTest.value = repair.value;

          } else if (test.checked){ // Should take the value 10
             alert("test checked");
             hiddenSpare.value = 10;
             hiddenRepair.value = 10;
             hiddenTest.value = test.value;

          } else {
             alert("spare checked"); // should take the value from DB
             hiddenSpare.value = spare.value;
             hiddenRepair.value = 10;
              hiddenTest.value = 10;
            }
        }
     </script>

Here we add variables to select your input hidden that are now distincts. Then in your if on top of changing the desired input to the value of his radio we also set the two others to 10.

Solution 3:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% block content %}
<input type="hidden" name="lt_filed" id="lt_filed" value="{{ price.getLt }}">

<input type="radio" name="price" value="{{ price.getSparePrice() }}">
<input type="radio" name="price" value="{{ price.getRepairPrice() }}">
<input type="radio" name="price" value="{{ price.getTestPrice() }}">
{% endblock %}

{% block javascript %}
<script>
$(function() {
	$('input[name="price"]').on('change', function() {
		$('#lt_filed').val($(this).val());
		console.log('Val set '+ $('#lt_filed').val());
	});
});
</script>
{% endblock %}