I generate input type=checkboxes dynamically. ie. have them in my template.
These might come one hundred and problem is that the label requires for=“id-name” and I don't know how to give that same name as the input has
<input type=“checkbox” name=“special” v-bind:id="‘mynew’ + special.id />
<label v-bind:for="‘mynew’" + special.id">
obviously v-bind:for does not work
You have to keep the value of your input by making a model for it like:
<input v-model="message" ... />
<script>
export default {
data: {
return {
message: ''
}
}
}
Then you can use the model inside your for="" attribute as:
<label v-bind:for="'id+name' + message">
Related
I have a form that have multiple checkboxes(All that apply) and I'm trying to read all the values selected....the user click submit it reloads the page and check for "post" and if is a new entry....but it only reads the first value selected and I don'w know what am I doing wrong ;/
<label class="checkbox-inline"><input type="checkbox" name="sections" value="Cars">Cars</label>
<label class="checkbox-inline"><input type="checkbox" name="sections" value="Trucks">Trucks</label>
<label class="checkbox-inline"><input type="checkbox" name="sections" value="Airplanes">Airplanes</label>
<label class="checkbox-inline"><input type="checkbox" name="sections" value="Cell Phones">Cell Phones</label>
sub post
{
if($id1 == 'active')
my #sections = $POST->{sections}->[0];
}
There are a few obvious problems in your code.
You're using == when you're trying to do a string comparison. Use eq instead.
Your if syntax is wrong. In Perl, you need to use braces - if (...) { ... }.
You are explicitly asking for the first element from the array of checkboxes. You need #{ $POST->{sections} } to get all of the values.
So, all in all, your subroutine should probably look like this:
sub post
{
if ($id1 eq 'active') {
my #sections = #{ $POST->{sections} };
# Do something else with #sections
}
}
Also, I'd ask you to seriously reconsider using CGI in 2019. Please read CGI::Alternatives and think about using more modern technologies.
Current I am trying to metadata binding xml, following this blog. When I did the maxLength of Input. But I got the following error.
error screenshot
demo service
init model with destination:
initModel: function() {
var sServiceUrl = "/odsrv/V2/Northwind/Northwind.svc/";
var oModel = new OM(sServiceUrl, true);
this.setModel(oModel, "oRefModel");
sap.ui.getCore().setModel(oModel, "oRefModel");
}
xml view:
<content>
<Label text="{oRefModel>/#Category/CategoryName/#type}"/>
<Input maxLength="{oRefModel>/#Category/CategoryName/#maxLength}"/>
</content>
The Label for type works fine if remove Input.
How to solve this problem...
Version with expression binding could be like that
<Input maxLength="{= isNaN(${oRefModel>/#Category/CategoryName/#maxLength}) ? 0 : parseInt(${oRefModel>/#Category/CategoryName/#maxLength})" />
typeof check is needed cause at the start of binding process value of property probably is 'NaN' and it gives an error and whole process will stop.
If you can improve that version please do :)
<Input maxLength="{parts:[{path:'oRefModel>/#Category/CategoryName/#maxLength'}],formatter: 'your.formatter.toNum' }" />
Formatter Code
toNum : function(maxlen){
return parseInt(maxlen);;
}
Converting string to integer is the key
Even shorter and without writing a custom formatter function: Use the built-in parseInt function.
<Input
maxLength="{
path: 'oRefModel>/#Category/CategoryName/#maxLength',
formatter: 'parseInt'
}" />
For some reasons expression binding does not work, maybe someone could tell me why:
<Input maxLength="{= parseInt(${oRefModel>/#Category/CategoryName/#maxLength}) }" />
In jQuery, there is a function to serialize a form element so for example I can submit it as an ajax request.
Let's say we have a form such as this:
<form id="form">
<select name="single">
<option>Single</option>
<option selected="selected">Single2</option>
</select>
<input type="checkbox" name="check" value="check1" id="ch1">
<input name="otherName" value="textValue" type="text">
</form>
If I do this with the help of jquery
var str = $( "form" ).serialize();
console.log(str);
the result would be
single=Single2&check=check1&otherName=textValue
Is there such functionality in dart's FormElement or I have to code it myself? Thanks.
I came up with my own simple solution that might not work in all cases (but for me it is workikng). The procedure is this:
First we need to extract all input or select element names and values from the form into Dart's Map, so the element name will be the key and value the value (e.g. {'single': 'Single2'}).
Then we will loop through this Map and manually create the resulting string.
The code might look something like this:
FormElement form = querySelector('#my-form'); // To select the form
Map data = {};
// Form elements to extract {name: value} from
final formElementSelectors = "select, input";
form.querySelectorAll(formElementSelectors).forEach((SelectElement el) {
data[el.name] = el.value;
});
var parameters = "";
for (var key in data.keys) {
if (parameters.isNotEmpty) {
parameters += "&";
}
parameters += '$key=${data[key]}';
}
Parameters should now contain all the {name: value} pairs from the specified form.
I haven't seen anything like that yet.
In this example Seth Ladd uses Polymers template to assign the form field values to a class which get's serialized.
I am new to play framework and i have a list of files and i wanna add check box so that i can delete the all the checked files on clicking the delete button, i am displaying the list of files using scala language, help is really needed
#form(action = routes.Application.delete, 'enctype -> "multipart/form-data") {
#for(order1 <- listfiles) {
#if(order1.isDirectory()) { }
else {
<input type="checkbox" name="#order1">#order1.getName()
}
}
<input type="submit" name="delete">
}
where #order1.getName() is the name of the file
You need to pass them as an array of params, take a look at the nico_ekito's answer to find how you can access them in the controller.
Optionally you can use ie. JavaScript to join all filenames/identifiers into one comma-separated String and then just split it in controller to List<String> which maybe will be even easier.
you have to use special syntax for name attributes [], to let to know play that you will send list of elements:
#for((value,index) <- listfiles.zipWithIndex ) {
<input type="checkbox" name="files[index]">#value.getName()</input>
}
and then you can bind them to list in you form mapping like this
files -> list(text)
I'm tring to implement the classic functionality of this select:elements depends on this other select:selection using Lift, E.g. select the country and get the possible states for the selected country.
The problem that I'm facing is that the "this.myForm.submit()" that I have inside the onchange of the select element is not firing the ajax request. If I use an input type"submit" it works perfectly.
Is this behaivior related with Lift framework? Is there a better way of implementing this kind of functionality using Lift libraries?
The relevant snipped code:
"name=distributionPoints" #> SHtml.select(distributionPoints, Empty, selectedDistributionPoint = _, "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(devices, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
The view html:
<form class="lift:form.ajax">
<select name="distributionPoints" id="the_distributionPoints" onchange="submit()">
<option></option>
</select>
<br/>
Device:
<select name="devices" id="the_devices">
<option></option>
</select>
</form>
The rendered HTML:
<form id="F391649920812YBACEZ" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F391649920812YBACEZ").serialize(), null, null, "javascript");return false;">
<div>
Punto de distribución:
<select onchange="submit()" id="the_distributionPoints" name="F630704816482OLP514"></select>
<br />
Equipo:
<select name="F391649920817BLRJW5" id="the_devices"></select><input type="hidden" name="F391649920818HPS35E" value="true" />
<br />
</div>
</form>
[edit]
I finally got the solution. Like Chris mentioned I used ajaxSelect instead of just selects and instead of using setHtml there's a method called JsCmds.ReplaceOptions that does exactly what I was looking for.
You should understand that when using Ajax submit the page is not reloaded. So I would suggest you to use JsCmds.setHtml on server side to "reset" the second select element.
So, in fact the first select is an ajaxSelect which is meant to modify the second one (so it is not concerned by the hidden submit in my opinion). The second select is updated when the first one is changed, using 'selectPoint(s)'
Piece of Scala code
def selectPoint(s):JsCmd = {
selectedDistributionPoint = s;
newDevices:List[String] = findCorrespondingDevices(s);
JsCmds.setHtml("name=devices", SHtml.select(newDevices, Empty, selectedDevice = _, "id" -> "the_devices")) ++ SHtml.hidden(process))
}
"name=distributionPoints" #> SHtml.AjaxSelect(distributionPoints, Empty, s=> selectPoint(s), "id" -> "the_distributionPoints") &
"name=devices" #> (SHtml.select(Nil, Empty, selectedDevice = _, "id" -> "the_devices") ++ SHtml.hidden(process))
Piece of template code
<input name="distributionPoints" id="the_distributionPoints" onchange="submit()"/>
<input name="devices" id="the_devices"/>