Passing variables in a Dynamic site

@PotrokhJul 29.2004

Hi all,

I am very new to JavaScript, and I am trying to add some functionality for my company’s site. Basically, it’s a shopping cart with up to 10 dynamically generated rows of products. In each row, there’s a text field showing the quantity (with a limit from 0 to 10) for each purchase. My boss wants some graphic up and down arrows that would increment/decrement the value in this box. I successfully managed to achieve this by directly referencing the form field, however, it only worked for one instance, not more. So, I thought of including a simple “line name” in the dynamic code, using it as the field ID and passing it as an argument. For some reason, even though it seems to output line numbers correctly, I get this error:Error: line1 is not defined
Here’s my function:

};

}

And here’s what’s passed to it:

a href=”#”><img name=”up” src=”/img/cart/up.gif” width=”20″ height=”20″ border=”0″ onClick=”fillBox(1,<% $line_id %>);”>

(the <% $line_id %> is dynamically generated with Perl and is nothing more than the word “line” plus line number)

Here’s the form field:

<input type=”text” name=”<% $Perl variable for some database content %>” value=”<% $this_item->quantity() %>” size=1 id=”<% $line_id %>”>

I would really appreciate your input, and if any of you are comfortable with both JS and Perl, that would be even better! Thanks!

to post a comment

JavaScript

9 Comments(s) _↴

@NedalsJul 29.2004 — #Something like this?

[code=php]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
 <html><head><title>Untitled</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript"> 
 <meta http-equiv="Content-Style-Type" content="text/css">
 
 <style type="text/css">
 body {
 margin:20px; padding:0px; background-color:#fff;
 }
 </style>
 
 <script type="text/javascript">
 <!--
 function incr(val) {
 elem = eval("document.forms[0].line" + val)
 if (elem.value<10) { elem.value -= -1; }
 // this looks a little strange, but it's there because js passes strings.
 // using -ve will allow the values to be handled as numbers 
 }
 
 function decr(val) {
 elem = eval("document.forms[0].line" + val)
 if (elem.value>0) { elem.value -= 1; }
 }
 //-->
 </script>
 </head>
 
 <body>
 <form>
 <input name="line1" size=2 value=3>
 <img src="up.gif" width=10 height=10 onclick="incr(1)">
 <img src="dn.gif" width=10 height=10 onclick="decr(1)"><br>
 <input name="line2" size=2 value=3>
 <img src="up.gif" width=10 height=10 onclick="incr(2)">
 <img src="dn.gif" width=10 height=10 onclick="decr(2)"><br>
 <input name="line3" size=2 value=3>
 <img src="up.gif" width=10 height=10 onclick="incr(3)">
 <img src="dn.gif" width=10 height=10 onclick="decr(3)"><br>
 <input name="line4" size=2 value=3>
 <img src="up.gif" width=10 height=10 onclick="incr(4)">
 <img src="dn.gif" width=10 height=10 onclick="decr(4)"><br>
 <!-- etc -->
 </form>
 </body>
 </html>
 [/code]

@PotrokhauthorJul 29.2004 — #Well, it still has the same issue - once it becomes more than one line it doesn't know what to reference. If I leave the code like this it'll only increment/decrement one of the fields (imagine one form on the page with up to 10 text input fields). I tried adding the same argument as in my previous code

i.e. in the function: function incr(val, line)

and in the link: onclick="incr(1, <% $line_id %>)" and and it still gets the same error "line1 is not defined" (or line2, line3 or whatever line it happens to be)

I also tried including the javascript code inside the perl loop so it generates an instance for each line, but it doesn't seem to make any difference... I am all out of ideas now. Anyone know how to handle this, please?

Thank you!

@NedalsJul 30.2004 — #The code I provided has 4 (call them quantity) fields with an increment and decrement image beside each field. These images, when clicked, will increment and decrement the associated quantity. Copy and past this code and try it.

If that's NOT the functionality you want, then I misunderstood the problem.

If it is what you are looking for, then I can work with you to incorporate it into your Perl code.

Perhaps a link to the site you are woking on might help.

@PotrokhauthorJul 30.2004 — #Unfortunately, I can't link to it as it's on company's intranet, but yes, I did notice the 4 images which is not exactly what I need... I only need one up and down arrow FOR EACH input field which will increment/decrement THAT FIELD's value by 1 for each click and can go from 0 to 10 if clicked repeatedly. And your code (as well as my initial code) does work as long as there's ONLY 1 input field. Here's pretty much what I was asked to do there:

