is there a way to validate multiple checked checkboxes properly?
How are the data been sent?
Something like eyeColor[0] = blue?
<form action="send" method="POST" id="send-form">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="blue">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="brown">
<input type="checkbox" id="eyeColor" name="eyeColor[]" value="green">
</form>
"eyeColor" -> seq(text.verifying(enum(eyeColor().keySet.map(_.toString), "error.searchProfile.eyeColor")))
In your controller you get eyeColor as a List[String], as if it was a multiple select. You can not see the ones that are not selected (they're not passed in the http request).
Related
I have a Wicket page with this structure:
<form wicket:id="generalForm" method="post" class="form_recherche">
<input value="" type="text" wicket:id="myField_1" />
<form wicket:id="innerForm" method="post">
<input value="" type="text" wicket:id="myField_2"/>
<input type="submit" class="button-classic" wicket:id="accept_2"/>
</form>
<input type="submit" class="button-classic" wicket:id="accept_1" />
</form>
1 external form with 1 inner form. One field each. The fact is that when the "accept_2" button is clicked, the field "myField_1" is not submitted to the server (only the "myField_2" is submitted). And in fact, I would need the "field_1" field to do some validation.
What am I missing and why isn't the "myField_1" being filled on the server why "accept_2" is clicked?
You need to override Form#wantSubmitOnNestedFormSubmit() on the outer Form to return true. This way you will tell Wicket that you want the (outer) form to be submitted as well when one of its nested forms is submitted.
You used SO tags wicket-1.5 and wicket-1.6. I am not sure whether this method is available for your version of Wicket.
I want to use a form to do parametric filtering by passing values to a URI. Specifically, part of this form would entail multiple checkboxes for one parameter set, I'll call this 'my-checkbox-parameter'
What I Have
A basic form with checkbox fields that post the values via the GET method
This does correctly post the values as I'd expect
My code:
<form id="results-filters" class="form-inline" action="form.php" method="GET">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val1" name="my-checkbox-parameter[]" class="form-control">
Value 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val2" value="val2" name="my-checkbox-parameter[]" class="form-control">
Value 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="val3" value="val3" name="my-checkbox-parameter[]" class="form-control">
Value 3
</label>
</div>
<button type="submit" class="btn btn-default">
Filter Results
</button>
</form>
What I'm Stuck on
Making the checkbox fields reflect 'checked' status based on what parameters are in the URL. For instance, if my URI is: /form.php?my-checkbox-parameter[]=val1&my-checkbox-parameter[]=val2 , how can I make sure that the field values for 'Value 1' and 'Value 2' are checked? Is JavaScript/AJAX the only way to do this?
Bonus points, not a super huge priority, but rather a 'nice to have'... Is there a better way to handle checkbox value arrays in URIs? For instance, if I have 10 checkbox fields, the concatenated URI with these parameters might be quite long...
Thanks in advance!
First:
$checked= array();
$checked=$_GET['my-checkbox-parameter'];
And then:
<input type="checkbox" id="val1" value="val1" name="my-checkbox-parameter[]" class="form-control" <?php if(in_array("val1", $checked))echo "checked"; ?> >Value 1
So if there is val1 in your get parameters, the check box will be checked.
Do it for all check boxes and it should be ok.
AND for the second question: actually you are doing well with my-checkbox-parameter[ ], it's the usual way to do it in PHP. But you can check this question for more ways.
I have 2 forms on one page that I need to pass to the same page to assemble a pdf. How can I do that? I have tried using a action="post" for one and action="get" for the other, but I can't get that to work. I have tried assigning one form to session variables, but I can't get that either. Any suggestions??
<form name="formOne" id="formOne" method="post" action="#buildURL('goTothisPage.page')#">
<input name="name" id="name" autofocus="true" >
<input name="address" id="address" >
I would try just creating one big form instead of 2 smaller forms if the action is going to be the same and go to the same .cfm page. (Just expand the scope of your tags)
You can also create 2 "Submit" buttons (1 for each form) to make it appear as 2 separate forms, even though the buttons will submit the same form.
If it is required to have two separate forms in your html, it is also possible to forge the form values from one form into the other at the moment of the submit event.
HTML:
<form name="formOne" id="formOne" method="post">
<input name="name" id="name" type="text" >
<input name="address" id="addressHidden" type="hidden">
</form>
<form name="formTwo" id="formTwo" method="post">
<input name="address" id="address" type="text">
<input name="name" id="nameHidden" type="hidden" >
</form>
Javascript:
$(document).ready(function(){
$('#formOne').submit(function(event){
$('#addressHidden').val($('#address').val());
return true;
});
// same for #formTwo
$('#formTwo').submit(function(event){
$('#nameHidden').val($('#name').val());
return true;
});
});
Building a CMS with node, mongoDB & angularjs. I have an edit form with inputs that I want to bind to the $scope so their values are populated with existing data. Ex:
<form ng-submit="editArticle(article._id, article)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="article.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
This appropriately fills in the input values with the current data from my mongo database. However, I would like to bind to a new form scope, so it doesn't try to pass in every value in the article scope, just the new scope within the form. (Article scope currently consists of every field in the article document in Mongo. If I pass all of this data in, I get an error about invalid schema because it is trying to pass in the __v field as well.)
So ideally I want to do this:
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-model="form.hed" value="{{article.hed}}" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-model="form.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
So on submit, it only passes form.hed and form.dek to my database. However, now these input fields are blank because they're not bound to the original article data. The user would have to re-fill in each of the fields with the original values. Is there a way to bind to multiple models orrrr bind to a current model, but on submit only send the updated form data?
EDIT:
It looks like I have to add the ng-change attribute to each field, to populate the input fields with the original scope, then on change, set the form scope equal to the changed value. Eg.
<form ng-submit="editArticle(article._id, form)" class="edit-form">
<label for="hed">Hed: <input type="text" name="hed" ng-change(form.article = article.hed) ng-model="article.hed" /></label>
<label for="dek">Dek: <input type="text" name="dek" ng-change(form.dek = article.dek) ng-model="article.dek" placeholder="{{article.dek}}" /></label>
<input type="submit" value="Save Changes"></input>
</form>
Not sure how thrilled I am about this solution, but it works. If anyone knows a more efficient way to accomplish this please let me know!
Do a copy of the original object (or part of it) upon receiving it from DB and bind your from to it.
Coping objects before edit is a very good pattern since it allows you to easily provide additional functionality like revert edits and disable save buttons if no edit was made.
We have the following code in which we are getting errors in the w3c validator for "Any input descendant of a label element with a for attribute must have an ID value that matches that for attribute." and "The label element may contain at most one input, button, select, textarea, or keygen descendant." Is this something that should just be ignored by the validator (as it is seeminlgly correct) or should it be changed to appease the w3c? Note this is html5 doctype.
<fieldset>
<label for="user_is_subscribed">
<input type="hidden" value="0" name="user[is_subscribed]">
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Thank in advance!
Labels should contain at most one input element. Move the hidden input out of the label. Also, when an input is a descendant of a label, the for attribute is superfluous.
<fieldset>
<input type="hidden" value="0" name="user[is_subscribed]">
<label>
<input type="checkbox" value="1" name="user[is_subscribed]" id="user_is_subscribed">
Newsletter Signup
</label>
<span class="checkLabel">We will never spam or give away your information</span>
</fieldset>
Is this something that should just be ignored by the validator
No
(as it is seeminlgly correct)
It isn't
or should it be changed
Yes
to appease the w3c?
No. It should be changed because it is wrong, and browsers have to error correct to figure out which element the label is associated with.
The label isn't labeling the hidden input, move it elsewhere.