How do I identify and store the changed details of a text box and call it in java script in asp.net
Question
I have an user control, that is being called in a page. The psuedo code is as below Main page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%@ Register TagPrefix="test" TagName="newcontrol" Src="~/UserControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<script id="testscript" language="javascript" src="CheckJavaScript.js"> </script>
<form id="form1" runat="server">
<div>
<test:newcontrol ID="testingNewControl" runat="server" />
<asp:Button ID="btnSave" runat="server" Width="100" OnClientClick="CallingScript()" />
</div>
</form>
</body>
</html>
User control
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs"
Inherits="WebApplication1.UserControl" %>
<div id="usertest" runat="server">
<table>
<tr>
<td>
<asp:Label ID="label1" Text="Name" runat="server">
</asp:Label>
<asp:TextBox ID="text1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<table>
<tr>
<td>
<asp:Label ID="label2" Text="City" runat="server">
</asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
I want to call the javascript, if there is any change in the value of the text box, when the user hits the "Save" button.
How do I identify whether the text box value has changed or not. Further, i have show just two text boxes in user control, whereas there will be many textboxes. I have to show the alert as "value changed in textbox1" or "value changed in textbox2"
How do I proceed.
3 answers
solution1
1 2011-05-08 14:55:39
One way to do it is for each textbox have a hidden field on the page with the original value in it and have the name of the hidden field be similar to the textbox. For example if you have a textbox named "username" have a corresponding hidden field named "username_orig". Then on form submit you can simply check all the input tags using the jquery selector of input and compare to the input tag name + "_orig" and see if they are the same. if they aren't then alret the name of the box and that the value has changed.
solution2
1 ACCPTED 2011-05-09 09:12:29
For a generic solution, you need a solution that tracks old values. A typical outline of solution is
- Have a hidden field to store old values for controls to be tracked. You need to develop some scheme to serialize/de-serialize name/id-value pairs. It can be as simple as comma separated list of colon separated name/value pairs. Although, you may consider JSON.
- Have a code on the server side that for a given parent control, loops recursively via all children and store their original values (along with name/id) into the hidden field. For performance reason, you may accept control types to save (or have your logic to skip controls based on their types).
- # 2 needs to be done only while displaying the page ie it should be happening in post-back. But of-course, you can come across a situations where you toggle visibility of panels and then you want to track controls from the panel. So to handle such scenarios, you need to essentially create a dictionary of name-value pairs for controls to be stored over a page life-cycle. You can register controls for tracking and un-register them from tracking.
- Have a client side (java-script) start-up code that will de-serializes from the hidden field, construct name-value dictionary and attach change event handlers to controls being watched to check against the original value.
- On post-back cycles, at server side, the original values has to be restored to a dictionary so that server code may register/un-register them. Some times, those values needs to be re-register - for example, your original value was "A", it was changed to "B" and saved (but UI still remain open in edit mode), so you may have to re-register the original value as "B".
In my case, this entire solution was packaged at the base page level. So page developer has to do was to flip the flag to indicate control tracking & identify controls by register/un-register - the base page would take care of constructing original value dictionary, registering a hidden field, injecting the js script calls etc.
solution3
0 2011-05-09 09:23:03
Store all initial values in a data set.
When submitting, check each value against the data set's vals.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.