Result view after check [x ]Car 1: checked both
[ x]Car 1 [x ]Car 2
Code:
Component:
public $plan_requirement2 = [];
View:
<label for="requirement2">
<input type="checkbox" id = "requirement2" value="Red car" wire:model="plan_requirement2"> Car 1
</label>
<label for="requirement2">
<input type="checkbox" id = "requirement2" value="Blue car" wire:model="plan_requirement2"> Car 2
</label>
public $plan_requirement2 = [];
checkbox attribute must be array
try this
<label>
<input type="checkbox" value="Red car" wire:model.defer="plan_requirement2" wire:key="requirement1"> Car 1
</label>
<label>
<input type="checkbox" value="Blue car" wire:model.defer="plan_requirement2" wire:key="requirement2"> Car 2
</label>
Related
I have been trying to view whether the checkbox is checked (value: Add customer) or unchecked ( value: 0) based on the database value. But the checkbox show checked when the database (MySQL) value is 0 in Livewire.
"change_metadata1"=>$this->change_metadata1,
"change_metadata2"=>$this->change_metadata2,
"change_metadata3"=>$this->change_metadata3,
"change_metadata4"=>$this->change_metadata4,
"change_metadata5"=>$this->change_metadata5,
"change_metadata6"=>$this->change_metadata6,
Customer name
Customer address
<label for="change_metadata">
<input type="checkbox" id="standards" value="Scope" wire:model="change_metadata3"> Scope
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="New contact" wire:model="change_metadata4"> New contact
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="Number of employees" wire:model="change_metadata5"> Number of employees
</label>
<label for="change_metadata">
<input type="checkbox" id="standards" value="New decision" wire:model="change_metadata6"> New decision
</label>
I am Using WFFM with Sitecore-8.2-Update 4 Version. So i have a requirement to change HTML structure of WFFM webforms.
Let me share my case.
We have Name Section that contains first name and last name.
IN WFFM form designer i have created like below
Then the Html is generated like below by WFFM.
<div class="required-field form-group">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}" />
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">LastName</label>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The LastName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
</span>
</div>
<div class="required-field form-group">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}" />
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">FirstName</label>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The FirstName field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="" /><span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
</span>
</div>
But I need a Html like below one
<div class="required-field form-group has-feedback">
<span>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The First field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" placeholder="" style="" type="text" value="">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Id" type="hidden" value="{FF409749-4574-4D8C-971D-1A2D66B82FDA}">
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_1__Value">First</label>
<span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[1].Value" data-valmsg-replace="true">
</span>
</span>
<span>
<input class=" form-control text-box single-line" data-val="true" data-val-length="The Last field must be a string with a minimum length of 0 and a maximum length of 256." data-val-length-max="256" data-val-required="This field is required." data-val-required-tracking="{7E86B2F5-ACEC-4C60-8922-4EB5AE5D9874}" id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" placeholder="" style="" type="text" value="">
<input id="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Id" name="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Id" type="hidden" value="{6DAF46AC-CEE6-4CB2-9391-40ACC39CCE74}">
<label class="control-label" for="wffm26cf3ccb39024ed0974e0f60d9292156_Sections_0__Fields_0__Value">Last</label>
<span class="field-validation-valid help-block" data-valmsg-for="wffm26cf3ccb39024ed0974e0f60d9292156.Sections[0].Fields[0].Value" data-valmsg-replace="true">
</span>
</span>
</div>
Steps that i followed change html structure of WFFM.
WFFM using Sitecore.Forms.Mvc.Controllers.FormController and Its using default index action. By this it is using ~\Views\Forms\Index.cshtml on root web site.
Its basically using Editor for template.
So in my case i need to find out name section and need to change my html structure. From my findings SectionViewModel.cshtml is responsible for rendering all sections.
I have create one method to check whether current section needs to customized or not.
#if
(Renderer.IsCustomisedSection(Model))
Below my full SectionViewModel view file. (~\Views\Form\EditorTemplates\SectionViewModel.cshtml)
#using Sitecore.Forms.Mvc.Html
#using AAA.Foundation.HtmlHelper.WffmRenderer;
#model Sitecore.Forms.Mvc.ViewModels.SectionViewModel
<!--Render customised action-->
#if (Renderer.IsCustomisedSection(Model))
{
var customisedFieldHtml = Html.EditorFor(x => Model.Fields);
#Html.Raw(Renderer.RenderCustomisedFieldSection(customisedFieldHtml))
}
else
<!--Render customised action Ends-->
if (Model.ShowTitle && !string.IsNullOrEmpty(Model.Title))
{
<fieldset class="#Model.CssClass">
<legend>#Html.BootstrapText("Title")</legend>
#if (Model.ShowInformation && !string.IsNullOrEmpty(Model.Information))
{
<p>#Html.BootstrapText("Information")</p>
}
<div class="row">
<div class="col-md-12">
#Html.EditorFor(x => Model.Fields)
</div>
</div>
</fieldset>
}
else
{
#Html.EditorFor(x => Model.Fields)
}
This is how i can catch Name section by model title.Below my renderer class file
public static bool IsCustomisedSection(Sitecore.Forms.Mvc.ViewModels.SectionViewModel model) {
bool result = false;
// Check the model needs to customised
if (model.Title == "Name") { // For Ex:
result = true;
}
return result;
}
Then i will call respective customize html section like below.
var customisedFieldHtml = Html.EditorFor(x => Model.Fields);
#Html.Raw(Renderer.RenderCustomisedFieldSection(customisedFieldHtml))
Using "Html.EditorFor(x => Model.Fields)" this i can get default generated html. Then i will pass it to my customise render method. This will identify which sites and which section rendere needs to apply.
public static HtmlString RenderCustomisedFieldSection(HtmlString
customisedSectionHtml)
{
string caseValue = "SiteName-SectionName";
HtmlString result = new HtmlString(string.Empty);
switch (caseValue) {
case "SiteName-SectionName":
result = SiteName_Renderer.NameSection(customisedSectionHtml);
break;
}
return result;
}
My final customised html rendere method like below. I am using html agility pack to reframe the htmls.
public static HtmlString NameSection(HtmlString rawHtml)
{
HtmlNode customisedRoot = null;
HtmlDocument doc = new HtmlDocument();
doc.LoadHtml(rawHtml.ToString());
// Find each form group elements
var groupHtml = doc.DocumentNode
.Descendants("div")
.Where(d =>
d.Attributes.Contains("class")
&&
d.Attributes["class"].Value.Contains("form-group")
);
if (groupHtml.Count() > 0)
{
// Initialise root
customisedRoot = groupHtml.First().Clone();
customisedRoot.RemoveAllChildren();
// Customised the html
foreach (HtmlNode htmlNode in groupHtml)
{
HtmlDocument innerRootDoc = new HtmlDocument();
HtmlNode innerRoot = innerRootDoc.CreateElement("span");
var helpBlock = htmlNode.Descendants("span").Where(d =>
d.Attributes.Contains("class")
&&
d.Attributes["class"].Value.Contains("help-block")
);
innerRoot.PrependChild(helpBlock.FirstOrDefault());
var label = htmlNode.Descendants("label");
innerRoot.PrependChild(label.FirstOrDefault());
var inputs = htmlNode.Descendants("input");
foreach (HtmlNode inputsNode in inputs)
{
innerRoot.PrependChild(inputsNode);
}
customisedRoot.PrependChild(innerRoot);
}
}
return (customisedRoot!=null)?new HtmlString(customisedRoot.OuterHtml): new HtmlString(String.Empty);
}
By this approach i can able to customize WFFM web form html.
Below are i have tested after my html changes.
Does validation working or not in website.
If i submit the form will it available in form-reports section.In download excel whether submitted value will present or not.
So all the above cases or passed.
My query is above approach will break any other functionality.
I have a dummy project in Flask, which consists in a web form, where you fill in 3 cities, which are then printed upon submition.
This is my init.py file:
#app.route('/average_temperatures/<city1>/<city2>/<city3>', methods=['POST', 'GET'])
def results_temperature(city1, city2, city3):
return "The cities are: {}, {}, {}".format(city1, city2, city3)
The function works, but I am unable to pass the variables from the form straight into the function, as parameters.
edit:
My goal is to have the city variables as part of the URL in the clean form of /city1/city2/city3.
This is the form:
<div class="input-group">
<form action="{{ url_for('results_temperature', city1=city1, city2=city2, city3=city3) }}" method="POST">
<input type="text" class="form-control" placeholder="City 1" name="city1"></input>
<input type="text" class="form-control" placeholder="City 2" name="city2"></input>
<input type="text" class="form-control" placeholder="City 3" name="city3"></input>
<div class="row" style="margin-bottom: 20px;"></div>
Filling out the form results in a URL
http://example.com/average_temperatures///
So I evidently fail to pass the form fields in the form action part.
Any hits are appreciated, cheers.
You should get the cities from the request.form variable.
#app.route('/average_temperatures', methods=['POST', 'GET'])
def results_temperature():
return "The cities are: {}, {}, {}".format(request.form['city1'], request.form['city2'], request.form['city3'])
In your HTML form:
<form action="{{ url_for('results_temperature') }}" method="POST">
<input type="text" class="form-control" placeholder="City 1" name="city1"></input>
<input type="text" class="form-control" placeholder="City 2" name="city2"></input>
<input type="text" class="form-control" placeholder="City 3" name="city3"></input>
</form>
I have a simple input radio for toggling between active and inactive. I can not figure out how to get Ember to tie this to the model. My RAW html currently looks like this:
<fieldset class="checkboxes">
<label class="active" for="is_active">
<input type="radio" id="is_active" name="status" value="1" checked="">
<span>Active</span>
<div class="input"></div>
</label>
<label class="sep">/</label>
<label class="inactive" for="inactive">
<input type="radio" id="inactive" value="0" name="status">
<span>Inactive</span>
<div class="input"></div>
</label>
Does anyone have any ideas on how to do this using the Ember form model binding?
make your labels action, that will allow you to play with them in the controller. I hope this help....
<fieldset>
<label class="option-buttons" for="reason1" {{action "setDeclineReason" "Too Expensive" on="mouseDown"}}>
<input name="decline-reason" id="reason1" value="Too Expensive" type="radio">
<span>
<div class="check"></div>
Too expensive
</span>
</label>
<label class="option-buttons" for="reason2" {{action "setDeclineReason" "Lack of Amenities" on="mouseDown"}}>
<input name="decline-reason" id="reason2" value="Lack of Amenities" type="radio">
<span>
<div class="check"></div>
Lack of amenities
</span>
</label>
</fieldset>
App.DeclineController = Ember.Controller.extend({
declineReason: null,
decline: function(){
var update = this.store.update('request', {
id: this.get('model').id,
user_decline_reason: this.get('declineReason')
});
update.save();
actions:{
setDeclineReason: function(declineReason){
this.set('declineReason', declineReason);
}
}
});
So basically I have a 5 checkboxes where if the user selects any of the two boxes the rest will be disabled so that they can't pick anymore but enable those boxes if any of the two boxes are deselected.
This will be inside a form.
Thanks!
So I tried one of the method below with the following code:
<input type="checkbox" name="checkAll" id="checkAll">??
<input type="checkbox" name="checkOUT" id="checkOUT">AA
<input type="checkbox" name="book" class="book" value="book1">book1
<input type="checkbox" name="book" class="book" value="book2">book2
<input type="checkbox" name="book" class="book" value="book3">book3
<input type="checkbox" name="book" class="book" value="book4">book4
<input type="checkbox" name="book" class="book" value="book5">book5</table>
<script>
$(function () {
$("#checkAll" && "#checkOUT").click(function () {
if ($("#checkAll" && "#checkOUT").is(':checked')) {
$(".book").prop("disabled", true);
} else {
$(".book").prop("disabled", false);
}
});
});
</script>
I can't seem to get it so when both checkboxes are selected then disable.
In the "CheckedChanged" event of an active CheckBox, enable the other CheckBox.
Private Sub chkbx_one_CheckedChanged(sender As System.Object, e As System.EventArgs) Handles chkbx_one.CheckedChanged
If DirectCast(sender, CheckBox).Checked = True Then
chkbx_two.Enabled = True
End If
End Sub