Forum Moderators: open

Message Too Old, No Replies

problem1:Upload file filtering right on the form

The form should be filtered on the client-side before passing to server sid

         

myles

3:49 am on Apr 28, 2004 (gmt 0)

10+ Year Member



Hello everyone,
I have a problem on my javascript code regarding the function of filtering image extensions. Can anyone help me about this? my validation on the personal data is fine but when i include a function about filtering all is screwed up!

DrDoc

4:47 am on Apr 28, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmater World!

What is the current code you use to filter the images? Also, you do have something in place on the server side as well, don't you?

myles

5:30 am on Apr 28, 2004 (gmt 0)

10+ Year Member



Hello there! I am so happy that anyone answered my topic that quick. please help me cause i am cramming...
here is the code of the form which is functioning correctly:

<HTML><HEAD><TITLE>Welcome.html</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<SCRIPT language=javascript><!--
function open_or_close_submenu(parent_id)
{
for (var child_id=1; document.getElementById(parent_id+","+child_id)!=null;child_id++)
{
if (document.getElementById(parent_id+","+child_id).style.display == "block" ¦¦
document.getElementById(parent_id+","+child_id).style.display.length == 0)
{
document.getElementById(parent_id+","+child_id).style.display = "none";
}
else {
document.getElementById(parent_id+","+child_id).style.display = "block";
}
}//end of for
}//end of open_or_close_submenu

function set_highlight_on(parent_id,new_color)
{
for (var child_id=1; document.getElementById(parent_id+","+child_id)!=null;child_id++)
{
document.getElementById(parent_id+","+child_id).bgColor=new_color;
}//end of for
}//end of

function countInstances(string, word) {
var substrings = string.split(word);
return substrings.length - 1;
}

function stripSpaces(field_str) {
x = field_str;
while (x.substring(0,1) == ' ') x = x.substring(1);
while (x.substring(x.length-1,x.length) == ' ') x = x.substring(0,x.length-1);
return x;
}

function verify_testimonial_form(form_obj)
{
var cur_element = 0;
var ret_val = true;

//---------------- Begin in the First name field -------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert("You must enter your first name.");
ret_val = false;
}
cur_element++;
//----------------------Now on Last Name---------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert("You must enter your last name.");
ret_val = false;
}
cur_element++;
//------------------now on address -----------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert("Enter your address.");
ret_val = false;
}
cur_element++;
// ---------------now on city ---------------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert("You must fill up the form completely. Enter city.");
ret_val = false;
}
cur_element++;
//--------------now on state ------------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert("Choose state.");
ret_val = false;
}
cur_element++;

//-----------now on zip------------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0 )
{
form_obj.elements[cur_element].focus();
alert("Indicate zip.");
ret_val = false;
}
if (ret_val && form_obj.elements[cur_element].value.length > 0 &&
(isNaN(form_obj.elements[cur_element].value) ¦¦ form_obj.elements[cur_element].value < 1))
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert("Indicate zip in number format.");
ret_val = false;
}
cur_element++;

//-------------now on phone_c ----------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0 )
{
form_obj.elements[cur_element].focus();
alert("Country Code + Area Code + Phone Number is required.");
ret_val = false;
}
if (ret_val && form_obj.elements[cur_element].value.length > 0 &&
(isNaN(form_obj.elements[cur_element].value) ¦¦ form_obj.elements[cur_element].value < 1))
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert("Enter a valid country code.");
ret_val = false;
}
cur_element++;

//-----------now on phone_a -----------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0 )
{
form_obj.elements[cur_element].focus();
alert("Enter Area Code.");
ret_val = false;
}
if (ret_val && form_obj.elements[cur_element].value.length > 0
&& (isNaN(form_obj.elements[cur_element].value) ¦¦ form_obj.elements[cur_element].value < 1))
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert("Invalid area code.");
ret_val = false;
}
cur_element++;

