Question

我在file HTML.twig：

1-一个隐藏文件应该取3个值，根据选择的无线电，一个来自我的数据库，另外两个hiden文件值为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个radioBox：

<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-我在同一个文件HTML.Twig中执行了阻止Javascript 我创建了一个函数来获取每个无线电的值：

{% 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;

我在hiddens中引入了独特的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 %}

如何根据选择的无线电更改隐藏文件的值

3 个答案: