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.
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.
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).
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.
I have a form with CI validation that uses arrays as input names. The view initially has this code:
<input type="text" name="feed_urls[]"
value="<?php echo set_value('feed_urls[]', ''); ?>" >
which when loaded into the browser translates correctly to this:
<input type="text" name="feed_urls[]" value="">
Then through Jquery the user may add more identical <input>'s to the DOM before submitting, so in the end what is POSTed could be e.g.
<input type="text" name="feed_urls[]" value="">
<input type="text" name="feed_urls[]" value="">
<input type="text" name="feed_urls[]" value="">
Now, if the submitted data passes validation, all is fine and gets stored in DB. But if validation fails, the controller sends back to the view but I don't see the N <input>'s of the POSTed form. I only see one and it's empty, which is understandable because I don't supply a 2nd argument to set_values(), but then again what was expected was to see the inputs be re-populated through the $this->input->post(feed_urls) array with the POSTed data that was invalid.
I do verify at the controller that $this->input->post('feed_urls') has the POSTed content (invalid or not) just fine.
I've read the CI user guide docs on using validation with arrays as field names
Any ideas on what's the correct use of set_value()? By correct I mean that on validation failure, I get the N inputs that were POSTed, correctly re-populated one by one.
You can use:
<input type="text" name="feed_urls[]" value="<?php echo set_value('feed_urls[0]'); ?>">
I've tested it on CI 2.0 but it should work also in previous versions.
Cheers!
As you supply only a small bit of your code, I can only give you a hint on what I think is your main problem.
The n element of input array can be populated by using jQuery as follows:
$("[id^=feed_urls]").eq(0).val(someURL);
$("[id^=feed_urls]").eq(1).val(someURL);
$("[id^=feed_urls]").eq(2).val(someURL);
and so on.
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.