There can only be ONE form (let's call it "order") on that page.

Then, a Perl loop creates up to 10 ROWS with <input type="text"> fields. Each <input type="text"> is populated from the database with whatever quantity of that product is there. Also, each input field gets its name dynamically as well, so I couldn't reference it in my javascript and put some code in that loop that gives those fields ID's simply called "line1" to "line#" - whatever line # happens to be the last in the loop

So I thought to pass another argument like this:

function fillBox(arg,line)

to the script that would tell it to differentiate between the fields to know WHICH <input type="text"> to increment/decrement. Unfortunately, my JS knowledge is not good enough to successfully do it. I keep getting the "line# is not defined" error. I would settle for icluding the javascript in the perl loop so I get up to ten instances in the page as long as it gets the job done, but shouldn't there be a way for only ONE script to handle however many text input fields there are on the page?

@PittimannJul 30.2004 — #Hi!

If you take your original code and use the correct reference, it should work. Just replace:

document.order.line.value

with:

document.order[line].value

and you should be there.

Cheers - Pit

Edit: oops - just saw, the argument is not quoted. This:

onClick="fillBox(1,<% $line_id %> );" needs single quotes around the line stuff:

onClick="fillBox(1,'<% $line_id %>');"

@NedalsJul 30.2004 — #I only need one up and down arrow FOR EACH input field which will increment/decrement THAT FIELD's value by 1 for each click and can go from 0 to 10 if clicked repeatedly. And your code (as well as my initial code) does work as long as there's ONLY 1 input field.[/quote]
That's exactly what the code I provided you does and it DOES work with 1, 4, or even 100 text fields. Did you try it?

Your Perl code needs to populate the page (HTML) with the following for each text element

<input type="text" name="lineN">

<img src="uparrow.gif" onclick="incr(N)">

<img src="dnarrow.gif" onclick="decr(N)">

where N is the line number from 1 to whatever.

The javascript given is all you need for any number of text elements.

@PotrokhauthorJul 31.2004 — #No, it for some reason didn't.. but Pit's suggestion worked fine, so thanks a lot for your help, guys. But now I'm stuck with another problem: they want to test it if someone types a non-numeric character into one of the fields and clicks "submit". I have successfuly used this snippet for static forms before:

function checkIt() {

var success=true;

if (isNaN(document.order[line].value)){

alert("The value must be a number between 0 and 10");

document.order[line].focus();

success=false;

}

if ( success ){

document.order.submit();

display();}

}

call it with:

<input type="button" onClick="checkIt();">

- note it's not an input type="submit", so the page doesn't reload after each click

But, of course it's complaining now that "line" is not defined... Anyone know how to make it check all the fields on the page at once? Thank you!!

@PittimannJul 31.2004 — #Hi!

Due to the fact, that except the incrementing #, the names of your inputs are identical, that can easily be done with something like this:

[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled</title>
 <script language="JavaScript" type="text/javascript">
 <!--
 function checkIt(){
 var count=0;
 var success=true;
 var inp=document.getElementsByTagName('input');
 for (var i=0;i<inp.length;i++){
 if(inp[i].type=='text'&&inp[i].name.substring(0,4)=='line'){
 var temp=document.order[inp[i].name].value
 count++;
 if (isNaN(temp)||temp==''||parseInt(temp)<0||parseInt(temp)>10){
 alert("Field "+count+": the value must be a number between 0 and 10");
 document.order[inp[i].name].focus();
 document.order[inp[i].name].select();
 success=false;
 return false;
 }
 }
 }
 if ( success ){
 document.order.submit();
 }
 }
 //-->
 </script>
 </head>
 <body>
 <form name="order">
 <input type="text" name="line1"><br>
 <input type="text" name="line2"><br>
 <input type="text" name="line3"><br>
 <input type="button" onClick="return checkIt();" value="click"> 
 </form>
 </body>
 </html>[/code]

Please note: the snippet deals with the fields' NAMES, not IDS. The script loops through all form elements which are inputs and checks for those with type="text" and with names beginning with "line".

Cheers - Pit

@PotrokhauthorAug 03.2004 — #Hi, well, no, I can't control the "name" fields, they are used for the internal Perl processing, that's why I had to add the id's... Any ideas? Also, something realy weird started happening - the increase/decrease links worked beautifully on friday, but today the page reloads with every click! Am I missing something in the syntax maybe, like return="false" ?

Complete code as of right now:

<script type="text/javascript">



</script>

In the source:

<a href=""><img name="up" src="/img/cart/up.gif" width="20" height="20" border="0" onClick="fillBox(1,'<% $line_id %>' );"></a>

<a href=""><img name="up" src="/img/cart/up.gif" width="20" height="20" border="0" onClick="fillBox(-1,'<% $line_id %>' );"></a>

(It still reloads even if I remove the "function checkit" part)

Thanks in advance!

Also in #JavaScript _↴

change document.location so as to open new window Slide In Menu Help Enabling/Disabling <table> via JS function?

Success!

Help @Potrokh spread the word by sharing this article on Twitter...

Tweet This

Passing variables in a Dynamic site

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Passing variables in a Dynamic site

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