How can I check if an input is present?

@LocalHeroMay 27.2005

I have some php that creates input fields. Some of these fields need to be added, but they may not exhist because the user has not added them in. I want to be able to check to see if the field is there so I don’t keep getting errors.
Something like this:

var q0 = document.forms.formjunk.amount0.value;
var q1 = document.forms.formjunk.amount1.value;
var q2 = document.forms.formjunk.amount2.value;
var q3 = document.forms.formjunk.amount3.value;
var q4 = document.forms.formjunk.amount4.value;
var final = document.forms.orderform_16180.total.value;

final = q0 + q1 + q2 + q3 + q4;

Is there a way I can check to see if each amount is present before adding so I don’t get errors, or is there a better way to do this?

to post a comment

JavaScript

10 Comments(s) _↴

@ExuroMay 27.2005 — #Try this:

var q0 = document.forms.formjunk.amount0 ? document.forms.formjunk.amount0.value : 0;
 var q1 = document.forms.formjunk.amount1 ? document.forms.formjunk.amount1.value : 0;
 var q2 = document.forms.formjunk.amount2 ? document.forms.formjunk.amount2.value : 0;
 var q3 = document.forms.formjunk.amount3 ? document.forms.formjunk.amount3.value : 0;
 var q4 = document.forms.formjunk.amount4 ? document.forms.formjunk.amount4.value : 0;
 var final = document.forms.orderform_16180.total.value;
 
 final = q0 + q1 + q2 + q3 + q4;

@crh3675May 27.2005 — #

<i>
 </i>var f=document.forms.formjunk;
 var final=0;
 
 for (i=0;i&lt;f.elements.length;i++){
 if(f.elements[i].name.match(/^amount/)){
 final+=parseInt(f.elements[i].value);
 }
 }
 
 alert(final)

@LocalHeroauthorMay 27.2005 — #Thank you both very much for your help. Although I could only get Exuro's to work. I'm still new to JS, but it looks like crh3675's idea would allow any number of entries, where the first will be limited to how many lines I type. But I will take any way I can get to solve this. There was still a problem though (maybe I screwed up). It won't add up until the rows are present. But some users may only need 1 row. Here is the code I was working with. I've blocked out the JS that I couldn't get to work.

[CODE]<HTML>
 <HEAD>
 <TITLE>Untitled Document</TITLE>
 </HEAD><BODY>
 <SCRIPT type="text/javascript">
 function addme() {
 var q1 = document.forms.formjunk.amount1.value ? document.forms.formjunk.amount1.value : 0;
 var q2 = document.forms.formjunk.amount2.value ? document.forms.formjunk.amount2.value : 0;
 var q3 = document.forms.formjunk.amount3.value ? document.forms.formjunk.amount3.value : 0;
 var q4 = document.forms.formjunk.amount4.value ? document.forms.formjunk.amount4.value : 0;
 
 document.forms.orderform_16180.total.value = q1 - (-q2) - (-q3) - (-q4);
 }
 
 //var f=document.forms.formjunk;
 //var final=0;
 
 //for (i=0;i<f.elements.length;i++){
 //   if(f.elements[i].name.match(/^amount/)){
 //       final+=parseInt(f.elements[i].value);
 //   }
 //}
 
 //alert(final)
 </SCRIPT> 
 <form name="formjunk" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
 
   <?php 
 $rowsx=1; 
 if(isset($_POST["rowsx"])){ 
 $rowsx=$_POST["rowsx"]; 
 } 
 for($e=1;$e<=$rowsx;$e++){ 
 ?>
 >
 <INPUT name="amount<?php echo $e ?>" type="text" id="amount<?php echo $e ?>" onBlur="addme();">
 <BR>
 <?php
 }
 ?>
 <BR> 

 <input type="hidden" name="rowsx" value="<?php echo $rowsx+1; ?>" />
 <input name="submit" type="submit" value="Add another row" />
 </FORM>
 <FORM name="orderform_16180">
 <INPUT name="total" type="text" id="total">
 </FORM>
 </BODY>
 </HTML>[/CODE]

To view it in action I have it at http://www.localheroclothing.com/testfiles/Products/phpaddhelp.php

I just want it to add up whats on the screen, but still be able to add up more boxes. Thanks again for both of you help.

@ExuroMay 27.2005 — #Sorry, I made a typo in my code! The part before the question mark on each line should [i]not[/i] have the [FONT=Courier New].value[/FONT] part there:

var q1 = document.forms.formjunk.amount1 ? document.forms.formjunk.amount1.value : 0;
 var q2 = document.forms.formjunk.amount2 ? document.forms.formjunk.amount2.value : 0;
 var q3 = document.forms.formjunk.amount3 ? document.forms.formjunk.amount3.value : 0;
 var q4 = document.forms.formjunk.amount4 ? document.forms.formjunk.amount4.value : 0;

However, if you can have any number of elements, you'll probably want to use an approach more like crh3675 suggested:

var final = 0;
 var fields = forms["formjunk"].elements;
 for (var i=0;i&lt;fields.length;i++) {
 if (fields[i].name.indexOf("amount") == 0) {
 final += new Number(fields[i].value);
 }
 }
 document.forms.orderform_16180.total.value = final;

Hope that works for you!

