I have below html code
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br>
<span class="anchor">Select Fruits</span>
<ul class="items">
<li><input type="checkbox" />Apple </li>
<li><input type="checkbox" />Orange</li>
<li><input type="checkbox" />Grapes </li>
<li><input type="checkbox" />Berry </li>
<li><input type="checkbox" />Mango </li>
<li><input type="checkbox" />Banana </li>
<li><input type="checkbox" />Tomato</li>
</ul>
<br><br>
<input type="submit" value="Submit">
</form>
Output is shown as below in html
When I submit the form fruit selection options are not shown. I am getting output as cars=volvo. How to get check box selection? What is the bug?
Thanks for your time
Try adding a name and a value attribute on every checkbox like so :
<input type="checkbox" name="fruit[]" value="Apple" />
and so on...
$_GET['fruit'] will return an array consisting of all the values of the checkboxes that were checked.
When you are creating forms you need every form input to have a "name" atribute which is not null, for example
<input type="text" name="nom" placeholder="Type your name here">
that way, you can handle it, if there's not a name, you are NOT gonna be able to handle it. In this case, if you put the name it's gonna output an array.
also when you do that you are gonna realize that the given value is either true or false
Related
I have modal popup window which open on button click for each row in data table. On modal window I have 4 dropdowns and out of these I want one dropdown to be disabled for every row data. When user selects the radio button value as "Yes" it should be enabled.
Here is my script:
$(document).ready(function(){
$('.action').attr('disabled', 'disabled');
var $checkBox = $('.check');
$checkBox.on('change', function(e) {
//get the previous element to us, which is the select
var $select = $(this).prev();
if (this.checked) {
$select.removeAttr('disabled');
} else {
$select.attr('disabled', 'disabled');
}
});
});
This is my html:
<div class="form-group">
<label>Action Taken:</label>
<input type="radio" class="check" id="check" name="check" value="Yes">Yes
<input type="radio" class="check" id="check" name="check" value="Yes">No
<select name="action" id="action" class="form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
If I am adding the radio buttons after select tag its's working for one row, but after submit when I am selecting second row data it stops working then I have to refresh page again, but I want radio button selection before the select tag also it should work for each row. Can someone help me out what I am doing wrong here
first of all you need 2 different values for your radio button , you have Yes for both buttons
<input type="radio" class="check" name="check" value="Yes">Yes
<input type="radio" class="check" name="check" value="No">No
you can put your radio buttons and select in a parent div and use that parent to get to access to selectbox instead of using next , prev ... like <div class="form-group">
$('.check').change(function(){
let select = $(this).parents('.form-group:first').find('select') ;
if( $(this).val() == 'Yes')
select.attr('disabled' , false );
else
select.attr('disabled' , true );
})
https://jsfiddle.net/ns5g3rqe/
There's several issues here, and each need to be corrected for your code to work properly:
The 'No' checkbox has a value of 'Yes'. This needs to be changed in order for your JS to determine which box has been checked.
.action is a class selector, yet the select has that id. As your question suggests there may be multiple clones of this HTML, remove the id on the select and use the class instead
The select is not the prev() element to either radio. Fix this by retrieving the closest() common parent and find() from there.
You're repeated the same id of #check on the radio buttons, when they must be unique. Either change or remove them.
With that corrected, the code works:
jQuery($ => {
$('.action').prop('disabled', true);
let $checkBox = $('.check').on('change', e => {
var $select = $(e.target).closest('.form-group').find('.action');
$select.prop('disabled', e.target.value !== 'Yes' && e.target.checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
<div class="form-group">
<label>Action Taken:</label>
<label>
<input type="radio" class="check" name="check" value="Yes" />
Yes
</label>
<label>
<input type="radio" class="check" name="check" value="No" checked />
No
</label>
<select name="action" class="action form-control" disabled>
<option value="">Select Action</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
I have the following html input fields, two are for user input one to submit the responses.
<div>
<select id="netcall" class="" name="netcall" onchange="chngDFLTS()">
<option value="0" selected>Select One</option>
<option value="1" selected>Select Two</option>
</select>
</div>
<div>
<input id="cs1" type="text" value="" tabindex=1 />
<input id="Fname" type="text" value="" tabindex=2 />
<input id="ckin1" type="submit" value="Check In" tabindex=3 />
</div>
If I understand http://www.w3schools.com/tags/att_global_tabindex.asp correctly then the tab sequence should be 1 to 2 to 3. Tabbing from CS1 to Fname works every time, but the next tab takes me to a select field which does not even have a tabindex value and is not even in the same div tag. Additionally no amount of further tabbing ever takes me to the ckin1, submit input tag.
What am I not understanding?
I am working on a Classic ASP page.
Earlier there was a checkbox list in the page which I have changed to a multi select listbox. Now after I changed it to multi select listbox the selected values are not getting saved into the database which was saving when it was a checkbox list.
The below is code from my html page....
<div class="fields options secondary-category">
<legend>Secondary Category</legend>
<p class="description">You may select up to two secondary categories in which you would like to be considered for an award (please hold the control key to select two categories).</p>
<select id="AwardsSecondaryCatagory" class="input-listbox" type="listbox" name="AwardsSecondaryCatagory" multiple="multiple" size="5">
<option>Select an option</option>
<option name="financialexcellence" value="Financial Excellence">Financial Excellence</option>
<option name="operationalexcellence" value="Operational Excellence">Operational Excellence</option>
<option name="employeeexcellence" value="Employee Excellence">Employee Excellence</option>
<option name="customerexcellence" value="Customer Excellence">Customer Excellence</option>
<option name="Innovation" value="Innovation">Innovation</option>
<option name="Transformation" value="Transformation">Transformation</option>
</select>
<!--
<div class="field opt">
<input id="financialexcellence" class="input-checkbox" type="checkbox" value="Financial Excellence" name="financialexcellence">
<label for="financialexcellence">Financial Excellence</label>
</div>
<div class="field opt">
<input id="operationalexcellence" class="input-checkbox" type="checkbox" value="Opertional Excellence" name="operationalexcellence">
<label for="operationalexcellence">Operational Excellence</label>
</div>
<div class="field opt">
<input id="employeeexcellence" class="input-checkbox" type="checkbox" value="Employee Execellence" name="employeeexcellence">
<label for="employeeexcellence">Employee Excellence</label>
</div>
<div class="field opt">
<input id="customerexcellence" class="input-checkbox" type="checkbox" value="Customer Excellence" name="customerexcellence">
<label for="customerexcellence">Customer Excellence</label>
</div>
<div class="field opt">
<input id="Innovation" class="input-checkbox" type="checkbox" value="Innovation" name="Innovation">
<label for="Innovation">Innovation</label>
</div>
<div class="field opt">
<input id="Transformation" class="input-checkbox" type="checkbox" value="Transformation" name="Transformation">
<label for="Transformation">Transformation</label>
</div>
-->
Selectbox values are submitted with the name of the select element.
The name attribute on the option is not used (is invalid to be accurate), so all selected values are submitted as AwardsSecondaryCatagory
You can recover you data just by:
<%
AwardsSecondaryCatagory = request("AwardsSecondaryCatagory")
%>
and, then, just store it in your database!
I would love to make a select box, which has checkboxes inside. Something like this:
<form>
<select name="cars">
<option value="volvo"><input type="checkbox" name="volvo">Volvo XC90</option>
<option value="saab"><input type="checkbox" name="saab">Saab 95</option>
<option value="mercedes"><input type="checkbox" name="mercedes">Mercedes SLK</option>
<option value="audi"><input type="checkbox" name="audi">Audi TT</option>
</select>
<input type="submit" value="Submit">
</form>
Is this possible? It is not for multiple selection. It means the selected value is independent from the checkboxes.
check below link, it may usefull
www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
I am learning AngularJS and user input. In my code, I tried to set default state for drop down menu and radio button with "selected" and "checked".
However, they do not work together with "ng-model" attribute.
Also, for the first radio button (ascending), the empty value attribute seems to hinder with "checked" attribute.
Could anyone explain why this happens and how to bypass this problem?
<div class="search">
<h1>Artist Directory</h1>
<label> Search: </label>
<input ng-model="query" placeholder="Search for artists" autofocus>
<label class="formgroup">by:
<select ng-model="listOrder" name="direction">
<option value ="name" selected="selected"> Name</option>
<option value="reknown"> Reknown</option>
</select>
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value=" " checked> Ascending
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" value="reverse"> Descending
</label>
</div>
tie your button and select to an ng-model. Default values are the values you put in the model when the scope is first created. Then values are updated when user clicks :
function test($scope) {
$scope.selected = ['1','3'];
$scope.checked = "green";
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app>
<h2>Todo</h2>
<div ng-controller="test">
<select name="" ng-model="selected" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br><br>
<input type="radio" ng-model="checked" value="red"> Red <br/>
<input type="radio" ng-model="checked" value="green"> Green <br/>
<input type="radio" ng-model="checked" value="blue"> Blue <br/>
<br>
Selected : {{selected}}
<br>
Checked : {{checked}}
</div>
</div>
See it in action : http://jsfiddle.net/913n30zf/
Select in AngularJS looks likes this:
<select ng-model="selectedOpt"
ng-options="opt for opt in listOrder">
</select>
And back in the controller you set
$scope.selectedOpt = $scope.listOrder[0];
which option you want to be select by default.