- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
有没有办法使用 ajax 异步填充表单 ChoiceType(下拉)?
基本上我想做的是:
简短描述:简单的预订系统。
详细描述:
当用户在“preferredDate”中使用日期选择器(或其他)选择日期时,ajax 调用将检查所选日期是否有可用的时间段,并使用时间填充“availableTimes”ChoiceType(下拉列表)(例如:10:00、10:30、11:00、11:30 等) .
可用时间不在数据库中。
我的表单:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('preferredDate', DateType::class, [
'widget' => 'single_text',
'input' => 'datetime',
'format' => 'dd.MM.yyyy',
])
->add('availableTimes', ChoiceType::class, ['required' => false]);
}
我的 JS:
$(".reservation-date").change(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "{{URL}}",
data: {},
success: function (data) {
$(".reservation-times").empty();
$.each(data, function (key, value) {
//populate availabletimes dropdown
let disabled = (value.disabled === true ? "disabled" : '');
$(".reservation-times").append('<option ' + disabled + ' value=' + value.time + '>' + value.time + '</option>');
})
}
,
error: function (error) {
console.log(error);
}
});
})
当我发送选定的时间时它起作用了它抛出一个错误“这个值无效”
我做错了什么?
你会怎么做?
编辑:没有验证集,但出于某种原因它仍然想验证 ChoiceType ...EDIT2:阅读所有旧的 SF2 答案,但所有答案都是关于使用事件发送表单 2 次以上。
EDIT3:来自 _profiler 的错误:
最佳答案
我终于成功了。添加了EventListener,其他基本一样。
我的表单:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('preferredDate', DateType::class, [
'widget' => 'single_text',
'input' => 'datetime',
'format' => 'dd.MM.yyyy',
])
->add('availableTimes', ChoiceType::class)
->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
// get the form from the event
$form = $event->getForm();
$formOptions = $form->getConfig()->getOptions();
//helpers
$availableTimeHandler = $formOptions['availableTimeHelper'];
// get the form data, that got submitted by the user with this request / event
$data = $event->getData();
//get date
$preferredDate = $data['preferredDate'];
// get the availableTimes element and its options
$fieldConfig = $form->get('availableTimes')->getConfig();
$fieldOptions = $fieldConfig->getOptions();
/**
* Getting available times logic is here,
* not showing because it's irrelevant to the issue.
*
* $times array example:
* [
* ['time' => '10:00', 'disabled' => false],
* ['time' => '11:00', 'disabled' => true],
* ['time' => '12:00', 'disabled' => true],
* ]
*/
$choices = [];
foreach ($times as $time) {
$choices[] = [$time['time'] => $time['time']];
}
//update choices
$form->add('availableTimes', ChoiceType::class,
array_replace(
$fieldOptions, [
'choices' => $choices
]
)
);
});
}
我的 JS:
$(".reservation-date").change(function () {
$.ajax({
type: "GET",
dataType: "json",
url: "{{URL}}",
data: {},
success: function (data) {
$(".reservation-times").empty();
$.each(data, function (key, value) {
//populate availabletimes dropdown
let disabled = (value.disabled === true ? "disabled" : '');
$(".reservation-times").append('<option ' + disabled + ' value=' + value.time + '>' + value.time + '</option>');
})
}
,
error: function (error) {
console.log(error);
}
});
})
建议或提示将不胜感激。
关于php - Symfony 4 Form - Ajax 选择人口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55339452/
我的网页上有两个 DIV 元素。如果 DIV A 的内部 HTML 是通过不受我控制的第三方脚本添加的,我想删除 DIV B 的内部 html。 在 JS 中实现这一目标的最佳方法是什么? 最佳答案
我整个周末都在看这段代码。我知道有数据,我可以通过其他查询提取它,但 GridView 不会显示和填充。有什么建议吗? string sqlSelection =
所以表格在页面上 然后我使用 AJAX 返回数据 $.ajax({ type: 'POST', url: "ticketAjax.php", data: '&m=swapTi
我有一个表格 View Controller ,我正在使用 Storyboard设计它。原型(prototype)单元非常基本,它只有两个标签。姓名标签和日期标签。 当我运行程序时,样式就在那里(字体
我正在尝试填充不可变 JS 映射。给定一个字段数组和一个表单,例如 {form: 'Register', fields: ['name','firstname']} 我想得到类似的东西: { form
我有两个 Mongoose 模型: 1-事件模型: eventSchema = new mongoose.Schema({ name: { type: String, requir
我想以编程方式填充 WPF ListView 。我认为我接近答案但尚未解决,我使用一种方法来填充 ListView , ListView 在 XAML 中看起来像这样
我有以下场景: 用户可以登录网站。用户可以添加/删除投票(有两个选项的问题)。任何用户都可以通过选择任何选项来对民意调查发表意见。 考虑到上述情况,我有三个模型 - Users Polls Optio
这个问题在这里已经有了答案: Capture __LINE__ and __FILE__ without #define (2 个答案) 关闭 3 年前。 所以我有一个要评估结果的函数,如果结果失败
我有一个使用 innerHTML 在表中添加行的函数: function addRowToTable(tblParam) { var tbl =document.getElementById(tb
我是一名优秀的程序员,十分优秀!