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.
Related
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
Regarding the code below: What is the advantage of using the data[Category][county][Macon] array instead of just making the name 'county' or county[], and the value 'Macon', and how would they process the form data on the server side with each checkbox sharing the same value of 1? Also, why does each checkbox have a hidden input with the same name but with a value of 0?
Any assistance with helping this make sense would be appreciated.
<li>
<div class="input checkbox">
<input type="hidden" name="data[Category][county][Macon]" id="CategoryCountyMacon_" value="0" />
<input type="checkbox" name="data[Category][county][Macon]" value="1" id="CategoryCountyMacon" />
<label for="CategoryCountyMacon">Macon</label>
</div>
</li>
<li>
<div class="input checkbox">
<input type="hidden" name="data[Category][county][Madison]" id="CategoryCountyMadison_" value="0" />
<input type="checkbox" name="data[Category][county][Madison]" value="1" id="CategoryCountyMadison" />
<label for="CategoryCountyMadison">Madison</label>
</div>
</li>
Actually it is quite common in some frameworks. Imagine that Category is the table or a model, county is the column and Madison is the data for the column, or a related data in another lookup table. Looks a little like CakePHP.
Let's say you have a form where a user can update something that has multiple related tables. How do you intelligently and repeatably define what data is bound for what table etc... The framework has logic in the receiving code that looks for the first level keys as the table/model and then the columns and values.
Also, checkboxes are only submitted if they are checked, so if not they won't be in the $_POST array. Defining a hidden input with the same name and value of 0 before the checkbox insures that there will be a value, either 0 if not checked or 1 if checked. It's a way of taking submitted values and using them as opposed to checking if something is present and then doing one thing or the other.
I think you may have over complicated this a bit.
I assume you are showing the user a set of counties and they tick the ones they are interested in.
Now first thing to remember is that a checkbox is only sent back to the script if it is checked, if its not you never see it back in your script. Also what is sent back to the script is the value="something"
So if you are just interested in which counties were selected this is much easier to understand and process back in your script. Also I am not sure what function the hidden fields was serving, I am guessing none.
<li>
<div class="input checkbox">
<input type="checkbox" name="counties[]" value="Macon" id="CategoryCountyMacon" />
<label for="CategoryCountyMacon">Macon</label>
</div>
</li>
<li>
<div class="input checkbox">
<input type="checkbox" name="counties[]" value="Madison" id="CategoryCountyMadison" />
<label for="CategoryCountyMadison">Madison</label>
</div>
</li>
So now if Macon and Madison are checked you will get an array called counties returned in the $_POST array like this.
counties[0] = 'Macon'
counties[1] = 'Madison'
So you can process it easily with a
foreach( $_POST['counties'] as $county ) {
// $county will = 'Macon' on first iteration
// $county will = 'Madison' on second iteration
}
Of course it may be better still to put the unique key of the counties row from the database into the value attribute i.e. value="99 rather than the name value="Macon". That depends upon what you want to do with it later and how you have designed your database.
first things first, english isn't my native language, so feel free to ask if I am being unclear.
I am currently trying to get a small webpage to work for a college task (and no, I'm not asking you to do my homework, but I currently am stuck and no amount of search has turned up valuable results so far) and it seems like my submit buttons only submit their own values and nothing else.
For example:
I have a form called "list" that has a select element, two buttons and one submit element.
Code:
<form id="list" action="process.php" method="post" onsubmit="return order()">
<select name="cart[]" id="myCart" size="6" multiple>
[contents of select element]
</select>
<p>
<input type="button" value="Delete All" class="custombuttonsmall" onclick="deleteElements()">
<input type="button" value="Delete Selected" class="custombuttonsmall" onclick="deleteElement()">
<input type="submit" value="Order" class="custombuttonsmall" name="order">
</p>
</form>
Note: the "order()" function checks if there are options in the select element. If there isn't, the process won't come through.
process.php currently only has two lines,
$q = $_POST;
var_dump($q);
to test if submitting works.
Result of var_dump:
array(1) { ["order"]=> string(5) "Order" }
Every other value I'm trying to call (e.g. $q = $_POST['cart']) returns NULL. Basically, my submit button seems to only submit its own value instead of the whole form. And I can't seem to figure out why. It happens for every form I'm trying t submit.
Sorry if this has been asked before or is too specific, but again, I haven't been able to get any progress on this so far.
Thanks in advance,
//EDIT:
Browsers used are Chromium 34.0.x and Firefox 30.0, same results on both.
Only selected options in a select element will be submitted.
Based on your bytton values, it seems likely that you are dynamically adding and removing options (without actually selecting them) instead of using the browser's native multiple selection UI.
EDIT
The form, and checkbox submits completely fine in Internet Explorer 8. In IE 10, and Chrome 34.0 it doesn't get submitted
Ok, this one has me stumped. I have a form, each form contains one question for a quiz, its possible answers, and a checkbox to select which is the correct answer.
<form action="/department/update_quiz_question/1/1/5" method="post" class="form-horizontal form-bordered form-row-stripped" id="question_form_5">
<tr id="question_5">
<td class="col-md-4">
<textarea name="quiz_question" class="form-control" rows="4">What letter precedes B?</textarea>
</td>
<td class="col-md-5">
<div class="input-group ">
<input type="text" class="col-md-5 form-control" name="answer[]" value="A">
<span class="input-group-addon">
<input type="checkbox" checked="checked" name="correct_answer[]" value="A">
</span>
<span class="input-group-btn">
<button class="btn red btn-delete-answer" type="button" data-question-id="5" data-answer="A"><i class="fa fa-trash-o"></i></button>
</span>
</div>
</td>
<td class="col-md-3">
Add Answer
Update
Delete
</td>
</tr>
</form>
When I submit the form, it goes to a Codeigniter method which only contains:
print_r($_POST);
var_dump($this->input->post('correct_answer'));
As you can see, the checkbox is most certainly checked. It is also checked visually (IE there is a tick in the box).
When I submit the form, it goes through a jquery checking script. If all passes, jquery submits the form.
Just before I submit the form, I log the value of the checked checkbox, using the following:
console.log($(".input-group input[name^='correct_answer']:checked").val());
Which, as you would expect, outputs A, or whichever answer is ticked. So I know for certain the checkbox is ticked.
However, Codeigniter outputs the following:
Array ( [quiz_question] => What letter precedes A? [answer] => Array ( [0] => A ) )
bool(false)
The array is from the raw $_POST data. bool(false) is outputted from $this->input->post('correct_answer');.
As you can see, the checkbox value for correct_answer is not even displaying in raw $_POST data.
I can't understand what I've done wrong. I have an identical form when I create a new question, and that works perfectly fine.
Can anyone see any obvious mistakes? Or am I doing something wrong?
Many thanks
EDIT
This is what I've tried so far:
Removing all the span elements around the checkbox, leaving just the text input and the checkbox input - Still not checkbox value in the post data
removed the square brackets around the checkbox name - no post data
renamed the checkbox name, no post data
Submitted the form straight away instead of passing through a jquery check first, no post data
Changed it from a checkbox to a radio button - no post data
changed it from checkbox to text, - works, doesnt work when its a radio or checkbox
Your HTML code is invalid – you can not have a form element as child of table.
Either put the whole table into the form, or the whole form inside a td element – these are your only two options.¹
Different error correction algorithms for faulty HTML most likely explain why you see your current code working in a certain browser, but not in others.
¹ Well, if you want to stick to a table anyway – as you said in comments, moving away from using a table resolved that structural issue as well.
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?