Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Client side - why all the misery... 1

Status
Not open for further replies.

Isadore

Technical User
Feb 3, 2002
2,167
US
Notwithstanding there are a few examples of JavaScript doing this and that I'm having a heck of a time doing a simple calculation on the Client side, e.g.,

User enters 50 into textBoxA.

textBoxB is set aside to show results of a calculation; say a complex stat equation, which only needs the value
in A to display material information.

If you use JavaScript, you cannot use asp:textboxes
If you use ASP, JavaScript can't see asp:textboxes

I suppose the answer lies somewhere in between. I have come across a "scrollTop" routine which is suppose to bookmark your position on a page so you don't get lost during a round trip to the server.

I would think that client side calcualtions and simple population of result textboxes would be a standard and desired component of ASP.NET development.

What to do?
 
What you do to gain access to those objects client side is just make a function client side that accepts a single argument. This argument will be 'this' in javascript, which will send the function the actual form object, which you can then use the .name property of to extract its ordinal position in the form and do your stuff from there.

So in the code behind:

myTextBox.attributes.add("onKeyUp","calculate(this);")

or some such. From there, I'll assume that the box you want to plug the value into is the very next object in the form. If so, then the function might look like this:

<script language=javascript>
function calculate(obj){
var i, index;
for(i=0;i<document.forms[0].elements.count;i++){
if(document.forms[0].elements.name == obj.name)
index = i;
}
var calculatedValue;
calculatedValue = document.forms[0].elements[index].value * 2;
document.forms[0].elements[index+1].value = calculatedValue;
}
</script>

Really, the key there is the simple for loop that extracts the ordinal position of the element, which you use to &quot;get your bearings&quot; in the form and do what you need to do based on how many elements away from the source your target object is.

That's pretty much the slickest way I've found to get at these dynamically created objects in ASP.NET. I've actually put a function into my global .js include file that simply extracts the ordinal position of an element based on its name that I use everywhere for custom client side functions... and just call it from the various custom functions that I might write on any given page.

hth :)
paul
penny1.gif
penny1.gif
 
Paul --

Can't thank you enough, better, there are about 400 people nawing at the bits to get their &quot;data entry&quot; form going on the net, so they thank you too, as this routine is the only thing keeping me from uploading it.

I hope on those days when you're down at the river fishing that it dawns on you that you're help here at Tek Tips goes probably further than you can imagine --- you are surely one of the reasons the web is worth its weight in gold. Thaks a lot.
 
Paul --

One quick question if you don't mind. I tried for several hours to get the routine to work, and never go past an error re:

&quot;....forms[0].elements.name... &quot;has no value&quot;

where forms[0] I took as the name of the form which I replaced with &quot;Form1&quot;....I suppose I would need a working example of this routine to be successful at it.

Here's an option.

I have two textboxes txtA and txtB and they are doint what they need to do, i.e., txt B is getting the proper value from txtA using a simple JavaScript, so both textboxes are of the &quot;INPUT TYPE&quot; and not ASP textboxes.

Here's the question. Would it be easier for me to &quot;capture&quot; the value in &quot;txtB&quot; rather than try to do the &quot;for&quot; loop routine? Right now I am one step away from finishing this thing if I could only transfer the value of txtB (INPUT TYPE) to an ASP:TEXTBOX or, for that matter, to a declared variable. Ultimately I have to have this number to upload into a database table.

Thanks for you time Paul. I'm sure I'm not the only one that will benefit from this as I'm sure there is a lot of need for this. Anything further would be appreciated.
 
Well, if you can't get that to work (and I can't think of a reason it wouldn't, but...), and you have it working with regular inputs, then sure, you can always fall back on the old model of:

request.form(&quot;nameOfYourInput&quot;) to get the value on postback...

<input type=text name=myBox>

~~~~~~
'in the codebehind
dim myBox as string
if page.isPostBack then
myBox = request.form(&quot;myBox&quot;)
end if

would work just fine.

You can just use the function I put there as is -- as forms[0] will go to the first form on your page. Just as long as your asp form is the only form there (or at least the first one), it should still work.

Maybe try posting up some more of your code (even the rendered html would do) so we can play with it to see exactly what's giving you that error.

Or just use the request.form() method to get the value.

:)
paul
penny1.gif
penny1.gif
 
Thanks Paul. I am going to hook it up today and will get back to you. This is pretty fundamental stuff -- thanks for your time.
 
Paul: Here is the complete ASPX page..text page..

