php/jQuery - 表单验证,获取动态添加的输入值
php/jQuery - formvalidation, get value of dynamically added inputs
我正在尝试使用 Formvalidation.io plugin 来动态添加输入字段。
这些是我的输入:
<div class="col-lg-4">
<label class="control-label">Model</label>
<select name="box[0].model" class="ui dropdown dropdown-model semantic-dropdown">
<option value="">Choose Model</option>
<option value="model_one">Model One</option>
<option value="model_two">Model Two</option>
<option value="model_three">Model Three</option>
</select>
</div>
<div class="col-lg-4">
<label class="control-label">Type</label>
<select name="box[0].type" class="ui dropdown dropdown-type semantic-dropdown">
<option value="">Choose Type</option>
<option value="0">Ingen Konfiguration</option>
<option value="1">Sommer</option>
<option value="2">Vinter</option>
</select>
</div>
<div class="col-lg-4">
<label class="control-label">Temperatur</label>
<select name="box[0].temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
<option value="">Choose Temperatur</option>
<option value="0">No Temperature</option>
<option value="1">2-8 Grader</option>
<option value="2">15-25 Grader</option>
<option value="3">Frozen</option>
</select>
</div>
<a href="#" class="addButton">Add extra input</a>
还有,我的隐藏字段模板:
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-lg-4">
<select name="model" class="ui dropdown dropdown-model semantic-dropdown">
<option value="">Choose Model</option>
<option value="model_one">Model One</option>
<option value="model_two">Model Two</option>
<option value="model_three">Model Three</option>
</select>
</div>
<div class="col-lg-4">
<select name="type" class="ui dropdown dropdown-type semantic-dropdown">
<option value="">Choose Type</option>
<option value="0">Ingen Konfiguration</option>
<option value="1">Sommer</option>
<option value="2">Vinter</option>
</select>
</div>
<div class="col-lg-4">
<select name="temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
<option value="">Vælg Temperatur</option>
<option value="0">No Temperature</option>
<option value="1">2-8 Grader</option>
<option value="2">15-25 Grader</option>
<option value="3">Frozen</option>
</select>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<!-- END HIDDEN TEMPLATE-->
添加字段并动态验证它们的工作正常。但是,当提交表单时,我没有看到输入的值:这是上面的 var_dump($_POST)
:
"array(4) {
["box"]=>
array(3) {
[0]=>
string(1) "0"
[1]=>
string(1) "2"
[2]=>
string(1) "1"
}
["model"]=>
string(0) ""
["type"]=>
string(0) ""
["temperatur"]=>
string(0) ""
表单使用 AJAX:
提交
//Submit the form:
$('#bookingform').on('submit', function(e) {
e.preventDefault(); //prevent form from submitting
$form = $(this);
// Use Ajax to submit form data
$.ajax({
url: '/api/submit-form',
type: 'POST',
data: $form.serialize(),
dataType: "json",
success: function(data) {
console.log(data.result);
if (data.result == 'success') {
console.log(data);
} else {
alert('Error #1');
}
},
error: function(data) {
console.log("ERROR");
}
});
});
运行一个console.log($form.serialize());
在表格上:
box%5B0%5D.model=model_one&box%5B0%5D.type=1&box%5B0%5D.temperatur=1&model=&type=&temperatur=
如您所见,我没有得到 box[o].name
的值 - 此外,我对隐藏字段的输入值不感兴趣,只有当它们可见时 (box[].name
)
编辑:
下面是用于添加输入的 javascript 代码:
bookIndex = 0;
.. code here that is not relevant ..
// Add button click handler
.on('click', '.addButton', function() {
bookIndex++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="model"]').attr('name', 'box[' + bookIndex + '].model').end()
.find('[name="type"]').attr('name', 'box[' + bookIndex + '].type').end()
.find('[name="temperatur"]').attr('name', 'box[' + bookIndex + '].temperatur').end();
//Semantic Dropdown - refresh dynamic added dropdowns:
$('.semantic-dropdown').dropdown();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookingform')
.formValidation('addField', 'box[' + bookIndex + '].model', titleValidators)
.formValidation('addField', 'box[' + bookIndex + '].type', isbnValidators)
.formValidation('addField', 'box[' + bookIndex + '].temperatur', priceValidators);
})
但是,如前所述,我可以动态添加输入,但问题是从动态添加的输入中获取值。我似乎也无法在 formvalidation.io 插件文档中找到它。
我认为问题在于数据类型,因为您发送的是 x-www-form-urlencoded
而不是 json
数据,因此请尝试更改:
dataType : "html"
并添加 contentType: "application/x-www-form-urlencoded; charset=UTF-8"
// 默认设置
$.ajax({
url: '/api/submit-form',
type: 'POST',
data: $form.serialize(),
dataType : "html",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
....
});
我正在尝试使用 Formvalidation.io plugin 来动态添加输入字段。
这些是我的输入:
<div class="col-lg-4">
<label class="control-label">Model</label>
<select name="box[0].model" class="ui dropdown dropdown-model semantic-dropdown">
<option value="">Choose Model</option>
<option value="model_one">Model One</option>
<option value="model_two">Model Two</option>
<option value="model_three">Model Three</option>
</select>
</div>
<div class="col-lg-4">
<label class="control-label">Type</label>
<select name="box[0].type" class="ui dropdown dropdown-type semantic-dropdown">
<option value="">Choose Type</option>
<option value="0">Ingen Konfiguration</option>
<option value="1">Sommer</option>
<option value="2">Vinter</option>
</select>
</div>
<div class="col-lg-4">
<label class="control-label">Temperatur</label>
<select name="box[0].temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
<option value="">Choose Temperatur</option>
<option value="0">No Temperature</option>
<option value="1">2-8 Grader</option>
<option value="2">15-25 Grader</option>
<option value="3">Frozen</option>
</select>
</div>
<a href="#" class="addButton">Add extra input</a>
还有,我的隐藏字段模板:
<!-- The template for adding new field -->
<div class="form-group hide" id="bookTemplate">
<div class="col-lg-4">
<select name="model" class="ui dropdown dropdown-model semantic-dropdown">
<option value="">Choose Model</option>
<option value="model_one">Model One</option>
<option value="model_two">Model Two</option>
<option value="model_three">Model Three</option>
</select>
</div>
<div class="col-lg-4">
<select name="type" class="ui dropdown dropdown-type semantic-dropdown">
<option value="">Choose Type</option>
<option value="0">Ingen Konfiguration</option>
<option value="1">Sommer</option>
<option value="2">Vinter</option>
</select>
</div>
<div class="col-lg-4">
<select name="temperatur" class="ui dropdown dropdown-temperatur semantic-dropdown">
<option value="">Vælg Temperatur</option>
<option value="0">No Temperature</option>
<option value="1">2-8 Grader</option>
<option value="2">15-25 Grader</option>
<option value="3">Frozen</option>
</select>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn-default removeButton"><i class="fa fa-minus"></i></button>
</div>
</div>
<!-- END HIDDEN TEMPLATE-->
添加字段并动态验证它们的工作正常。但是,当提交表单时,我没有看到输入的值:这是上面的 var_dump($_POST)
:
"array(4) {
["box"]=>
array(3) {
[0]=>
string(1) "0"
[1]=>
string(1) "2"
[2]=>
string(1) "1"
}
["model"]=>
string(0) ""
["type"]=>
string(0) ""
["temperatur"]=>
string(0) ""
表单使用 AJAX:
提交//Submit the form:
$('#bookingform').on('submit', function(e) {
e.preventDefault(); //prevent form from submitting
$form = $(this);
// Use Ajax to submit form data
$.ajax({
url: '/api/submit-form',
type: 'POST',
data: $form.serialize(),
dataType: "json",
success: function(data) {
console.log(data.result);
if (data.result == 'success') {
console.log(data);
} else {
alert('Error #1');
}
},
error: function(data) {
console.log("ERROR");
}
});
});
运行一个console.log($form.serialize());
在表格上:
box%5B0%5D.model=model_one&box%5B0%5D.type=1&box%5B0%5D.temperatur=1&model=&type=&temperatur=
如您所见,我没有得到 box[o].name
的值 - 此外,我对隐藏字段的输入值不感兴趣,只有当它们可见时 (box[].name
)
编辑: 下面是用于添加输入的 javascript 代码:
bookIndex = 0;
.. code here that is not relevant ..
// Add button click handler
.on('click', '.addButton', function() {
bookIndex++;
var $template = $('#bookTemplate'),
$clone = $template
.clone()
.removeClass('hide')
.removeAttr('id')
.attr('data-book-index', bookIndex)
.insertBefore($template);
// Update the name attributes
$clone
.find('[name="model"]').attr('name', 'box[' + bookIndex + '].model').end()
.find('[name="type"]').attr('name', 'box[' + bookIndex + '].type').end()
.find('[name="temperatur"]').attr('name', 'box[' + bookIndex + '].temperatur').end();
//Semantic Dropdown - refresh dynamic added dropdowns:
$('.semantic-dropdown').dropdown();
// Add new fields
// Note that we also pass the validator rules for new field as the third parameter
$('#bookingform')
.formValidation('addField', 'box[' + bookIndex + '].model', titleValidators)
.formValidation('addField', 'box[' + bookIndex + '].type', isbnValidators)
.formValidation('addField', 'box[' + bookIndex + '].temperatur', priceValidators);
})
但是,如前所述,我可以动态添加输入,但问题是从动态添加的输入中获取值。我似乎也无法在 formvalidation.io 插件文档中找到它。
我认为问题在于数据类型,因为您发送的是 x-www-form-urlencoded
而不是 json
数据,因此请尝试更改:
dataType : "html"
并添加 contentType: "application/x-www-form-urlencoded; charset=UTF-8"
// 默认设置
$.ajax({
url: '/api/submit-form',
type: 'POST',
data: $form.serialize(),
dataType : "html",
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
....
});