I'm having a trouble on how can I check the radio button when the v-models is empty, . If the value of my formfields.status is empty the radio button should automatically checked. Is there anyway trick how to implement it?
This is status value looks like in my dev tools extension when status value is empty
This is what I've tried but nothing works, thanks in advance!.
<div class="checkbox-inline">
<label class="radio mr-2">
<input class="details-input" type="radio" name="status_radio" value="1" v-model="formFields.status" :checked="formFields.status == null"/> Active
</label>
<label class="radio">
<input class="details-input" type="radio" name="status_radio" value="0" v-model="formFields.status"/> Inactive
</label>
</div>
V-model is working with the checked property of radio buttons, so setting that on your own as well might result in faulty behaviour.
When you're using V-model, you'd expect the UI to be always in sync with the data. Note that the "empty selection" state is invalid for radio buttons, there should be one always selected. If you wanted to allow empty selection using an optional select field would be better from UX perspective as well.
So, the easiest way to fix it is disallowing the empty state for your model by providing a default value to the status field, which would control which radio button should be checked by default.
In short:
use "status: 1" in your data to set the default value
remove the :checked bindings from the template
Related
I have a checkbox in Wordpress, which is validating properly until the user doesn´t check the box.
Then it will remain acting as unchecked and will not allow to login again, showing allways the oninvalid message (no matter if it is checked or unchecked).
<input type="checkbox" required id="accept_terms" name="accept_terms"
class="validate[required]" value="1" oninvalid="this.setCustomValidity ('Please...')">
I have also tried with onchange instead of oninvalid. Same problem.
It only had a way to change validation state, adding validity.valueMissing solved it.
onchange="this.setCustomValidity(validity.valueMissing ? 'Please...
I want to create a form in CakePHP whilst having the SecurityComponent active. So far so good, now I want to add custom input elements which I can't generate using the FormHelper. I do however to have these fields included in the security and validation checks.
The main problem is that I can't render radio buttons outside of their labels. So I render them myself like so:
<div class="radio radio-inline">
<input id="genderMALE" type="radio" name="data[User][gender]" value="MALE"/>
<label for="genderMALE">Male</label>
</div>
<div class="radio radio-inline">
<input id="genderFEMALE" type="radio" name="data[User][gender]" value="FEMALE"/>
<label for="genderFEMALE">Female</label>
</div>
Which in itself works perfectly. Yet the FormHelper has no notice of them so the SecurityComponent registers this as tampering with the form. Blackholing my request.
I tried to generate the inputs using the FormHelper but radio support is limited. The format option does not work here since:
Radio buttons cannot have the order of input and label elements controlled with these settings.
-- Cookbook
Next to that I couldn't find any way to render a plain detached radio button. And the only way I found to have the input accepted was through ignoring it in the SecurityComponent.
What is the Cake way to fix this?
Update 14-09 09:16
My current fix/hack would be to create the custom radio buttons in plain HTML as shown above. Then link the value of those radio inputs to an input field created using the FormHelper. Using CSS I can hide this input allowing it to be changed by JavaScript, as opposed to using type="hidden".
Are there any dangers/problems that could occur using this method?
side note: In the end this is a styling issue. Yet I'm forced to use Bootstrap and have only 2 days left to finish my task. And I don't feel like going down the path of writing custom CSS/JS to get this working.
At the point of getting content with the hack solution, I stumbled upon the FormHelper::$fields field. This field keeps track of all inputs created using the FormHelper and is later used by the SecurityComponent to check whether the form has been tampered with.
The solution does require some additional work as you need to implement the following steps:
Add custom form element the the fields array
Restore value from previous submit (if redirect back to form)
Add default option so field won't be omitted from post data
Working CTP
<div class="radio radio-inline">
<input id="genderMALE" type="radio" name="data[User][gender]" value="MALE"
<?= $this->request->data('User.gender') == 'MALE' ? 'checked' : ''?> />
<label for="genderMALE">Male</label>
</div>
<div class="radio radio-inline">
<input id="genderFEMALE" type="radio" name="data[User][gender]" value="FEMALE"
<?= $this->request->data('User.gender') == 'FEMALE' ? 'checked' : ''?> />
<label for="genderFEMALE">Female</label>
</div>
<input type="radio" name="data[User][gender]" value="" class="hidden"
<?= $this->request->data('User.gender') ? '' : 'checked'?> />
<?php $this->Form->fields[] = 'User.gender' ?>
It is far from pretty, yet I recon it is close to the internals of Cake itself. Might want to create a helper instead of manually implementing the inputs every time.
SOLVED: Just need to add autocomplete="off" to the radio buttons.
EDIT: I was incorrect in my original assessment of what's causing the error. It is not dependent on whether or not the user makes a selection. It's when I use Chrome's autofill feature for the rest of the form. If I use the autofill then no value gets passed through :-/
EDIT2: Looks like it's a known bug. Chrome autofill unfills radio buttons http://productforums.google.com/forum/#!topic/chrome/WNBd8p6q7YQ
I have a form where the recommended postage options are pre-selected using "checked":
<fieldset class="outwardpostage">
<legend>Outward postage</legend>
<label for="outwardpostageeconomy">Economy<br><span class="greenprice">£3.95</span></label>
<input type="radio" name="outwardpostage" value="3.95" id="outwardpostageeconomy" checked>
<label for="outwardpostagestandard">Standard<br><span class="greenprice">£7.95</span></label>
<input name="outwardpostage" type="radio" id="outwardpostagestandard" value="7.95">
<label for="outwardpostagepremium">Premium<br><span class="greenprice">£11.95</span></label>
<input type="radio" name="outwardpostage" value="11.95" id="outwardpostagepremium">
<label for="outwardpostagepostyourself">I will post myself using my own preferred delivery service</label>
<input type="radio" name="outwardpostage" value="0" id="outwardpostagepostyourself">
</fieldset>
The problem is the value doesn't get passed through the php form processor unless the user has clicked on the radio button. If they have just left the recommended option then the field is left as blank.
How can I fix this?
$outwardpostage = $_POST['outwardpostage'];
Can't you do something like:
if( !isset($_POST['outwardpostage']) ) {
$_POST['outwardpostage'] = 3.99;
}
To get round it not picking up the default?
We have a searchbox shown below where users can enter a value, say 1234 ABC street, click Search and the results get displayed.
<!--form1 -->
<div id="inputBG">
<form id="searchForm" class="search_field" method="get" action="">
<input name="searchBox" id="searchBox" value="3440 Mark Drive" />
<button type="button" onclick="searchMap()"><img src="Viewer/images/search.png" alt="Search" /></button>
</form>
</div>
This works great.
If, however, users wish to display more than one type of results, the user clicks on an icon called Advanced Search. When this happens, a form with only checkbox shown below opens up in a new window.
<!--Form2 --->
<div id="featuresDiv">
<form id="featuresForm">
<br/>
<input type="checkbox" name="srcoptions" onClick="checkAll(this.form,this)" checked>Check/Uncheck All<br>
<label><input type="checkbox" name="featType" checked value="Addresses">Addresses</label><br/>
<label><input type="checkbox" name="featType" checked value="Voter Precincts">Voter Precincts</label><br/>
<label><input type="checkbox" name="featType" checked value="Voter Precincts (Pending)">Voter Precincts (Pending)</label><br/>
<label><input type="checkbox" name="featType" checked value="Voting Polls">Voting Polls</label><br/>
<label><input type="checkbox" name="featType" checked value="Voting Polls (Pending)">Voting Polls (Pending)</label><br/>
<label><input type="checkbox" name="featType" checked value="Zip Codes">Zip Codes</label><br/>
<label><input type="checkbox" name="featType" checked value="Zoning Petitions">Zoning Petitions</label><br/>
<button type="button" onclick="searchMap()"><img src="MapViewer/images/magnifying_glass.png" alt="Search" /></button>
</form>
</div>
Users have the option of checking all boxes or just a couple of boxes.
When the user clicks on Search, the results of those checked boxes are supposed to be displayed.
In situations where checkbox option is used, and more than one boxes are checked, the searchbox becomes irrelevant in the search.
I have tried several things and nothing seems to work so far.
When I use the checkboxes option and check more than one options, I get custom message that "Your search returned no results"
Here is the Javascript we have attempted which is supposed to show when the search is from searchbox (form1) or checkbox (form2).
Then we have php that is supposed to grab all search values (searchbox or checkbox) in to comma-separated values.
This has been driving us nuts for over 3 days now.
It is noteworthy to point out that the searchbox has a default value of 3440 Mark Street.
I am really stumped.
Any help is greatly appreciated.
// Construct query
**$features = $_GET["featType"];**
$tsql = "SELECT * FROM globes AS TBL
WHERE KEY_TBL.RANK > 0
ORDER BY ListOrder, Name, TBL.RANK DESC";
Some more information about what happens in doGlobalSearch and how the data is processed in PHP would be helpful. Offhand I'd guess there's some discrepancy in how the data sent to PHP is formatted and how it is expected to be formatted. Taking a total stab in the dark, have you tried just doing featureList = features.join()? Are you sure the individual values need to be quoted?
Just a suggestion, but here's how I would do it:
Combine the two forms into one.
Default all checkboxes to unchecked (or disable them) while the advanced search div is hidden.
Check (or enable) them when the advanced search div is shown.
Add [] to the end of each checkbox name so that the (checked) values are passed to PHP as an array when the form is submitted.
This way PHP would directly receive the searchData and featTypes (if any) together and you wouldn't have to parse the featTypes back out from a string in PHP. Then all you would need to do with javascript is submit the form and process the response. Again, this is without knowing what's going on in the backend or what control you have over it.
I want to have a multi-step form with HTML and PHP.
The first step of my form is an option like:
<input type="radio" name="service_type" value="plan1"> Plan 1<br />
<input type="radio" name="service_type" value="plan2"> Plan 2
Now, my question is: how can I know which option is selected so that I arrange the next step options for the user?
For example: If the user chooses option 1, next step would be: "You have chosen option 1, tell me who's your daddy". And if the user chooses option 2, next step says: "Welcome to option 2, tell me what you like", etc.
Now, I'm a totally beginner in PHP/HTML and know nothing about javascript. If you're answering this, I'd be so thankful, but please do it in an easy-to-understand sort of way.
I have already found this related to my case, but it is very hard to customize, and the validation process is of before CSS3.
[edit:]
Now I want to add a text-type input like this:
<input type="text" name="fname" value="firstname">
The guys told me to use $_POST['fname'] but for input texts, the 'value' property will show up inside the textbox like a default caption. I don't want this.
Now what do you suggest?
the the value from $_REQUEST:
$step = $_REQUEST['service_type']; // plan1 or plan2
In your PHP code, use the $_GET (or $_POST or `$_REQUEST - which gets either a GET or POST form) to return the value:
$serveiceType=$_REQUEST['service_type'];
As this is a radio button, only one value can be sent, and the sent value is easily accessible.
At first your input must be in a form tag. Now you can submit the form with an submit button(Input tag with type="submit").
In php you get the results with $_POST or $_GET.
<form method="POST">
<input type="radio" name="service_type" value="plan1"> Plan 1<br />
<input type="radio" name="service_type" value="plan2"> Plan 2
<input type="submit" />
</form>
<?php
$value = $_POST['service_type'];
echo $value;
?>