javascript - JavaScript 动态创建的隐藏输入不会出现在参数包中
问题描述
我通过 JavaScript 动态创建了一些隐藏的输入。但是提交表单时，它们并没有出现在请求的参数包中。我在以前的一根树枝中使用过同样的方法，而且效果很好。在这种情况下，我无法弄清楚导致错误的原因。Parameterbag 仅包含来自表单管理员的输入值。
{% extends('base.html.twig') %}
{% block body %}
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="margin-top: 0.5cm;"></div>
<h3>Vehicle Classes</h3>
<select multiple class="form-control" id="registeredVehicleClasses" name="vehicleClasses[]">
{% if( vehicleClasses|length >0) %}
{% set i=1 %}
{% for vehicleClass in vehicleClasses %}
<option>{{ vehicleClass.className }} | {{ vehicleClass.toll }}</option>
<script>
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "vehicleClasses["+"{{ i }}" +"]");
input.setAttribute("id", "vehicleClasses["+"{{ i }}" +"]");
input.setAttribute("value", "{{ vehicleClass.className }}" + " | " + "{{ vehicleClass.toll }}");
document.getElementById('registeredVehicleClasses').appendChild(input);
</script>
{% set i = i+1 %}
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-lg-4">
<div style="margin-top: 0.5cm;"></div>
<h3>Highways</h3>
<select multiple class="form-control" id="registeredHighways" name="highways[]">
{% if( highways|length >0) %}
{% set i=1 %}
{% for highway in highways %}
<option>{{ highway.name }} | {{ highway.codeName }}</option>
<script>
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "highways["+"{{ i }}" +"]");
input.setAttribute("id", "highways["+"{{ i }}" +"]");
input.setAttribute("value", "{{ highway.name }} | {{ highway.codeName }}");
document.getElementById('registeredHighways').appendChild(input);
</script>
{% set i = i+1 %}
{% endfor %}
{% endif %}
</select>
</div>
<div class="col-lg-4">
<div style="margin-top: 0.5cm;"></div>
<h3>Highway Interchanges</h3>
<select multiple class="form-control" id="registeredHighwayExtensions" name="highwayExtensions[]">
</select>
</div>
</div>
<div style="margin-top: 0.2cm;"></div>
<div class="row">
<div class="col-lg-4" style="float: right;">
<button type="button" id="removeVehicleClass" class="btn btn-primary">Remove</button>
</div>
<div class="col-lg-4" style="float: right;">
<button type="button" id="removeHighway" class="btn btn-primary">Remove</button>
</div>
<div class="col-lg-4" style="float: right;">
<button type="button" id="removeHighwayExtension" class="btn btn-primary">Remove</button>
</div>
</div>
</div>
{{ form_start(form) }}
<div id="admin">
<div class="container">
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-4">
{{ form_errors(form.className) }}
{{ form_widget(form.className) }}
</div>
<div class="col-lg-4">
{{ form_errors(form.highwayName) }}
{{ form_widget(form.highwayName) }}
</div>
<div class="col-lg-4">
{{ form_errors(form.highwayExtensionName) }}
{{ form_widget(form.highwayExtensionName) }}
</div>
</div>
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-4">
{{ form_errors(form.toll) }}
{{ form_widget(form.toll) }}
</div>
<div class="col-lg-4">
{{ form_errors(form.highwayCodeName) }}
{{ form_widget(form.highwayCodeName) }}
</div>
<div class="col-lg-4">
{{ form_errors(form.highwayExtensionCodeName) }}
{{ form_widget(form.highwayExtensionCodeName) }}
</div>
</div>
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-4">
<button type="button" id="addVehicleClass" class="btn btn-primary">Add</button>
</div>
<div class="col-lg-4">
<button type="button" id="addHighway" class="btn btn-primary">Add</button>
</div>
<div class="col-lg-4">
{{ form_errors(form.sequenceNo) }}
{{ form_widget(form.sequenceNo) }}
</div>
</div>
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
{{ form_errors(form.macAddress) }}
{{ form_widget(form.macAddress) }}
</div>
</div>
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<button type="button" id="addHighwayExtension" class="btn btn-primary">Add</button>
</div>
</div>
</div>
</div>
<div style="margin-top: 0.5cm;"></div>
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-2">{{ form_widget(form.save) }}</div>
<div class="col-lg-5"></div>
</div>
{{ form_row(form._token) }}
{{ form_errors(form) }}
</form>
{% endblock %}
{% block javascripts %}
<script>
const addVehicleClassButton = document.getElementById('addVehicleClass');
const className = document.getElementById('admin_className');
const toll = document.getElementById('admin_toll');
const addedVehicleClasses = document.getElementById('registeredVehicleClasses');
const removeVehicleClassButton = document.getElementById('removeVehicleClass');
addVehicleClassButton.addEventListener("click", function () {
var opt = document.createElement('option');
opt.value = className.value + " | " + toll.value ;
opt.innerHTML = className.value + " | " + toll.value;
var existingOptions = addedVehicleClasses.options;
var isExist = false;
for(var i=0;i<existingOptions.length;i++){
if(existingOptions[i].value == opt.value){
isExist = true;
}
}
if(isExist == false){
addedVehicleClasses.appendChild(opt);
var input = document.createElement("input");
input.setAttribute("type", "hidden");
input.setAttribute("name", "vehicleClasses["+addedVehicleClasses.length +"]");
input.setAttribute("id", "vehicleClasses["+addedVehicleClasses.length +"]");
input.setAttribute("value", className.value + " | " + toll.value);
addedVehicleClasses.appendChild(input);
}
});
removeVehicleClassButton.addEventListener("click",function () {
try{
var options = addedVehicleClasses.getElementsByTagName('OPTION');
document.getElementById( "vehicleClasses["+(addedVehicleClasses.selectedIndex+1)+"]").remove();
addedVehicleClasses.removeChild(options[addedVehicleClasses.selectedIndex]);
}catch (e) {
}
});
</script>
{% endblock %}
解决方案
{{ form_start(form) }}在隐藏的表单标签之后。此函数之前的任何表单元素都不会包含在请求中。
您应该form_start在 HTML 中向上移动，以便它包含您要提交的所有表单元素。