我有一个由Ajax请求提交的Symfony表单。此表单包含2个字段:日期(日期选择器)和天数(choiceType)。由于表单依赖于所选日期,因此无法初始化构建表单的天数。使用Javascript,我更新了选择拾取器中的选项。那很好。通常,一个选项如下所示:<option value="1">1 jours<\option>
。
现在,提交表单时,我需要在choiceType中添加这些字段。
我使用isXmlHttpRequest方法是因为该表单是随Ajax请求提交的,是在等待答案。 如果表单有效,我需要通知Ajax调用(我不想呈现其他模板)。 我在控制器中执行以下操作:
/**
* @param Request $request
* @return Response
* @Route("/ajout_favoris", name="ajoutFavoris")
*/
public function ajoutFavoris(Request $request){
$form = $this->creerFormulaire()->getForm();
$form->handleRequest($request);
if ($request->isXmlHttpRequest()){
if ($form->isValid() ) {
// actions ...
$reponse = ['statut' => 'success'];
}else {
$reponse = ['statut' => 'form-invalid'];
}
$reponse = new Response(json_encode($reponse));
$reponse->headers->set('Content-Type', 'application/json');
return $reponse;
}
return $this->render('@Carte/Reservation/reservation.html.twig', array(
"form" => $form->createView() ));
这是我构建表单的方式:
public function creerFormulaire(){
$formulaire = $this->createFormBuilder()
->addEventListener(FormEvents::PRE_SUBMIT, function (FormEvent $event) {
$form = $event->getForm();
$data = $event->getData();
$optionList = $this->getValidChoicesForNbJours($data["nbJours"]);
$form->add('nbJours', 'choice', array(
'attr' => [ 'placeholder' => 'nombre de jours',
'class' => 'selectpicker',
],
'choices' => $optionsList,
));
})
->add('dateDebut', DateTimeType::class, [
'widget' => 'single_text',
'format' => 'dd/MM/yyyy',
'input' => 'datetime',
'label' => 'Date début',
'required' => true,
'attr' => ['class' => 'datepicker input-date',
'type' => 'text',
'placeholder' => 'JJ/MM/AAAA',
'readonly' => true,
'required' => true,]
])
->add('nbJours', 'choice', [
'label' => 'Nombre de jours',
'choices' => [],
'attr' => [ 'placeholder' => 'nombre de jours',
'class' => 'selectpicker',
'title' => 'Nombre de jours',
'readonly' => true,
'required' => false,]
])
->add('ajoutFavoris', SubmitType::class, [
'label' => 'Ajouter aux favoris',
'attr' => [ 'class' => 'btn btn-primary reserver' ]
]);
return $formulaire;
}
这里是我如何填写选项:
public function getValidChoicesForNbJours($range){
$liste = [];
for ($i = 1; $i <= $range; $i++){
$liste[$i.' jours'] = strval($i);
}
return $liste;
}
这是ajax调用:
path_to_add_fav = ...
idPlan = ...
$("#form_ajoutFavoris").click(function (e) {
let dateDebut = document.getElementById('form_dateDebut').value;
let nbJours = document.getElementById('form_nbJours').value;
if (dateDebut && nombreJours){
let data = {
poste_id: idPoste,
plan_id: idPlan,
nbJours: nbJours ,
};
$.ajax({
url: path_to_add_fav,
type: "post",
data: JSON.stringify(data),
dataType: "json",
success: function (data) {
console.log(data.statut);
if (data.statut === "success") {
window.parent.$.fancybox.close();
}
}
});
}
});
Chrome控制台中没有错误。在fisrt提交时,它始终显示form-invalid
,在其下有时显示form-invalid
,有些则什么也没有...
我读了很多“类似的帖子”,但是还没有实现。这篇帖子与此one相关,但现在的问题有所不同。
感谢您阅读!
编辑:添加HTML
{{ form_start(form) }}
<div class="card-deck maxheight">
{% include '@Carte/Carte/poste_card.html.twig' with {'poste':poste, 'connected':connected, 'showbtn':false } %}
<div class="card card-form" id="card-reserv">
<div class="card-body">
{{ form_errors(form) }}
<div id="warning-pecheurs" class="alert alert-warning padding alert-dismissible"
role="alert">
<button type="button" class="close float-right" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
warning message
</div>
<table id="table" class="largeur">
<colgroup>
<col span="1" class="col1">
<col span="1" class="col2">
</colgroup>
<tbody>
<tr>
<td>
<div class="input-group">
{{ form_label(form.dateDebut) }}
</div>
</td>
<td class="date">
{{ form_widget(form.dateDebut) }}
</td>
</tr>
<tr>
<td colspan="2">
{{ form_errors(form.dateDebut) }}
</td>
</tr>
<tr>
<td>
<div class="input-group">
{{ form_label(form.nbJours) }}
</div>
</td>
<td>
{{ form_widget(form.nbJours) }}
</td>
</tr>
<tr>
<td colspan="2">
{{ form_errors(form.nbJours) }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row margin0">
<button type="button" class="btn btn-secondary" data-dismiss="modal"
onclick="window.parent.$.fancybox.close()" value="CloseFB">
Annuler
</button>
{{ form_widget(form.ajoutFavoris) }}
</div>
{{ form_end(form) }}
这里是我如何在JS中填充选择器:
let new_options = "";
for (i = 0; i < nbOptions; i++, j++)
new_options += "<option value=" + j + ">" + j + " jours</option>";
$("#form_nbJours").html(new_options).selectpicker('refresh');
编辑:解决方案 对Ajax方法的调用很内!! 通过此调用,它可以完美运行!
$('form').submit(function (e) {
console.log("ok");
e.preventDefault();
let formSerialize = $(this).serialize();
$.post(path_to_add_fav, formSerialize, function(response) {
console.log(response.statut);
if (response.statut === "success") {
console.log("Réponse correcte !");
window.parent.$.fancybox.close();
}
}, 'JSON');
}
答案 0 :(得分:0)
您可以在添加字段后通过调用Subscription
来禁用表单验证