JavaScript Form validator will not work ..

[spacepoet]

Hi:

 

I am having an issue with 2 brackets in the name of the FILE INPUT filed used to upload a photo.

 

Basically, my JavaScript form validation will not work unless they are removed, and if they are then the photo will not upload.

 

Anyone know a trick around this?

 

This is the code:

<script language="JavaScript">

function validate_form()
{
    valid = true;
    
    if ( document.upload_form.photo_filename[].value == "" )
    {

        alert ( "Please add a photo." );
        valid = false;
    }
    
    return valid;
}

</script>



<?php
// initialization
$photo_upload_fields = "";
$counter = 1;

// default number of fields
$number_of_fields = 1; 

// If you want more fields, then the call to this page should be like, 
// preupload.php?number_of_fields=20

if( $_GET['number_of_fields'] )
$number_of_fields = (int)($_GET['number_of_fields']);

// Firstly Lets build the Category List

$result = mysql_query( "SELECT category_id,category_name FROM gallery_category" );
while( $row = mysql_fetch_array( $result ) )
{
$photo_category_list .=<<<__HTML_END
<option value="$row[0]">$row[1]</option>\n
__HTML_END;
}
mysql_free_result( $result );	

// Lets build the Photo Uploading fields
while( $counter <= $number_of_fields )
{
$photo_upload_fields .=<<<__HTML_END
<tr>
<td>
  Photo:
<td>     
    <input name='photo_filename[]' type='file' />
</td>
</tr>
<tr>
<td>
     Caption:
</td>
<td>
    <textarea name='photo_caption[]' cols='50' rows='1'></textarea>
</td>
</tr>
__HTML_END;
$counter++;
}

// Final Output
echo <<<__HTML_END
<form enctype="multipart/form-data" action="upload.php" method="post" name="upload_form" onsubmit="return validate_form();">
<table width='600' border='0' id='tablepadding' align='center'>
<tr>
<td width='100'>
	Select Category
</td>
<td width='500'>
	<select name='category'>
		$photo_category_list
	</select>
</td>
</tr>

<!-Insert the photo fields here -->
$photo_upload_fields

<tr>
<td>
        <input type='submit' name='submit' value='Add Photo' />
</td>
</tr>
</table>
</form>
__HTML_END;
?>

 

 

It's this area where I can't figure out how to revise it:

<tr>
<td>
  Photo:
<td>     
    <input name='photo_filename[]' type='file' />
</td>
</tr>

 

The [] after photo_filename are causing the issue.

 

???

 

[nogray]

Add an id to your file input field

<input name='photo_filename[]' type='file' id='my_photo' />

and use document.getElementById()

if (document.getElementById('my_photo').value == "") { ...

[spacepoet]

Most excellent!

 

Thanks for that tip - so simple yet a get workaround.

 

Much appreciated!

[Adam]

Square brackets within an input's name creates an array... are you wanting to validate multiple file inputs here? If so then using an ID is not the way to go, as they should be unique. Also if you set the ID the same for each, only the last element with the ID will be validated.

[spacepoet]

Hi there:

 

No, I am only trying to check if the file field is empty (for submitting a photo to the photo gallery).

 

If it is empty, then the JS Alert should activate, which it now does.

 

Thanks.

[Adam]

Fair enough. How come you're setting the input as an array then, out of curiosity..?

 

<input name='photo_filename[]' type='file' />

[spacepoet]

Well, I got the code from a tutorial ...

 

There is an option to revise the code and upload multiple photos, so I assume that's why it's an array ..