//-----------now on phone_num -----------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0 )
{
form_obj.elements[cur_element].focus();
alert("Enter Phone Number. It is required so we can contact you.");
ret_val = false;
}
if (ret_val)
{
if (form_obj.elements[cur_element].value.length <= 7
&& (isNaN(form_obj.elements[cur_element].value) ¦¦ form_obj.elements[cur_element].value < 1 ))
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert("Invalid Phone number code.");
ret_val = false;
}
}
cur_element++;
//-------------now on email -------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == 0)
{
form_obj.elements[cur_element].focus();
alert('You must enter an email address.');
ret_val = false;
}
if (ret_val)
{
<!--if (countInstances(form_obj.elements[cur_element].value, "@")!=1 ¦¦
//countInstances(form_obj.elements[cur_element].value, ".")==0)-->
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form_obj.elements[cur_element].value))
{
ret_val = true;
}
else
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert('Please enter a valid email address.\n(ex. juan@cruz.biz, juan@cruz.com');
ret_val = false;
}//end of if of email "@", "."
}
cur_element++;

//-----------------now on age------------------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (form_obj.elements[cur_element].value.length > 0
&& (isNaN(form_obj.elements[cur_element].value) ¦¦ form_obj.elements[cur_element].value < 1))
{
form_obj.elements[cur_element].focus();
form_obj.elements[cur_element].select();
alert('You are not required to enter your age, but the data you entered is invalid.');
ret_val = false;
}
cur_element++;
//-----------------now on story before ---------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == "")
{
form_obj.elements[cur_element].focus();
alert("You forgot to write your story!\n Please complete your story before.");
ret_val = false;
}
cur_element++;
//--------------now on story after ----------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
if (ret_val && form_obj.elements[cur_element].value.length == "")
{
form_obj.elements[cur_element].focus();
alert("You forgot to write your story!\n Please complete your story after.");
ret_val = false;
}
cur_element++;
//-------------now on IMAGE file before -------//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
//if (ret_val && form_obj.elements[cur_element].value.length > 0)
//{
//(form_obj.elements[cur_element].focus())
//alert("Be reminded to attach JPEG or GIF format only if you choose to UPLOAD PICTURES.\n");
// ret_val = false;
//}
cur_element++;
// --------------now on IMAGE file after -----//
form_obj.elements[cur_element].value = stripSpaces(form_obj.elements[cur_element].value);
//if (ret_val && form_obj.elements[cur_element].value.length == 0)
//{
//form_obj.elements[cur_element].focus();
//alert("Please attach your image before and after.");
//ret_val = false;
//}
if (ret_val)
{
ret_val = confirm('The information you entered will be permanent in your account.\n Click CANCEL to finalize or OK to submit. ');
}
return ret_val;
}
-->
</SCRIPT>
<!-- if (
!= 1) open_or_close_submenu(1);
if (
!= 2) open_or_close_submenu(2);
if (
!= 3) open_or_close_submenu(3);
if (
!= 4) open_or_close_submenu(4); -->
<META content="MSHTML 6.00.2800.1400" name=GENERATOR>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
.style2 {color: #FFF3DE}
-->
</style>
</HEAD>
<BODY bottomMargin=0 bgColor=#cdc6a1 leftMargin=0 topMargin=0 rightMargin=0
marginheight="0" marginwidth="0">
<TABLE height="100%" cellSpacing=0 cellPadding=0 width=800 align=center
bgColor=#ffffff border=0>
<TBODY>
<TR>
<TD bgColor=#970c0c height="100%" rowSpan=3><IMG height=1 alt=""
src="Welcome to Ronco_com_files/spacer.gif" width=4 border=0></TD>
<TD vAlign=top bgColor=#ffffff colSpan=2 height="100%"><!-- Top Area -->
<SCRIPT language=JavaScript><!--
function goto_URL(object) {
window.location.href = object.options[object.selectedIndex].value;
}
//--></SCRIPT>


<table>
<TR>
<TD><form method="POST" name="test_form" action="ronco2.php" onSubmit="return verify_testimonial_form(this);" enctype='multipart/form-data'>

<table width="648" border="0" align="center" cellpadding="4" cellspacing="0">
<tr>
<td width="192" align="RIGHT"><span class="regular"> First Name:</span></td>
<td colspan="2" align="RIGHT"><div align="left">
<input type="text" name="firstname" size="20" maxlength="30">
</div></td>
<td width="335">&nbsp;</td>

</tr>
<tr>
<td align="RIGHT">
<p class="regular">Last Name:&nbsp;</p>
</td>
<td colspan="2" align="RIGHT"><div align="left">
<input type="TEXT" name="lastname" size="20" maxlength="30">
</div></td>
<td>&nbsp;</td>

</tr>
<tr>
<td align="RIGHT" class="regular">Address:</td>
<td colspan="2" align="RIGHT">
<div align="left">
<input name="address" type="text" id="address3" size="20" maxlength="50">
</div></td><td>&nbsp;</td>

</tr>
<tr>
<td valign="middle" nowrap> <div align="right"><span class="regular">City</span>:&nbsp; </div></td>

<td colspan= "2" valign="middle" nowrap><input type="text" name="city"></td>
<td valign="middle" nowrap>&nbsp;</td>
</tr>
<tr>
<td align="RIGHT"><span class="regular">State</span>:</td>
<td colspan="2" align="RIGHT" nowrap><div align="left">
<select name="state">
<option value="" selected> Choose a State
<option value="AL">Alabama
<option value="AK">Alaska
<option value="AZ">Arizona
<option value="AR">Arkansas
<option value="CA">California
<option value="CO">Colorado
<option value="CT">Connecticut
<option value="DC">D.C.
<option value="DE">Delaware
<option value="FL">Florida
<option value="GA">Georgia
<option value="HI">Hawaii
<option value="ID">Idaho
<option value="IL">Illinois
<option value="IN">Indiana
<option value="IA">Iowa
<option value="KS">Kansas
<option value="KY">Kentucky
<option value="LA">Louisiana
<option value="ME">Maine
<option value="MD">Maryland
<option value="MA">Massachusetts
<option value="MI">Michigan
<option value="MN">Minnesota
<option value="MS">Mississippi
<option value="MO">Missouri
<option value="MT">Montana
<option value="NE">Nebraska
<option value="NV">Nevada
<option value="NH">New Hampshire
<option value="NJ">New Jersey
<option value="NM">New Mexico
<option value="NY">New York
<option value="NC">North Carolina
<option value="ND">North Dakota
<option value="OH">Ohio
<option value="OK">Oklahoma
<option value="OR">Oregon
<option value="PA">Pennsylvania
<option value="RI">Rhode Island
<option value="SC">South Carolina
<option value="SD">South Dakota
<option value="TN">Tennessee
<option value="TX">Texas
<option value="UT">Utah
<option value="VT">Vermont
<option value="VA">Virginia
<option value="WA">Washington
<option value="WV">West Virginia
<option value="WI">Wisconsin
<option value="WY">Wyoming </option>
</select>
</div></td>
<td>&nbsp;</td>
</tr>
<tr>
<td align="RIGHT"><span class="regular">&nbsp; Zip:</span></td>
<td colspan="2" align="RIGHT" nowrap><div align="left">
<input name="zip" type="text" id="zip" size="6" maxlength="8">
</div></td>
<td>&nbsp;</td>
</tr>

myles

5:32 am on Apr 28, 2004 (gmt 0)

10+ Year Member




//continuation...
<tr>
<td align="RIGHT">
<p class="regular">Phone :&nbsp;</p>
</td>
<td colspan="2" align="RIGHT" nowrap><div align="left">
<input name="phone_c" type="TEXT" id="phone_c4" size="4" maxlength="4">
-
<input name="phone_a" type="TEXT" id="phone_a3" size="4" maxlength="4">
-
<input type="TEXT" name="phone_num" size="7" maxlength="7">
</div></td>
<td>&nbsp;</td>

</tr>
<tr>
<td align="RIGHT"><span class="regular">E-Mail Address:</span></td>
<td colspan="2" align="RIGHT">
<div align="left">
<input type="TEXT" name="email" size="20" maxlength="50">
</div></td>
<td>&nbsp;</td>

</tr>
<tr>
<td align="RIGHT">
<p class="regular">Age :&nbsp;</p>
</td>
<td colspan="2" align="RIGHT"><div align="left">
<input type="TEXT" name="age" size="2" maxlength="2">
</div></td>
<td>&nbsp;</td>

</tr>
<tr>
<td align="RIGHT" valign="TOP" bgcolor="#FFFFFF"><div align="center" class="style9"><label><span class="style15"><strong>Tell us &nbsp;your story!</strong></span></label>
</div></td>
<td width="8" align="RIGHT" valign="TOP" bgcolor="#FFFFFF">&nbsp;</td>
<td width="85" align="RIGHT" valign="TOP" bgcolor="#FFFFFF">&nbsp;</td>
<td align="RIGHT" valign="TOP" bgcolor="#FFFFFF">&nbsp;</td>

</tr>
<tr>
<td colspan="3" align="RIGHT" valign="TOP">
<p align="center" class="regular">Before:</p>
<p align="left" class="regular">
<textarea name="story_before" cols="40" rows="10" wrap="Virtual" id="story_before"></textarea>
</p> </td>
<td align="right" VALIGN = "top"><p align="center" class="regular">
After:
</p>
<p align="left" class="regular">
<textarea name="story_after" rows="10" cols="40" wrap="VIRTUAL"></textarea>
</p> </td>
</tr>
<tr>
<td height="86" colspan="3" align="left"><div align="left"></div> <table width="72%" height="51%" border="0">
<tr>
<th width="100%" height="46%" scope="col">Image Before </th>
</tr>
<tr>
<td height="42"><input type="hidden" name="MAX_FILE_SIZE1" value="30000" />
<input type="file" name="imgfile">&nbsp;
</td>
</tr>
</table>
<div align="left"></div>
<div align="center">
</div></td>
<td height="86" align="left"><table width="276" border="0">
<tr>
<th width="257" scope="col">Image After </th>
</tr>
<tr>
<td><input type="hidden" name="MAX_FILE_SIZE2" value="30000" />
<input name="userfile" type="file" />
</td>
</tr>
</table></td>

</tr>
<tr bgcolor="#FFF3DE">
<td height="25" colspan="4" align="RIGHT">&nbsp;</td>

</tr>
<tr>
<td height="46" colspan="3" align="left" valign="baseline">
<div align="right">
<input name="submit" type="submit" id="submit" value="Submit">
</div></td><td height="46" align="left" valign="baseline"><input name="reset" type="reset" id="reset" value="Reset Form"></td>

</tr>
</table>

</form> </TD>
</TR>
<TR>
<TD><IMG height=5 alt="" src="Welcome to Ronco_com_files/spacer.gif"
width=5 border=0></TD></TR>
<TR>
<TD bgColor=#970c0c height=2><IMG height=2 alt=""
src="Welcome to Ronco_com_files/spacer.gif" width=2 border=0></TD></TR><td height="21"></TABLE></TD><!-- body End --></TR>
<TR>
<TD bgColor=#ffffff colSpan=2 height="100%"><!-- footer -->
<!-- footer --></TD>
</TR></TBODY></TABLE><MAP
name=buyNow><AREA shape=RECT alt="" coords=245,155,326,178
href="http://www.ronco.com/products/rotisserie_std.di4"></MAP></BODY></HTML>

and here is the code for the filter:this should be placed on the head of the above file. but i got errors please try it.
-----------------------------------
extArray = new Array(".gif", ".jpg", ".png");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\")!= -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("Please only upload files that end in types: "
+ (extArray.join(" ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
___________________________________________________

this should be fixed. please try to do and help me. im stuck up because of this...im no javascript programmer. im php but i want to lessen load to my server and to simplify things.