Předání dat ze šablony do formuláře (po odeslání)
- Jarek92
- Člen | 91
Zdravím,
řeším problém formuláře, který má za úkol vložit článek na web.
K tomuto článku se pojí také tagy, kterých může být 1 až N. Prozatím
to mám řešené následovně: Mám jeden text input, pomocí kterého
vkládám jednotlivé tagy pomocí JS funkce pod tento text input do HTML
struktury. Po odeslání formuláře bych však chtěl dostat data z této HTML
šablony (divů) do formuláře tak, abych s nimi mohl pracovat.
Ukázka definice formuláře:
public function create() {
$form = new Form();
$form->addText("title")
->setRequired("Zadej prosím nadpis článku.");
$form->addTextArea("content")
->setAttribute("rows", 15)
->setAttribute("cols", 7)
->setRequired("Zadej prosím text článku.");
$form->addCheckboxList("categories", null, $this->categories);
$form->addText("tags")
->setAttribute("size", 30)
->setRequired("Zadej prosím alespoň jedno související téma.");
$form->addButton("addTag");
$form->addRadioList("publishedAt", null, array("now" => "Publikovat ihned", "later" => "Naplánovat na"));
$form->addText("day")
->setAttribute("size", 2)
->setRequired("Zadej prosím den vydání.")
->addRule(Form::RANGE, "Den musí být číselná hodnota v intervalu %d až %d.", array(1, 31))
->setDefaultValue(date("j"));
$form->addSelect("month")
->setItems(DateTimeUtils::getMonths(), true)
->setDefaultValue(date("n"));
$form->addSelect("year")
->setItems(DateTimeUtils::getYears(), false)
->setDefaultValue(date("Y"));
$form->addText("hour")
->setAttribute("size", 2)
->setRequired("Zadej prosím hodinu vydání.")
->addRule(Form::RANGE, "Hodina musí být číselná hodnota v intervalu %d až %d.", array(0, 23))
->setDefaultValue(date("H"));
$form->addText("minute")
->setAttribute("size", 2)
->setRequired("Zadej prosím minutu vydání.")
->addRule(Form::RANGE, "Minuta musí být číselná hodnota v intervalu %d až %d.", array(0, 59))
->setDefaultValue(date("i"));
$form->addSubmit("submit", "Publikovat článek");
$form->onSuccess[] = array($this, "addArticleFormSucceeded");
return $form;
}
Vykreslení v šabloně
{block content}
<h1 n:block="title">Přidat nový článek</h1>
<p>
<form n:name=addArticleForm>
<ul class="errors" n:if="$form->hasErrors()">
<li n:foreach="$form->errors as $error">{$error}</li>
</ul>
<div class="form-group">
<label n:name=title>Nadpis</label>
<input n:name=title class="form-control">
</div>
<div class="form-group">
<label n:name=content>Obsah</label>
<textarea n:name=content class="form-control"></textarea>
</div>
<div class="form-group">
<label>Kategorie</label>
<div class="checkbox">
{foreach $form[categories]->items as $key => $label}
<label n:name="categories:$key">
<input n:name="categories:$key"> {$label}
</label>
{sep} {/sep}
{/foreach}
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<label n:name=tags>Související témata</label>
</div>
</div>
<div class="row">
<div class="form-group col-sm-4">
<input n:name=tags class="form-control" id="tags">
</div>
<div class="form-group col-sm-8">
<button n:name=addTag class="btn btn-success" id="addTag">Přidat</button>
</div>
</div>
<div id="duplicateTags">
</div>
<div id="tempTags">
</div>
<div class="form-group">
<label>Datum vydání</label>
<div class="checkbox">
{foreach $form[publishedAt]->items as $key => $label}
<label n:name="publishedAt:$key">
<input n:name="publishedAt:$key"> {$label}
</label>
{sep}<br />{/sep}
{/foreach}
</div>
</div>
<div class="datePlan" id="now">
</div>
<div class="datePlan hidden" id="later">
<input n:name=day>.
<select n:name=month></select>
<select n:name=year></select> v
<input n:name=hour> :
<input n:name=minute> hodin
</div>
<input type="hidden" name="ahojky" value="tag 1">
<div class="form-group">
<input n:name=submit class="btn btn-primary btn-lg">
</div>
</form>
</p>
<script>
function removeTag(div) {
$('#' + div.id).remove();
}
</script>
{/block}
JS kód:
<script>
$("#addTag").click(function(){
var value = $('#tags').val();
addTag(value);
});
function addTag(value) {
var tag = value.toLowerCase();
var patt = /^[a-z0-9 ěščřžýáíéúůňďťó]+$/g;
var isOK = patt.test(tag);
$("#duplicateTags").empty();
if(tag.length === 0) {
$("#duplicateTags").append("<strong><span style='color:red;'>Zadej prosím tag.</span></strong>");
}
else if(!isOK) {
$("#duplicateTags").append("<strong><span style='color:red;'>V zadaném tagu máš nepovolené znaky.</span></strong>");
}
else {
var str = tag.replace(/\s/g, '');
if($("#" + str).length > 0) {
$("#duplicateTags").append("<strong><span style='color:red;'>Zadaný tag už si jednou vybral!</span></strong>");
}
else {
$("#tempTags").append("<div id='" + str + "' class='tag'>" + tag + ' <button type="button" onclick="removeTag(' + str + ');">Odebrat</button></div>');
$("#tags").val("");
}
}
}
</script>
Jak byste následující případ vyřešili vy? Resp., jak byste na to šli?
Editoval Jarek92 (24. 9. 2016 8:58)
- lutor
- Člen | 27
Ahoj,
nejjednodušší řešení je přes přidané tagy vkládat kromě
„náhledových divů/spanů“ také do (hidden) fieldů a poté si jejich
data po odeslání získat přes $form->getHttpData()
. Data
z divů do formuláře po odeslání nedostaneš, nepřenesou se ti, obsah si
musíš ukládat do formulářových prvků.