【发布时间】:2017-05-09 20:08:14
【问题描述】:
我正在 Laravel 中创建一个网站,用户需要输入他的化名,并且在设置页面上他可以使用 jQuery 添加多个化名。当他单击加号按钮时,会添加一个文本字段、单选按钮和减号字段。
单选按钮用于将其中一个昵称标记为默认。
Image: screenshot of how the inputs look like
如何从这些单选按钮中传递一组值?即,如果我选择了 4 个假名中的第 3 个作为默认:
{'0' => null, '1' => null, '2' => '1', '3'=> null}
所以我可以将这个数组合并成假名数组,就像:
{'0' => {'0' => 'John Doe', '1' => null},
'1' => {'0' => 'John Smith', '1' => null},
'2' => {'0' => 'John Wayne', '1' => '1'},
'3' => {'0' => 'John X', '1' => null}}
最后,我会像这样保存它,或者其他一些方法也可以检查是否已经存在然后更新,但现在这并不重要:
foreach($pseudonyms as $pseudonym)
$user->pseudonyms()->create(['name' => $pseudonym[0], 'status' => $pseudonym[1]]);
我可能只是缺乏经验,不知道一些 html/php 基础知识可以让我做到这一点,但我能做什么:)
无论如何,这是 Blade 部分的输入:
<div class="input_fields_wrap">
<div class="row">
<div class="col-md-8">
{!! Form::text('pseudonyms[]', null,['class' => 'form-control']) !!}
</div>
<div class="col-md-2">
{!! Form::radio('default[]', 1, null,['class' => 'form-control']) !!}
</div>
<div class="col-md-2">
{!! Form::button('<i class="fa fa-plus" aria-hidden="true"></i>',['class'=>'btn btn-default add_field']) !!}
</div>
</div>
</div>
这里是 jQuery 的一部分,它在 .input_fields_wrap 中附加了额外的字段
$(document).ready(function() {
var max_fields = 5; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap .row"); //Fields wrapper
var add_button = $(".add_field"); //Add button ID
var added_fields = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(added_fields < max_fields){ //max input box allowed
$(wrapper).append('<div class="added"><div class="col-md-8 class1"><input type="text" name="pseudonyms[]" class="form-control"/></div>' +
'<div class="col-md-2 class2" ><input type="radio" name="default[]" value="1" class="form-control"/></div>' +
'<div class="col-md-2 class3" ><input type="button" value="-" class="remove_field btn btn-default add_field fa fa-minus"></div></div>'); //add input box
added_fields++; //text box increment
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault();
$(this).closest('.added').remove();
added_fields--;
})
});
感谢您的 cmets!
【问题讨论】: