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

<inputtype="hidden" name="lt" data-id="spare" value="{{ price.getLt }}">
<inputtype="hidden" name="lt" data-id="repair" value="10">
<inputtype="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 :

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

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

<inputid="spa-price" name="price"class="w3-radio" onchange='valueLt();' value="Spare {{ price.getSparePrice }}"type="radio">
<inputid="rep-price" name="price"class="w3-radio" onchange='valueLt();' value="Repair{{ price.getRepairPrice }}"type="radio">
<inputid="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>functionvalueLt(){
          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 10alert("repair checked");
              hiddenSpare.value = 10;
              hiddenRepair.value = 10;
              hiddenTest.value = repair.value;

          } elseif (test.checked){ // Should take the value 10alert("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:

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
{% block content %}
<inputtype="hidden"name="lt_filed"id="lt_filed"value="{{ price.getLt }}"><inputtype="radio"name="price"value="{{ price.getSparePrice() }}"><inputtype="radio"name="price"value="{{ price.getRepairPrice() }}"><inputtype="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 %}