@LocalHeroauthorMay 28.2005 — #Thanks, it works!, I only had to add

var fields = [COLOR=Red]document.[/COLOR]forms["formjunk"].elements;

to get it to work right. But thanks a lot for your help!

@ExuroMay 28.2005 — #Glad you got it to work! Originally I just had it say "form", because I almost always do stuff like that with a function where I pass in the form as a parameter, so I forgot to add "document" out in front! I looked back at the code from my first post though, and I [i]didn't[/i] make any typos in that one... But yeah, I'm glad you figured it, fixed it, and got it to work!

@LocalHeroauthorMay 28.2005 — #Yeah, when I was messing with the code trying to get it to work, I added .value to it. I must have cut and pasted one of my edits. I have another question for you. I've been working on modifying the code for another problem. I'm trying to add colors. The add function that we have was actually for quantitys. Next to it there is a "color" dropdown. White colors cost less. I have everything made already, but not for infinate selections. I just want to add up how many white are selected. I think that if we told it that "white" is equal to 1 and everything else is equal to zero, we could just times it by its quantity. But I need to keep the option name as the color.

I gave this idea a shot, and failed. I can follow JS pretty well usually, but one thing that I have never been able to understand is adding the "i" var.

Here is the code:

[CODE]<HTML>
 <HEAD>
 <TITLE>Untitled Document</TITLE>
 </HEAD><BODY>
 <SCRIPT type="text/javascript">
 function addme() {
 var final = 0;
 var fields = document.forms["formjunk"].elements;
 for (var i=0;i<fields.length;i++) {
 if (fields[i].name.indexOf("amount") == 0) {
 final += new Number(fields[i].value);
 }
 }
 document.forms.orderform_16180.total.value = final;
 }
 </SCRIPT> 
 <form name="formjunk" method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
 
   <?php 
 $rowsx=1; 
 if(isset($_POST["rowsx"])){ 
 $rowsx=$_POST["rowsx"]; 
 } 
 for($e=1;$e<=$rowsx;$e++){ 
 ?>
 >
 Quantity <INPUT name="amount<?php echo $e ?>" type="text" id="amount<?php echo $e ?>" onBlur="addme();">
 Color<SELECT name="color<?php echo $e ?>" onChange="addme();">
 <OPTION value="white">white</OPTION>
 <OPTION value="black">black</OPTION>
 <OPTION value="red">red</OPTION>
 </SELECT>
 <BR>
 <?php
 }
 ?>
 <BR> 

 <input type="hidden" name="rowsx" value="<?php echo $rowsx+1; ?>" />
 <input name="submit" type="submit" value="Add another row" />
 </FORM>
 <FORM name="orderform_16180">
 <INPUT name="total" type="text" id="total">
 <INPUT name="totalwhite" type="text" id="totalwhite">
 </FORM>
 </BODY>
 </HTML>[/CODE]

And the page is located at http://www.localheroclothing.com/testfiles/Products/phpadd.php

Thanks for your help before, I appreciate it. Right now I have to add up the colors finitly, and now that I know infinate boxes are possible, I want to clean up my code a lot. Thanks.

@ExuroMay 28.2005 — #

[code=php]function addme() {
 var total = 0, whites = 0;
 var fields = document.forms["formjunk"].elements;
 for (var i=0;i<fields.length;i++) {
 if (fields[i].name.indexOf("amount") == 0) {
 total += new Number(fields[i].value);
 // This assumes that the select element comes right after the text box
 if (fields[i+1].selectedIndex == 0) {
 whites += new Number(fields[i].value);
 }
 }
 }
 document.forms.orderform_16180.total.value = total;
 document.forms.orderform_16180.totalwhite.value = whites;
 }[/code]

I think that should work for you... Also, I changed the variable [FONT=Courier New]final[/FONT] to [FONT=Courier New]total[/FONT] because [FONT=Courier New]final[/FONT] is actaully a reserved-word in JavaScript so it was throwing an error at me in Mozilla.

I can follow JS pretty well usually, but one thing that I have never been able to understand is adding the "i" var.[/QUOTE]The variable [FONT=Courier New]i[/FONT] is usually just used to iterate through all the indecies of an array. The letter [FONT=Courier New]i[/FONT] is used because it's short, and it can be short for "index". I've also that it's an old practice left over from some really old programming language where your variable types were based off the name of the variable, so [FONT=Courier New]i[/FONT], [FONT=Courier New]j[/FONT], [FONT=Courier New]k[/FONT], ... were integers and that's why we use them as the variables in our [FONT=Courier New]for[/FONT] loops.

[i]Edit:[/i] I asked a friend, and Googled a bit, and found out out that the language was Fortran. I found [url=http://www.personal.psu.edu/faculty/j/h/jhm/f90/lectures/deftype.html]a page[/url] on PSU's site explaining that naming convention I was talking about.

@LocalHeroauthorMay 29.2005 — #Works great. I thank you for your time and extensive help.

@ExuroMay 29.2005 — #No problem at all ?! I hope you learned a couple things you wouldn't have otherwise and that this'll help you on your future scripting projects!

Also in #JavaScript _↴

Get page (body) height in Pixels Using IF/ELSE statements to link forms on separate pages Change IFRAME src

Success!

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

Tweet This

How can I check if an input is present?

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How can I check if an input is present?

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

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

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