So I have a text box, where I add an onchange event of markAsException.
My javascript is -
function markAsException(recordID) {
//alert("Exception");
//mark exception column
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).innerText = "Exception";
document.getElementById("ctl00_cpMain_lblScrollException_" + recordID).style.color = "#FF0000";
document.getElementById("ctl00_cpMain_tdScrollException_" + recordID).style.backgroundColor = "#99CCFF";
//enable comments ddl and remove blank (first item)
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).disabled = false;
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).focus();
document.getElementById("ctl00_cpMain_ddlCommentId_" + recordID).options[0] = null;
}
What I want to do is, when a user changes the value in a textbox, to mark a column as "Exception", and then focus a drop down list where they have to chose the reason for the exception.
This is what happens.. If I am on that text box and change it, then tab, it tabs to the drop down list.
However, if I change the value and then simply click in another text box on the form, I don't focus the drop down list.
How would I accomplish that?
I would suggest using JQuery's change() function.
The advantage is that it will be more stable across different browsers.
Something like:
$('#<%= TextBox1.ClientID %>').change(function(){
// extract the recordID from the textbox - perhaps with an attribute?
markAsException(recordID);
});
My comment was getting longer so I'm expanding:
Take a look at the JQuery documentation for setting this up as the page finishes loading. If tb is the ID of your textbox your selector would be
$('#<%= tb.ClientID %>')
I would suggest you replace your code and use
tb.Attributes.Add("recordID", recordId.ToString());
This will add the ID you need onto the textbox tag. Once you're in the function I outlined above you can use the following selector to get the recordID in javascript
var recordID = $('#<%= TextBox1.ClientID %>').attr('recordID');
All together
$(document.ready(function(){
$('#<%= tb.ClientID %>').change(function(){
var recordID = $('#<%= tb.ClientID %>').attr('recordID');
if(recordID){
markAsException(recordID);
}
});
});
Related
I have built the following Gridview (Employees and their weekly target):
Desired result: I have a submit button at the bottom which will take all the data from the Gridview using jQuery and push it into my database.
At the moment, I cannot even retrieve the textbox values though, i have the following code:
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td").each(function () {
var value = $(this).text();
alert(value);
});
});
});
This Selects all the "Table Data" cells... It is selecting the names perfectly, but as soon as it gets to a textbox, it doesnt get the value I type in, it just alerts nothing.
I have tried the following too, each with different, but not the desired results:
.html
.val
.innerHTML
Would anyone be able to point out where I am going wrong please? please let me know if you need anymore info...
You have to check if the control exists in the table cells or not
Give this a try
var value = $(this).find('input').length > 0 ? $(this).find('input').val() : $(this).text();
Hope this will work!
You must select the input textbox in your selection as given below
$(document).ready(function () {
$("#btnSubmit").click(function () {
$("#GridView1 td input").each(function () {
var value = $(this).val();
alert(value);
});
});
});
I'm trying to get jQuery to bind an onClick function when the document loads to my radio buttons.
ASP goes back to the database and finds all the open markers and then it sends a response to the page with the raw HTML to make a radio button and an image of the marker. What I need to do is have jQuery (or anything for that matter) bind an onClick that will signal what one is clicked so I can send that markerId back to the database to attach it to a person.
Here is a rough jsFiddle of what I've tried so far. In debugging I added alerts in the each function and I see them 3x like I should but the attr('id') comes back undefined.
This is the html that puts the radio buttons on the form
<br />
<p>Select open marker for new user:
<% getMarkers(); %>
</p>
This is the codebehind for that call
while (reader.Read())
{
if (readIndex % 3 == 0)
markerTable += "<tr>";
string markerId = reader["marker_id"].ToString();
string fileName = reader["marker_filename"].ToString();
markerTable += "<td><input type=\"radio\" name=\"openMarker\" value=\"" + markerId + "\" " +
"id=\"oMrk" + markerId + "\"><label for=\"oMrk" + markerId + "\"><img src=\"/Markers/" +
fileName + "\" /></label></input></td>";
readIndex++;
if (readIndex % 3 == 0)
markerTable += "</tr>";
}
if (readIndex % 3 != 0)
markerTable += "</tr>";
markerTable += "</table>";
}
else
markerTable = "<p>No empty markers. Please delete a user to continue.</p>";
sCon.Close();
return markerTable;
The fiddle I posted has the source pasted into it from this function.
I have two questions.
Why does this not work? It seems like it should, I am getting 3 elements from my jQuery selector statement, It's being called from $(document).ready() why are the attributes undefined?
Is there a better way to do this? I was planning on putting the value in a page variable and then sending it with an ASP button back to the server to a stored procedure to add that marker with some text from another field back to the database. I realize I could add the onClick event into the response html, but dang it I need to understand why what I'm doing isn't working.
I'm pretty new to web, so if I am way off the mark procedurally, I am open for suggestion.
LINK
$(document).ready(function () {
$('input:radio').each(function (radElem) {
var radId = $(this).attr('id');
alert(radId);
});
$('input:radio').on('click', function () {
alert('Clicked');
});
});
$(document).ready(function () {
$('input:radio').on('click', function() {
alert($(this).attr('id'));
});
});
Do you need to send the value to the server while staying on the page? (via ajax)
or do you need to post the form to another page?
It doesn't work because you are trying to bind onClick instead of
just click
The other answers have provided the jQuery for you. In the each you
just need to use this keyword
I tested this in a fiddle, it works. Others have provided similar answers, but here's the fiddle anyway: THE FIDDLE
$(document).ready(function () {
$("input:radio").each(function () {
var radId = $(this).attr('id');
alert(radId);
$(this).on('click', function () {
alert('Clicked');
});
});
});
As for a better way to do what you are trying to accomplish, I do not have a firm grasp of what you are trying to do really, sorry. It feels though, like you should be initially populating this in asp.net, but the constraints of your page may not make this possible. I can't say.
Also, go ahead and pick one of the previous answers, I just wanted to explain to you why what you had wasn't working.
I am trying to change the focus from one textbox to another while the character count in
on textbox reaches 13 I am using the code below with nothing happening whatsoever:
if (!this.ClientScript.IsClientScriptBlockRegistered("qtyFocus"))
{
this.ClientScript.RegisterClientScriptBlock(this.GetType(), "qtyFocus",
#"<script type='text/javascript' language='javascript'>function qtyFocus(){
var trckNumberLength = document.getElementById('txtTrackingNumber').value.length;
if(trckNumberLength == 13){
document.getElementById('txtQuantity').focus();
}}</script>");
}
txtTrackingNumber.Attributes.Add("onchange", "javascript:return qtyFocus();");
can anyone help please ?
Probably because the line in the script that's doing
var trckNumberLength = document.getElementById('txtTrackingNumber').value.length;
Needs to be changed for:
var trckNumberLength = document.getElementById('"+txtTrackingNumber.ClientID+"').value.length;
The reason being that txtTrackingNumber will very likely have a different Id when it's rendered on the page so you need to use the ClientID property of the control instead of the id you defined on the markup.
Is it possible to have a dropdown control with functionality that if there is no element in the dropdown im interested in I can just type it in myself ?
thanks for any help
Disclaimer: I know this question hasn't been tagged jQuery, but for future users searching i'll provide a start for a jquery solution.
Here's a relly simple start to a jQuery plugin to handle allowing dynamic options into a select box. An extra textbox and button is added to the DOM for each select element. Also an option is added to the bottom of the select list with text such as "add item...". Selected this option allows the user to type a new item in and add it to the select box.
Live example here: http://jsfiddle.net/8G6z3/1/
(function($) {
$.fn.freeEntry= function(options){
var settings = $.extend(
{},
{ //defaults
addItemText: 'add item...'
},
options
);
return this.each(function(){
var $this = $(this);
var $addItemOption = $('<option>' + settings.addItemText + '</option>');
$this.append($addItemOption);
var $addItemControl = $('<input type=text>').hide();
$addItemControl.insertAfter($this);
var $addItemButton = $('<input type=button value="add">').hide();
$addItemButton.insertAfter($addItemControl);
$addItemButton.click(function(){
if($addItemControl.val().length){
var $newOption = $('<option>' + $addItemControl.val() + '</option>');
$newOption.insertBefore('option:last',$this)
$this.val($addItemControl.val());
$addItemControl.val('');
}
$addItemControl.hide();
$addItemButton.hide();
});
$this.change(function(){
var $this = $(this);
if($this.val() == settings.addItemText){
$addItemControl.show().focus();
$addItemButton.show();
}
});
});
}
})(jQuery);
Usage: $('#mySelectBox').freeEntry( { addItemText: "Add a new item yo!"} );
This is not possible with the standard HTML select control, however you could use an HTML input textbox, which uses AJAX autocomplete to display a dropdown:
http://www.devbridge.com/projects/autocomplete/jquery/
Alternatively, you could have an "Other" option in the HTML select dropdown, which when selected, will display a TextBox control
You could have a text box near the drop down list with a submit button which appends html to the list section?
hi I have a radio button list inside a repeater , the repeater is inside a Datalist.i need to get the value of the selected radio button. Also I need to select only a single radio in entire datalist using javascript.
You can do it with pure client side JavaScript regardless of Repeater, DataList or anything.
Have this code in your page:
<script type="text/javascript">
function GetSelectedRadioButtonValue(strGroupName) {
var arrInputs = document.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oCurInput = arrInputs[i];
if (oCurInput.type == "radio" && oCurInput.name == strGroupName && oCurInput.checked)
return oCurInput.value;
}
return "";
}
</script>
Then to get the selected value call the function passing the name of the radio buttons group - all radio buttons with same name considered a group and the browser will let the user select only one of these.
Live test case: http://jsfiddle.net/yahavbr/BL9xJ/
I would use the normal HTML Radio Button control. Everything else is pretty complicated.
Then you can use the following code to figure out which one is selected:
http://remy.supertext.ch/2008/02/find-checked-radio-button-in-aspnet/