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.
Related
I've a form that points to itself on POST operation to process data. This part is good. Now in the form I've a textbox and a button (X) that is used for another purpose as well. When this button X is clicked it should take the input value from the text box and point to another ASP page, process data and return the value...and this is the part I'm unable to figure out... Let me explain this in a bit more clearly..
form name=frmAccounts method=Post action="self.asp"
...
...
name ---> Textbox
function ---> textbox :: search button(X) <--> sales.asp
Description --->textbox
...
...
Form Submit ---> button
Form ends
Now..suppose I enter function as "Sales" in the textbox, then when I click on the search button it would look at another ASP page like sales.asp that will query for relevant description and populate the description box...Then the form submit will call the self.asp to do its function.
Question: How can I pass value from function textbox, via search button, to sales.asp for processing and return back the value.
Things I've tried so far with no luck
1) Functions using #include method
2) Button onClick method by passing Request.Form data
3) href option by passing the URL by adding the form data - URL does not take the value
some other methods after Googling through many forums but with no joy.
Any help please?
Like Lankymart says, do something like this:
Self.asp
<form action="self.asp" name="myform" id="myform">
<input type="text" name="name" id="name" />
<br /><input type="text" name="functionbox" id="functionbox" />
<br /><input type="button" name="search" value="search" id="search" />
<br /><input type="text" name="Description" id="Description" />
<br /><input type="submit" value="submit" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#search").click(function() {
$.ajax({
data: {'functionbox': $("#functionbox").val()},
url: '/sales.asp',
success: function(data) {
if (data) {
$("#Description").val(data);
}
}
});
});
});
</script>
sales.asp
<%# LANGUAGE = JScript %>
var functionbox = Request.Form("functionbox").Item;
var answer = getAnswer(functionbox); // your code here
%><%= answer %>
I have a web application in which I am dynamically generating and displaying checkboxes at runtime. Each checkbox corresponds to an item. I need to find which items are selected. However I cannot set the id of the item in the ID attribute of Checkbox control while generating the control as the same item can appear multiple times on the web page.The ID attribute enables me to use the Page.Form() method but now I cannot use. Please suggest an alternate method to find which checkboxes are checked.
If you use JQUERY you can assign a common class to each checkbox and then use a "class selector" to get an array of items on a page that all have the same class. With that you may iterate through the array and identify which items have been checked.
The relevant code will look something like:
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
function findCheckedBoxes() {
var AllBoxes = $(".productCheckBox");
for(i=0;i<AllBoxes.length; i++)
{
if(AllBoxes[i].checked)
{
//do something with it...
alert(AllBoxes[i].value);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server" onsubmit="return validatefields();">
<input id="Checkbox1" type="checkbox" class="productCheckBox" value="one" />One<br />
<input id="Checkbox2" type="checkbox" class="productCheckBox" value="two" />Two<br />
<input id="Checkbox3" type="checkbox" class="productCheckBox" value="three" />Three<br />
<input id="Checkbox4" type="checkbox" class="productCheckBox" value="four" />Four<br />
<input id="Button2" type="button" value="button" onclick="findCheckedBoxes()" />
</form>
</body>
</html>
I have an aspx page with many buttons and i have a search button whose event i want to be triggered when user press enter.
How can i do this?
You set the forms default button:
<form id="Form1"
defaultbutton="SubmitButton"
runat="server">
Make it the default button of the form or panel.
Either one has a DefaultButton property that you can set to the wanted button.
$(document).ready(function() {
$("#yourtextbox").keypress(function(e) {
setEnterValue(e);
});
});
function setEnterValue( e) {
var key = checkBrowser(e);
if (key == 13) {
//call your post method
}
function checkBrowser(e) {
if (window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
return key;}
call the above function and it will help you in detecting the enter key and
than call your post method.
The best way to make from make actions using enter button and on click of the button without the headache to write js check for each input you have if the user press enter or not is using submit input type.
But you would face the problem that onsubmit wouldn't work with asp.net.
I solved it with very easy way.
if we have such a form
<form method="post" name="setting-form" >
<input type="text" id="UserName" name="UserName" value=""
placeholder="user name" >
<input type="password" id="Password" name="password" value="" placeholder="password" >
<div id="remember" class="checkbox">
<label>remember me</label>
<asp:CheckBox ID="RememberMe" runat="server" />
</div>
<input type="submit" value="login" id="login-btn"/>
</form>
You can now catch get that event before the form postback and stop it from postback and do all the ajax you want using this jquery.
$(document).ready(function () {
$("#login-btn").click(function (event) {
event.preventDefault();
alert("do what ever you want");
});
});
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);
}
}
Is it possible to selectively disable the autofill feature in text fields using code?
I'm developing my custom code in ASP.Net AJAX to search for the suggestion in the database and I would like to prevent the browser suggestions from appearing when the user starts typing in the textbox.
I'm looking for a solution that works in the most modern browsers (IE 7 & 8, Firefox, Safari and Chrome). It's is ok if the workaround is in Javascript.
Look at the autocomplete HTML attribute (on form or input tags).
<form [...] autocomplete="off"> [...] </form>
W3C > Autocomplete attribute
Edit:
Nowadays - from the comments - web browsers do not always respect the autocomplete tag defined behavior. This non-respect could be surrounded with a little of JavaScript code but you should think about you want to do before use this.
First, fields will be filled during the page loading and will only be emptied once the page load. Users will question why the field has been emptied.
Second, this will reset other web browser mechanisms, like the autofill of a field when you go back to the previous page.
jQuery( function()
{
$("input[autocomplete=off]").val( "" );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="John" autocomplete="off">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="qwerty" autocomplete="off">
</div>
<input type="submit" value="Login">
</form>
you can put it into your inputs:
<input type="text" name="off" autocomplete="off">
or in jquery
$(":input").attr("autocomplete","off");
There are 2 solutions for this problem. I have tested following code on Google Chrome v36.
Recent Version of Google Chrome forces Autofill irrespective of the Autocomplete=off.Some of the previous hacks don't work anymore (34+ versions)
Solution 1:
Put following code under under <form ..> tag.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2:
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
It removes "name" and "id" attributes from elements and assigns them back after 1ms.
Adding an autocomplete=off attribute to the html input element should do that.
Add the AutoCompleteType="Disabled" to your textbox
This should work in every browser
<script type="text/javascript">
var c = document.getElementById("<%=TextBox1.ClientID %>");
c.select =
function (event, ui)
{ this.value = ""; return false; }
</script>
My workaround is to make the password field a normal textbox, then using jquery to turn it into password field on focus:
<asp:TextBox runat="server" ID="txtUsername" />
<asp:TextBox runat="server" ID="txtPassword" />
<script>
$("#txtPassword").focus(function () {
$("#txtPassword").prop('type', 'password');
});
</script>
I have successfully tested this in Edge and Firefox.
<input type="text" id="cc" name="cc" autocomplete="off">
works for regular text input.
For passwords, you need to use autocomplete="new-password"
<input type="password" id="cc1" name="cc" autocomplete="new-password">
per Mozilla Development Network
Place below code above your username control. This will work in call the browser.
<div style="margin-left:-99999px; height:0px;width:0px;">
<input type="text" id="cc" name="cc" autocomplete="off">
<input type="password" id="cc1" name="cc" autocomplete="off">
</div>