Javascript PHP/Bootstrap-动态添加字段&;提交表格
我有点迷路了,我想你们也许能帮上忙Javascript PHP/Bootstrap-动态添加字段&;提交表格,javascript,php,jquery,css,twitter-bootstrap-3,Javascript,Php,Jquery,Css,Twitter Bootstrap 3,我有点迷路了,我想你们也许能帮上忙 我想做什么: 我有一个表单,用户将动态添加字段,然后我希望用户提交该表单并在下一页显示值。但是用户必须选择一个下拉列表,在文本框中显示他们提交的数据类型。比如说 -------------------------- - Drop Down -Text Box - -------------------------- -------------------------- - INT - 123 - ----------------
我想做什么: 我有一个表单,用户将动态添加字段,然后我希望用户提交该表单并在下一页显示值。但是用户必须选择一个下拉列表,在文本框中显示他们提交的数据类型。比如说
--------------------------
- Drop Down -Text Box -
--------------------------
--------------------------
- INT - 123 -
--------------------------
--------------------------
- TEXT - ABC - +
--------------------------
提交表格后:
INT-123文本-ABC 有人知道我怎么做吗 我的代码:
<div class="col-md-4">
<div class="values">
<label>Type:</label>
<form method="post" action="values.php">
<div class="form-group multiple-form-group input-group">
<div class="input-group-btn input-group-select">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="concept">int</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#int">int</a></li>
<li><a href="#text">text</a></li>
</ul>
<input type="hidden" class="input-group-select-val" name="contacts['type'][]" value="int">
</div>
<input type="text" name="contacts['value'][]" class="form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-add">+</button>
</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<script>
(function ($) {
$(function () {
var addFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $formGroupClone = $formGroup.clone();
$(this)
.toggleClass('btn-success btn-add btn-danger btn-remove')
.html('–');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('int');
$formGroupClone.find('.input-group-select-val').text('int');
$formGroupClone.insertAfter($formGroup);
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') <= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', true);
}
};
var removeFormGroup = function (event) {
event.preventDefault();
var $formGroup = $(this).closest('.form-group');
var $multipleFormGroup = $formGroup.closest('.multiple-form-group');
var $lastFormGroupLast = $multipleFormGroup.find('.form-group:last');
if ($multipleFormGroup.data('max') >= countFormGroup($multipleFormGroup)) {
$lastFormGroupLast.find('.btn-add').attr('disabled', false);
}
$formGroup.remove();
};
var selectFormGroup = function (event) {
event.preventDefault();
var $selectGroup = $(this).closest('.input-group-select');
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input-group-select-val').val(param);
}
var countFormGroup = function ($form) {
return $form.find('.form-group').length;
};
$(document).on('click', '.btn-add', addFormGroup);
$(document).on('click', '.btn-remove', removeFormGroup);
$(document).on('click', '.dropdown-menu a', selectFormGroup);
});
})(jQuery);
</script>
类型:
int
+
提交
(函数($){
$(函数(){
var addFormGroup=函数(事件){
event.preventDefault();
var$formGroup=$(this).closest('.formGroup');
var$multipleFormGroup=$formGroup.closest('.multipleFormGroup');
var$formGroupClone=$formGroup.clone();
$(本)
.toggleClass('btn-success btn add btn danger btn remove')
.html('-');
$formGroupClone.find('input').val('');
$formGroupClone.find('.concept').text('int');
$formGroupClone.find('.input group select val').text('int');
$formGroupClone.insertAfter($formGroup);
var$lastFormGroupLast=$multipleFormGroup.find('.formgroup:last');
如果($multipleFormGroup.data('max')=countFormGroup($multipleFormGroup)){
$lastFormGroupLast.find('.btn add').attr('disabled',false);
}
$formGroup.remove();
};
var selectFormGroup=函数(事件){
event.preventDefault();
变量$selectGroup=$(this).closest('.input-group-select');
var param=$(this.attr(“href”).replace(“#”,”);
var concept=$(this.text();
$selectGroup.find('.concept').text(concept);
$selectGroup.find('.input group select val').val(param);
}
var countFormGroup=函数($form){
返回$form.find('.form group').length;
};
$(文档).on('click','.btn add',addFormGroup);
$(文档).on('click','.btn remove',removeFormGroup);
$(文档)。在('单击','。下拉菜单a',选择FormGroup);
});
})(jQuery);
请添加您当前的code@cmorrissey,我添加了我的代码。现在,我只是想弄清楚如何将我输入的值与下拉值一起传递到下一页。