I'm new to jQuery so this may be a real simple answer. I have a ASP.NET project that I'm trying to dynamically add content to an ASP Label element by typing into a text box and clicking a button. Sounds simple right? Well, I can get the content to added, but when the form is submitted the Label element is still empty? Why is the new data not submitted? What step am I missing? Please help. Here's some sample code:
<asp:Label ID="lblContainer" Text="" runat="server" />
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
function addTag() {
if ($("#tag").val() != "") {
$("#lblContainer").append('$("#tag").val()' + '<br />');
$("#tag").val("");
}
}
Asp.Net doesn't work that way because it won't send the contents of a <span> tag in the HTTP Post when your form is submitted. You need to add that content to an <input> of some sort. Try something like this instead.
<span id="tagContainer" runat="server"></span>
<input type="text" name="tag" id="tag" />
<input type="button" name="AddTag" value="Add" class="button" onclick="addTag();" />
<!-- Use a hidden field to store the tags -->
<asp:HiddenField id="tagText" runat="server" />
function addTag() {
var newTag = $.trim($("#tag").val());
if (newTag != "") {
$("#tag").val("");
$("#tagContainer").append(" "+ newTag);
// append the newTag to the hidden field
var $tagText = $("#tagText");
$tagText.val($tagText.val() + " " + newTag);
}
}
Then in your asp.net code you can retrieve the value like so..
string myTagText = tagText.value;
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 an issue that i believe there is a simple solution for but being new to ASP.NET it is not very clear to me.
I have a user control that has a for loop that makes bunch of hyperlink elements in a list (looks like below>
<li><a href="blahblah.aspx?ID=1..../></li>
<li><a href="blahblah.aspx?ID=2..../></li>
<li><a href="blahblah.aspx?ID=3..../></li>
<li><a href="blahblah.aspx?ID=4..../></li>
Next, that uc is used in another page with in a <form> tag with method="post" and <asp:button> that isn't really used.
Next, when one of the links is clicked it will go to blahblah.asp and get the ID in there via Request.QueryString
So far so good.
What i want to do though (and the reason for this post) is that i want to not use ID as a query parameter. I want to pass the ID in the body. So the link would be blahblah.aspx and it wouldn't show the ID.
What would be the best way to accomplish this. I've tried couple different ways but it's not working.
Not sure if this will work for you, but instead of using html a tags, use the asp LinkButton control. You can then handle the command event of this control so have your for loop generate the following controls (or better yet use a repeater):
<asp:LinkButton id="button1" runat="server" CommandArgument="1" OnCommand="SendToBlah" />
<asp:LinkButton id="button2" runat="server" CommandArgument="2" OnCommand="SendToBlah" />
private void SendToBlah(Object sender, CommandEventArgs e)
{
Session["ID"] = e.CommandArgument;
Response.Redirect("blahblah.aspx");
}
You can then use your session argument inside your blahblah.aspx page however you see fit.
To send the data in the HTTP body instead of the query string, you need to do an HTTP post. This is easy enough, just use a form with a hidden parameter:
<li>
<form action="blahblah.aspx" method="post">
<input type="hidden" name="ID" value="1" />
<input type="submit" value="submit" />
</form>
</li>
To get the data on the target page, use Request.Params instead of QueryString.
Now, if you want to use a hyperlink rather than a "submit" button, you can always submit the form using Javascript:
<li>
<form id="myform1" action="blahblah.aspx" method="post">
<input type="hidden" name="ID" value="1" />
</form>
Submit the form
<form id="myform2" action="blahblah.aspx" method="post">
<input type="hidden" name="ID" value="1" />
</form>
Submit the form
</li>
<script type='text/javascript'>
window.submitForm = function(id) {
document.forms[id].submit();
return false;
}
</script>
I need to design a page to register as well as login a user.By clicking login button login servlet should be called.And on clicking register button,register servlet will be called.how can i do this?
Having two forms that post to different places is the simplest method
Name your buttons:
<input type="submit" name="form_action" value="Login" />
and
<input type="submit" name="form_action" value="Register" />
When it comes to processing the form, just hookout form_action and it should equal Login or Register.
This requires some more server-side logic but should work if you need your two forms to be tightly combined.
You can include some Javascript code for this.
<form name="Form1" method="post">
Your Name <input type="text" name="text1" size="10" /><br />
<INPUT type="button" value="ButtonLogin" name=button1 onclick="return OnButtonLogin();">
<INPUT type="button" value="ButtonRegister" name=button2 onclick="return OnButtonRegister();">
</form>
like this:
<script language="Javascript">
<!--
function OnButtonLogin()
{
document.Form1.action = "Login.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
function OnButtonRegister()
{
document.Form1.action = "Register.do"
document.Form1.target = "_blank";
document.Form1.submit();
return true;
}
-->
</script>
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);
}
}
I have an aspx page that uses a master page. On this page I have a group of radio buttons. I need to get at the checked property for each of the elements in the radio button group in javascript. Before the page was converted to use a master page, the following javascript code worked just fine:
if((!f.rblRegUseVehicles[0].checked) && (!f.rblRegUseVehicles[1].checked))
{
isValid = "false";
}
f is the reference to the form. This worked just fine.
When the page was chanded to use a Master Page, I changed the javascript to the following:
if((!f.<%=rblRegUseVehicles.ClientID%>[0].checked) && (!f.<%=rblRegUseVehicles.ClientID%>[1].checked))
{
isValid = "false";
}
Now, the javascript is failing because it can't find the element. In the "View Source" I have elements with the name:
<input id="ctl00_cphContent_rblRegUseVehicles_0" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="Yes" />
<input id="ctl00_cphContent_rblRegUseVehicles_1" type="radio" name="ctl00$cphContent$rblRegUseVehicles" value="No" />
The only code that works is
document.<%=Form.ClientID%>.<%=rblRegUseVehicles.ClientID%>_0.checked
I want the javascript to reference the array like before the page was converted to use a Master Page. How can I do that?
This is a part of ASP.NET that has always been difficult. You need to have static javascript that references dynamically created element ids!
This is how I have always solved the problem:
Wrap your RadioButtonList in a div or p or whatever you want:
<div id="yourId">
<asp:RadioButtonList id="radiolist1" runat="server">
<!-- ... -->
</asp:RadioButtonList>
</div>
Which renders to something like this:
<div id="yourId">
<table id="radiolist1" border="0">
<tr>
<td>
<input id="radiolist1_0" type="radio" name="radiolist1" value="Item 1" checked="checked" />
<label for="radiolist1_0">Item 1</label>
</td>
</tr>
<tr>
<td>
<input id="radiolist1_1" type="radio" name="radiolist1" value="Item 2" />
<label for="radiolist1_1">Item 2</label>
</td>
</tr>
</table>
</div>
And this would allow you to have a static javascript function that targets yourId which doesn't get runat="server". Then your javascript would look something like this:
var rbl = document.getElementById("yourId");
isValid = (!rbl.getElementsByTagName("input")[0].checked
&& !rbl.getElementsByTagName("input")[1].checked);
If you want to explore the idea of using jQuery rather than straight javascript, this should do the trick for you.
if ( $('input[id*=rblRegUseVehicles]:checked').length < 0 ) isValid = "false";
The selector gets all checked radiobuttons who's id contains 'rblRegUseVehicles'.
Edit
If you want to stick with your original script,using UniqueID rather than ClientID may work
if((!f.<%=rblRegUseVehicles.UniqueID%>[0].checked) && (!f.<%=rblRegUseVehicles.UniqueID%>[1].checked))
{
isValid = "false";
}