<%@ Page Language=&quot;VB&quot; Debug=&quot;true&quot; %>
<%@Import Namespace = &quot;Microsoft.VisualBasic&quot;%>
<%@Import Namespace = &quot;System&quot;%>
<%@Import Namespace = &quot;System.Web&quot;%>
<%@Import Namespace = &quot;System.Web.UI&quot;%>
<%@Import Namespace = &quot;System.Web.UI.WebControls&quot;%>
<%@Import Namespace = &quot;System.Web.UI.HtmlControls&quot;%>
<%@Import Namespace = &quot;System.Data&quot;%>
<%@Import Namespace = &quot;System.Data.OleDb&quot;%>

<script runat=&quot;server&quot;>
Private Sub Page_OnLoad(Sender As Object, e As EventArgs)
txtA.attributes.add(&quot;onChange&quot;, &quot;calculate(this);&quot;)
End Sub
</script>

<HTML>
<body>
<script language=javacript>
function calculate(obj){
var i, index;
for(i=0;i<document.forms[0].elements.count;i++){
if(document.forms[0].elements.name==obj.name)
index=1;
}
var calculatedValue;
calculatedValue = document.forms[0].elements[index].value * 5
document.forms[0].elements[index+1].value=calculatedValue;
}
</script>
<form id=&quot;Form1&quot; runat=&quot;server&quot;>
<asp:Textbox id=&quot;txtA&quot; runat=&quot;server&quot; />
<br>
<asp:Textbox id=&quot;txtB&quot; runat=&quot;server&quot; />
</form>
</body>
</HTML>

..definitely want to avoid &quot;post back&quot; as these calculations take place down the page and I don't want the page re-setting to the top -- or putting in extra code that will have to relocated the page. Thanks.
 
Goodness, Isadore. I am so very sorry. I made the type of mistake in my reply to you that I try my best to reserve only for myself (and my co-workers, of course)

The .elements property of the forms property doesn't have a .count property. That's vb syntax.

In javascript, it's:

document.forms[0].length

If it makes you feel any better, I just sat here for about 40 minutes cursing trying to figure out why this simple little thing wouldn't work. Sheesh. At any rate, Here is a re-written working version of your page (I changed the event to onKeyUp because that's how I would do it, but feel free to change it back ;-) )

<%@ Page Language=&quot;VB&quot; Debug=&quot;true&quot; %>
<%@Import Namespace = &quot;Microsoft.VisualBasic&quot;%>
<%@Import Namespace = &quot;System&quot;%>
<%@Import Namespace = &quot;System.Web&quot;%>
<%@Import Namespace = &quot;System.Web.UI&quot;%>
<%@Import Namespace = &quot;System.Web.UI.WebControls&quot;%>
<%@Import Namespace = &quot;System.Web.UI.HtmlControls&quot;%>
<%@Import Namespace = &quot;System.Data&quot;%>
<%@Import Namespace = &quot;System.Data.OleDb&quot;%>

<script runat=&quot;server&quot;>
Private Sub Page_OnLoad(Sender As Object, e As EventArgs) handles mybase.load
txtA.attributes.add(&quot;onKeyUp&quot;, &quot;calculate(this);&quot;)
End Sub
</script>

<HTML>
<body>
<script language=javascript>
function calculate(obj){
var i, index;
for(i=0;i<document.forms[0].length;i++){
if(document.forms[0].elements.name==obj.name)
index=i;
}
var calculatedValue;
calculatedValue = document.forms[0].elements[index].value * 5;
document.forms[0].elements[index+1].value=calculatedValue;
}
</script>
<form id=&quot;Form1&quot; name=Form1 runat=&quot;server&quot; method=post>
<asp:Textbox id=&quot;txtA&quot; runat=&quot;server&quot; />
<br>
<asp:Textbox id=&quot;txtB&quot; runat=&quot;server&quot; />
</form>
</body>
</HTML>

Again, I'm sorry for the confusion.

**slinks sheepishly off into the sunset**
penny1.gif
penny1.gif
 
Hey Paul, no problem. The finished product is a beautiful as a painting -- when the time comes where I can whip something like this out in 40 mins I'll think about what you said. I am in the scientific community and Client side calculations are abundant and regular -- so, this code will drive many a calculation for the benefit of many viewers -- all in the name of water quality and protection of the enviroment (current project). So, you have 40 minutes of dedicated time towards improving water quality..does that help? Again, thanks.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top