Hai Friends.,
Im doing a project on Airline Reservation.In my project i have a radiobox with two items Oneway and Round trip. If i select anyone of the radiobtn the corresponding dropdownlist box should be disabled.,How can i do it?What is the code to disable the controls which are not necessary?
Thankls in Advance For Those Who Answer's me........
,
Working Demo
<script>
function DisableDropDown(elem, elem2)
{
var elementDropDown = document.getElementById ( elem );
var elementDropDown2 = document.getElementById ( elem2 );
elementDropDown.disabled = true;
elementDropDown2.disabled = false;
}
</script>
<input type="radio" onclick="DisableDropDown('sel1','sel2');" name="radioGroup" id="rdBtn1" />
<select id="sel1">
<option>test</option>
</select>
<br />
<input type="radio" onclick="DisableDropDown('sel2','sel1');" name="radioGroup" id="rdBtn2" />
<select id="sel2">
<option>test</option>
</select>
Related
just started learning to make dynamic pages with WebMatrix and have run into a road block. (Long history of static html and some php using notepad++, but this is new to me.)
In short: I'm trying to give people the option of creating a new team entry in the database OR joining an existing team from a html helper dropdown list populated from the database. I've been trying various ways of doing this for the better part of two days and can't seem to figure it out after extensive searchers here and on ASP.net. I'm also hoping to figure out how to allow either the creation of a new team or joining an existing team already in the DB on the same page without getting commas inserted into the database.
I've removed all my attempts at a dropdown and am sharing what currently works without the html.dropdown:
#{
Validation.RequireField("FName", "Your first name is required");
Validation.RequireField("LName", "Your last name is required");
Validation.RequireField("Team", "A team is required to play");
Validation.RequireField("Pledge", "You must donate to play.");
var db = Database.Open("BBBT");
var FName = Request.Form["FName"];
var LName = Request.Form["LName"];
var Team = Request.Form["Team"];
var Pledge = Request.Form["Pledge"];
if (IsPost && Validation.IsValid()) {
if(ModelState.IsValid) {
var insertQuery = "INSERT INTO Players (FName, LName, Team, Pledge) " +
"VALUES (#0, #1, #2, #3)";
db.Execute(insertQuery, FName, LName, Team, Pledge);
Response.Redirect("~/ListTeams");
}
}
}
....Snip....
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h1>Register</h1>
#Html.ValidationSummary("Errors with your submission:")
<form method="post" action="">
<fieldset>
<legend>Join the fun!</legend>
<div>
<label>First Name:</label>
<input name="FName" type="text" size="50" value="#FName" />
</div>
<div>
<label>Last Name:</label>
<input name="LName" type="text" size="50" value="#LName" />
</div>
<div>
<label>Create a Team</label>
<input name="Team" type="text" size="50" value="#Team" />
</div>
<div>
<label>Or Joing an Existing Team</label>
<!-- This is where I would like to put the Dropdown list-->
#Html.DropDownList
</div>
<div>
<label>Pledge:</label>
<input name="Pledge" type="text" size="50" value="#Pledge" />
</div>
<div>
<label> </label>
<input type="submit" value="Insert" class="submit" />
</div>
</fieldset>
</form>
</body>
</html>
Any direction would be greatly appreciated!
Thank you.
Your will be getting the result in two steps. First Generate the List, then display it.
In the code block at the top of the page add this code
List<string> Teams = new List<string>();
foreach(var row in db.Query("SELECT DISTINCT Team FROM Players"))
{
Teams.Add(row.Team);
}
and in the place you want the dropdown populate the list
<select name="Team">
#foreach(string Teamname in Teams)
{
<option value="#Teamname ">#Teamname </option>
}
</select>
EDIT:
<select name="Team" id="TeamDropdown" onchange="toggleteamcreation()">
#foreach(string Teamname in Teams)
{
<option value="#Teamname ">#Teamname </option>
}
<option value"New">Create New Team</option>
</select>
<script>
function toggleteamcreation(){
if(document.getElementById('TeamDropdown').value=="New"){
document.getElementById('Create_New_Team').style.display="block";
}
else{
document.getElementById('Create_New_Team').style.display="none";
}
}
</script>
<div id="Create_New_Team" style="display:none">
<label>Create a Team</label>
<input name="Team" type="text" size="50" value="#Team" />
</div>
I have an input in ASP.NET form. I did not use ASP.NET controls, but the adjective runat="server" was used. Like this:
<input id="cmbIOType" name="cmbIOType" runat="server" list="listcmbIOType" autocomplete="off" data-id="564" value="111" />
I'm using strig valcmbIOType = cmbIOType.value; to get the input value. I also need to data-id the input.
I used string idcmbIOType = cmbIOType.Attributes["data-id"] but returned NULL.
Meanwhile, the data-id is made by Jquery.
Please help.
i used this:
<input id="cmbLoc" name="cmbLoc" runat="server" list="listcmbLoc" autocomplete="off" />
<datalist id="listcmbLoc">
<option data-id="15" value="CPF"></option>
<option data-id="18" value="HOLD"></option>
<option data-id="19" value="CCR"></option>
</datalist>
<div style="display: none"><input id="cmbLoc_ID" type="text" name="cmbLoc_ID" runat="server"/></div>
<script type="text/javascript">
$(document).ready(function () {
$("#cmbLoc").change(function () {
$("#MainContent_cmbLoc_ID").val($('#listcmbLoc').find('option[value="' + $(this).val() + '"]').data('id'));
});
});
</script>
And enter cmbLoc_ID.value in the code behind it to get data-id.
I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.
I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/
Obviously I would like to get them into the correct position.
(The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)
Thank you.
(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function
...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too.
So far I came up with
$(document).on('click', '#certainmonth', function(a) {
$('#monthselector').hide();});
$(document).on('click', '#btwdates', function(a) {
$('#btwdateselector').show();});
I'm not sure yet how to include the if statement and toggle between the show and hide.
The error was only occurring in Firefox 27.0.1
Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.
http://jsfiddle.net/pfLme/11/
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<div data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" />
<label for="btwdates">Mileage between two dates</label>
</div>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" class="ui-screen-hidden">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
$(document).on('change', '#certainmonth, #btwdates', function (a) {
$('#monthselector').toggleClass("ui-screen-hidden");
$('#btwdateselector').toggleClass("ui-screen-hidden");
});
I have a radio button in a foreach loop within a form to be posted. I want the first one to be checked when they are listed. checked = "checked" below doesn't help. It only works if there is a single radio button.
<form action="/logged/hotel" method="post" >
#foreach (var item in ViewBag.companies)
{
<input type="radio" name="graph" value="#item.Value" checked="checked" /> #item.Text<br />
}
<input type="submit" value ="LOG IN" />
</form>
Add name attribute, this will group your radio buttons together and only displayed one as checked.
Only one radio button in a set can be checked.
all your radio buttons are in the same set.
you want to put them each in a different set so say
name="#item.Value"
However MVC wont like that, so you will have to do something like
[HttpPost]
public ActionResult MyGraphPage(GraphViewModel vm){
foreach(var company in MyDataContext.Companies){
if(Request.Form.AllKeys.Contains(company.Value){
//show the graph
}
}
If you just want the first one to be checked you can do this, its not the most elegant solution, but works.
<form action="/logged/hotel" method="post" >
#{
var isfirst = true;
}
#foreach (var item in ViewBag.companies)
{
if (isfirst) {
isfirst = false;
<input type="radio" name="graph" value="#item.Value" checked="checked" />#item.Text<br/>
} else {
<input type="radio" name="graph" value="#item.Value"/>#item.Text<br/>
}
}
<input type="submit" value ="LOG IN" />
</form>
#{
bool isFirstChecked = false;
foreach (var item in ViewBag.companies)
{
<input #(isFirstChecked ? "" : "checked") type="radio" name="graph" value="#item.Value" checked="checked" />
#item.Text
<br />
isFirstChecked = true;
}
}
i have an check boxlist with (6 items under it). and i have an search button. if user clicks Search button it gets all the result.
i am binding the items for checkboxlist using database in .cs file
condition1:
but now if user selects a checkbox[item1] its gets selected
and he tries to select an 2 checkbox[item2] then firstselected checkbox[item1] should be unselected. only checkbox[item2] should be selected
condition 2:
now if user as selected checkbox1 [item1] it gets selected. and now if user again clicks on checkboxi[item1] then it should get deselected.
either you can provide me the solution in javascript or JQuery
any help would be great . looking forward for an solution
thank you
use Radio button. The only problem you will face is when you want to de-select the radio button. You can write in a javascript for 'onClick' of radio button. The onClick function can check whether radio button is selected, if it is not select it else deselect it.
Hope this helps. See Example
RDJ
While I definitely agree with the consensus that radio buttons are the way to go for your described use-case, here is a little snipped of jquery that will cause checkboxes to behave like radio buttons. You simply need to add a "groupname" attribute to your checkbox tag.
HTML:
<fieldset>
<legend>Group 1 - radio button behavior</legend>
<input type="checkbox" groupname="group1" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group1" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group1" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group1" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group1" value="5" /> Checkbox 5<br />
</fieldset>
<fieldset>
<legend>Group 2 - radio button behavior</legend>
<input type="checkbox" groupname="group2" value="1" /> Checkbox 1<br />
<input type="checkbox" groupname="group2" value="2" /> Checkbox 2<br />
<input type="checkbox" groupname="group2" value="3" /> Checkbox 3<br />
<input type="checkbox" groupname="group2" value="4" /> Checkbox 4<br />
<input type="checkbox" groupname="group2" value="5" /> Checkbox 5<br />
</fieldset>
<fieldset>
<legend>Group 3 normal checkbox behavior</legend>
<input type="checkbox" value="1" /> Checkbox 1<br />
<input type="checkbox" value="2" /> Checkbox 2<br />
<input type="checkbox" value="3" /> Checkbox 3<br />
<input type="checkbox" value="4" /> Checkbox 4<br />
<input type="checkbox" value="5" /> Checkbox 5<br />
</fieldset>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$('input[type=checkbox]').click(function() {
var groupName = $(this).attr('groupname');
if (!groupName)
return;
var checked = $(this).is(':checked');
$("input[groupname='" + groupName + "']:checked").each(function() {
$(this).prop('checked', '');
});
if (checked)
$(this).prop('checked', 'checked');
});
});
</script>
I'm sure there are opportunities to increase brevity and performance, but this should get you started.
Why don't you use radio buttons, they are ideal for the purpose that you mentioned.
Edit:
If you necessarily want to use checkbox list then assign some logical ids to those checkboxes so that you can access them in JavaScript.
On each onclick event of the checkboxes call the JavaScript and in the JavaScript loop through and see
If any checkbox is checked other
than the present clicked checkbox,
then make them unselected.
If the present checkbox is already
checked then just toggle it.
You can see if a checkbox is checked using $("#checkboxId").is(":checked") which returns true if a checkbox is checked.
Thanks
this was the code that helped me to solve this issue
just add the script -
var objChkd;
function HandleOnCheck()
{
var chkLst = document.getElementById('CheckBoxList1');
if(objChkd && objChkd.checked)
objChkd.checked=false;objChkd = event.srcElement;
}
and register the client event to the 'CheckBoxList1' at the Page_load as
CheckBoxList1.Attributes.Add("onclick","return HandleOnCheck()");
You might want to have a look at the MutuallyExclusiveCheckBoxExtender.
.aspx
<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />
.js
$(document).ready(function () {
LimitCheckboxes('input[name*=chkList]', 3);
}
function LimitCheckboxes(control, max) {
$(control).live('click', function () {
//Count the Total Selection in CheckBoxList
var totCount = 1;
$(this).siblings().each(function () {
if ($(this).attr("checked")) { totCount++; }
});
//if number of selected item is greater than the max, dont select.
if (totCount > max) { return false; }
return true;
});
}
PS: Make sure you use the RepeatLayout="Flow" to get rid of the annoying table format.
we can do in java script to get the solution for this.
For this first get the id of the checked item and go thorough the remaining items using loop then unchecked the remaining items
http://csharpektroncmssql.blogspot.com/2011/11/uncheck-check-box-if-another-check-box.html
My jQuery solution for this is coded as follows:
$(document).ready(function () {
SetCheckboxListSingle('cblFaxTypes');
});
function SetCheckboxListSingle(cblId) {
$('#' + cblId).find('input[type="checkbox"]').each(function () {
$(this).bind('click', function () {
var clickedCbxId = $(this).attr('id');
$('#cblFaxTypes').find('input[type="checkbox"]').each(function () {
if (clickedCbxId == $(this).attr('id'))
return true;
// do not use JQuery to uncheck the here because it breaks'defaultChecked'property
// http://bugs.jquery.com/ticket/10357
document.getElementById($(this).attr('id')).checked = false;
});
});
});
}
Try this solution:
Code Behind (C#) :
foreach (ListItem listItem in checkBoxList.Items)
{
listItem.Attributes.Add("onclick", "makeSelection(this);");
}
Java Script :
function makeSelection(checkBox)
{
var checkBoxList = checkBox;
while (checkBoxList.parentElement.tagName.toLowerCase() != "table")
{
checkBoxList = checkBoxList.parentElement;
}
var aField = checkBoxList.getElementsByTagName("input");
var bChecked = checkBox.checked;
for (i = 0; i < aField.length; i++)
{
aField[i].checked = (aField[i].id == checkBox.id && bChecked);
}
}