How to ensure that if dropdown selection is first item nothing happens - javascript

I have the code below to open a pop up when user makes a selection. What I would like is to block when user selects the first item in the drop down as it has no real value. Also, I want to allow user to reselect already selected option by clicking the dropdownlist option again.
function OnClientSelectedIndexChanged(sender, eventArgs) {
var inputFieldValue;
var item = eventArgs.get_item();
grid = $find("<%= rggrid.ClientID %>");
var selectedRows = grid.get_selectedItems();
if (selectedRows.length > 0) {
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
inputField = MasterTable.getCellByColumnUniqueName(row, "Item")
if (inputField) {
inputFieldValue = inputField.value
break;
}
}
}
else {
var inputFieldID = window['textItembox'];
inputField = document.getElementById(inputFieldID);
if (inputField) {
inputFieldValue = inputField.value;
}
}
window.radopen('<%=linker %> , "UserDialog");
return false;
}

When is the OnClientSelectedIndexChanged fired??
Anyway here is a quick sample:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="-1" />
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Select" onclick="Button1_Click" />
$('#<%=Button1.ClientID %>').click(function () {
if ($('#<%=DropDownList1.ClientID %>').val() == "-1")
return false;
alert($('#<%=DropDownList1.ClientID %>').val());
});

Try
onclick = return(false);
to diable action on the first block and
mousedown = function(e){e.target.checked;}
or
mousedown = function(e){e.target.parentNode.selectedIndex = e.target.index;}
to be able to select your selected option again

Related

telerik:RadGrid: How to get the row index based off a clientside event triggered by a column control

