我如何根据选择的收音机更改隐藏文件的值

Question

我有一个file HTML.twig：

1-一个隐藏文件应该取3个值，根据无线电选择，一个来自我的数据库，另外两个隐藏文件值数字10，如下所示：

<input type="hidden" name="lt" value="{{ price.getLt }}">
<input type="hidden" name="lt" value="10">
<input type="hidden" name="lt" value="10">

2-我有3个收音机盒：

<input id="spa-price" name="price" class="w3-radio" value="Spare {{ price.getSparePrice }}" type="radio">
<input id="rep-price" name="price" class="w3-radio" value="Repair{{ price.getRepairPrice }}" type="radio">
<input id="rep-price" name="price" class="w3-radio" value="Test {{ price.getTestPrice }}" type="radio">

3-我在同一个文件中做了一个块Javascript HTML.Twig我创建了一个函数来获取每个无线电的值：

{% block javasc %}
<script>
        function valueLt(){
          var spare= document.getElementById('spa-price');
          var repair= document.getElementById('rep-price');
          var test= document.getElementById('tes-price');
          if (repair.checked){ // Should take the value 10
              alert("repair checked");
              //<input type="hidden" name="lt" value="10">
          } else if (test.checked){ // Should take the value 10
             alert("test checked");
             //<input type="hidden" name="lt" value="10">
          } else {
             alert("spare checked"); // should take the value from DB
            // <input type="hidden" name="lt" value="{{ price.getLt }}">
        }
     </script>
{% endblock %}

你能告诉我如何根据功能中选择的每个收音机更改隐藏文件的值吗？谢谢。

Answer 1

更改隐藏输入的名称值

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

将以下行添加到适当的 If Else 子句中：

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;

我正在介绍隐藏中独特的data属性。通过这种方式，您可以使用document.querySelector选择它们并分配正确的值。

您可以轻松选择具有document.querySelector和CSS-selectors的HTML元素

Answer 2

首先，您需要更改隐藏的输入的名称，以便能够独立地选择它们：

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

我还删除了该值，因为它们稍后将由 javascript 添加。

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

我注意到您的无线电中有一个错误，因为这两个无线电上次具有相同的名称，您将无法在 JS 中区分它们，我还添加了一个 onchange() 属性来触发您的函数。

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

在这里，我们添加变量来选择隐藏的输入，这些输入现在是不同的。然后，在您的if中，除了将所需的输入更改为他的收音机的值之外，我们还将另外两个设置为 10。

Answer 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 %}