There is a 4 column grid, in the second column there is a dropdown list whose client change event is wired to trigger some actions based on the value selected. Basically, the control in the 3rd column will be manipulated based off the ddl value and whether a checkbox in the last column is checked.
RadGrid
<telerik:RadGrid ID="theGrid" runat="server">
<MasterTableView ClientDataKeyNames="ProductId" EditMode="InPlace">
<Columns>
<telerik:GridBoundColumn DataField="ProductName" HeaderStyle-Width="120px" HeaderText="Product Name" UniqueName="ProductName" ReadOnly="true"></telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="ProductServices" HeaderText="QX Services">
<ItemTemplate>
<telerik:RadDropDownList ID="ddlProductServices" runat="server" OnClientItemSelected="productServicesItemSelected"></telerik:RadDropDownList>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="IncludePublicRecordData" HeaderText="Include Public Record Data">
<ItemTemplate>
<asp:CheckBox ID="IncludePublicRecordData" runat="server" Enabled="False" AutoPostBack="false"></asp:CheckBox>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridCheckBoxColumn DataField="EnablePublicRecordData" UniqueName="hdnEligiblePublicRecordData" ReadOnly="True" HeaderText="Eligible Public Record Data">
</telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowKeyboardNavigation="false" EnableRowHoverStyle="True">
<Selecting AllowRowSelect="false" EnableDragToSelectRows="False" />
</ClientSettings>
</telerik:RadGrid>
Actionable clientside event
I need to know which row is currently in play for this to work. Currently this wonky solution works but ONLY because there is 1 row in the table.
What I'm going to attempt, is spin throw the rows and match the id of the "sender" object to one in one of the cells and use the index of the loop. But that seems so bad and inconsistent (due to the nesting of objects). I'm sure telerik has an easier, cleaner way to accomplish this...thus my plea to the SO community.
function productServicesItemSelected(sender, eventArgs) {
try {
const str = sender._uniqueId;
let parent = sender.get_parent();
const item = eventArgs.get_item();
const selectedValue = item.get_value() || "";
console.log("You selected " + item.get_text() + "; with value " + item.get_value());
let itemParent = item._parent;
let theGrid = $find("<%=ProductServicesGrid.ClientID %>");
if (theGrid) {
let masterTable = theGrid.get_masterTableView();
let rows = masterTable.get_dataItems();
let rowIdx = 0;
if (rows.length > 1) {
console.log("...finding rowIdx:");
for (let i = 0; i < rows.length; i++) {
let row = rows[i];
let cellz = row._element.cells;
if (cellz) {
for (var j = 0; j < cellz.length; j++) {
var celll = cellz[j];
// match item uniqueId with that of each cell
console.log(celll);
}
}
}
}
let currentRow = rows[rowIdx];
let cells = currentRow._element.cells;
//
let eligibleCheckbox = cells[3].firstElementChild.childNodes[0];
let includeCheckbox = cells[2].firstElementChild;
if (selectedValue === "QEWComp" || selectedValue === "none") {
// disable
$(includeCheckbox).attr('disabled', true);
// uncheck
$(includeCheckbox).prop("checked", false);
} else {
if (eligibleCheckbox.checked) {
$(includeCheckbox).attr('disabled', false);
} else {
$(includeCheckbox).attr('disabled', true);
}
}
}
The way that I have done something similar is to pass in the Container.ItemIndex
OnClientItemSelected='<%# string.Format("productServicesItemSelected(this, {0}); return false;", Container.ItemIndex) %>'
The JavaScript function would look like
function productServicesItemSelected(sender, itemIndex) { }
To get the selected row that your dropdown was in you can use:
var theGrid = $find("<%=ProductServicesGrid.ClientID %>");
var masterTableView = theGrid.get_masterTableView();
// clear any previously selected rows
theGrid.clearSelectedItems();
// select the current row by index
masterTableView.selectItem(itemIndex);
var selectedItems = masterTableView.get_selectedItems();
if (selectedItems.length > 0) {}
This will give you the selected row and you can use functions off of selectedItems[0] to get data key values you have defined on the grid like productID
Hopefully this helps somewhat.

How to call javascript function on checkboxlist item selection

HTML :
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>C++</asp:ListItem>
<asp:ListItem>ASP.Net</asp:ListItem>
<asp:ListItem>Javascript</asp:ListItem>
<asp:ListItem>CSS</asp:ListItem>
<asp:ListItem>HTML</asp:ListItem>
<asp:ListItem>Java</asp:ListItem>
<asp:ListItem>Other</asp:ListItem>
</asp:CheckBoxList>
<div id="idskill">
<asp:Label ID="lblskilldescription" runat="server">Description</asp:Label>
<asp:TextBox ID="txbskilldescription" runat="server" Width="150px" OnTextChanged="TextBox8_TextChanged" Rows="5" TextMode="MultiLine"></asp:TextBox>
</div>
Scripts :
function toggleDiv()
{
$("#idskill").slideToggle("slow");
return false;
}
What I want is on selection Other div should toggle, on uncheck it should hide.
There should be "onchange" listener for the element. At least using JS we use the onchange event listener.
Try like this might help.
function list_onclick() {
var list = document.getElementById('CheckBoxList1');
var inputs = list.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked && inputs[i].value == "1") {
//do your work
}
else{
}
}
}

validation of radiobuttonlist in asp.net using javascript

i have to validate a radio button using javascript. it should show a message if none of the option is selected.
my radio button code is:
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
and the submit button is:
<asp:Button ID="next2" runat="server" Text=">>" Width="46px"
OnClientClick="return next2()"/>
the corresponding javascript function is :
function next2() {
var listItemArray = document.getElementById('<%=welldata.ClientID %>');
var isItemChecked = false;
var length1 = listItemArray.length;
for (var i=0; i<length1; i++)
{
var listItem = listItemArray[i];
document.write(listItem);
if ( listItem.checked )
{
alert(listItem.value);
isItemChecked = true;
}
}
if ( isItemChecked == false )
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
while debugging i noticed thaat function is executed but doesn't enter the for loop.
also i tried
document.write(isItemChecked);
document.write(listItemArray);
document.write(length1);
and the output was :
false [object HTMLTableElement] undefined
The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.
So, you need to get the input tags inside the table tag first:
var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');
This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />
You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).
This line of jquery code will get the your radio buttons
var listItemArray = $("input[id^='welldata']")
Try this:
function next2() {
if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
or
Use RequiredFieldValidator
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="welldata"
ErrorMessage="Select your welldata!"
>
Check these below links
http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html
http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb
http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus
var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');
var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
if (rblItems[i].checked) {
checkedItems = true;
break;
}
else {
checkedItems = false;
}
}
if (!checkedItems) {//Hence No items checked
alert("Nothing is checked");
return false;
}

making textbox readonly in javascript

I am having two radio buttons and two textbox. When I click on first checkbox, both texbox should not be readonly. But when I select second radio button it should make both text box readonly. I googled and found many solutions but don't know why none is not working in my code.
Html:
<asp:RadioButton ID="mailNew" Text="New" runat="server" GroupName="mail_select" onclick="showHide(1)" ClientIDMode="Static" /><br />
<asp:RadioButton ID="mailExisting" Text="Existing" runat="server" GroupName="mail_select" onclick="showHide(2)" ClientIDMode="Static" />
<asp:TextBox ID="txtPromotion" runat="server" Width="77px" ></asp:TextBox><br />
<asp:TextBox ID="txtSubject" runat="server" Width="288px"></asp:TextBox><br />
Javascript:
function showHide(val) {
var txtpid=document.getElementById(<% = txtPromotion %>)
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
if (val == 1) {
txtsub.setAttribute("readOnly.true");
txtpid.setAttribute("readOnly,true");
}
}
I see two issues:
You're not using ClientID for txtPromotion.
You're calling setAttribute with an incorrect attribute name and no value at all.
Just use the reflected property consistently in your code:
function showHide(val) {
var txtpid=document.getElementById('<% = txtPromotion.ClientID %>')
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
else if (val == 1) {
txtsub.readOnly = true;
txtpid.readOnly = true;
}
}
Note that your code assumes val will never be anything other than 1 or 2, because it doesn't update readOnly unless it's one of those two values. With that in mind, this might be cleaner:
function showHide(val) {
document.getElementById('<% = txtPromotion.ClientID %>').readOnly = val == 1;
document.getElementById('<% = txtSubject.ClientID %>').readOnly = val == 1;
}

Multiple DropDownLists - Call Single Function with ID

I have the following code which toggles the visibility of one of a pair of DropDownLists based on the selected radio button. This code works but my problem is that I have several sets of controls just like this on a single form. How can I use a single JavaScript Toggle() function, irrespective of the ID of the RadioButtonList that triggered it?
function Toggle()
{
var list = document.getElementById("produceDDL");
var inputs = list.getElementsByTagName("input");
var selected;
for (var i = 0; i < inputs.length; i++)
{
if (inputs[i].checked)
{
selected = inputs[i];
break;
}
}
if (selected.value == 'Vegetables')
{
div1.style.display = 'none';
div2.style.display = 'block';
}
else
{
div1.style.display = 'block';
div2.style.display = 'none';
}
}
<asp:radiobuttonlist ID="produceDDL" OnClick="javascript:Toggle();"
RepeatDirection="Horizontal" runat="server">
<asp:ListItem Selected="True">Fruit</asp:ListItem>
<asp:ListItem>Vegetables</asp:ListItem>
</asp:radiobuttonlist>
<div id="div1">
<asp:DropDownList ID="fruitDDL" Width="120" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Apples</asp:ListItem>
<asp:ListItem>Oranges</asp:ListItem>
</asp:DropDownList>
</div>
<div id="div2" style="display:none;">
<asp:DropDownList ID="vegDDL" Width="120" runat="server">
<asp:ListItem>Select</asp:ListItem>
<asp:ListItem>Onions</asp:ListItem>
<asp:ListItem>Potatoes</asp:ListItem>
</asp:DropDownList>
</div>
Let the radio button list pass itself as function argument.
OnClick="javascript:Toggle(this);"
Then you can replace
function Toggle()
{
var list = document.getElementById("produceDDL");
// ...
by
function Toggle(list)
{
// ...
This way you can use OnClick="javascript:Toggle(this);" in other radio button lists.
By the way, the javascript: pseudoprotocol is unnecessary and the normal JavaScript naming convention is that function names should start with lowercase. I'd sanitize it as well :)

Categories