First of all thanks for your initial reply, james438. I wonder why the link didn't work on your computer. It does work on my computer. However the related page URL is http://www.ehyeh.com/validatedformtest3.html. And the following is the form page code.
Code:
<html>
<head>
<title>Submit Form</title>
<script language="javascript">
<!--
fields = 0;
images = new Array();
image_title = new Array();
function addInput() {
if (fields != 3) {
var htmlText = "<input type='file' name='images' id='fields' value='' ACCEPT='filetype/*' />";
var deleteField = "<a style='cursor:pointer;color:yellow;' onclick='this.parentNode.parentNode.removeChild(this.parentNode), fields -=1;'> X</a><br />"
var imageTitle = "Title of the photo/image if any<input type='text' name='image_title' id='fields' value='' size='35' /><br /><br />";
var stringConcatenated = htmlText + deleteField + imageTitle;
var newElement = document.createElement('div');
newElement.id = ''; // Give the DIV an ID, if you need to reference it later...
newElement.innerHTML = stringConcatenated;
var fieldsArea = document.getElementById('files_list');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 3 upload fields allowed.");
document.form.add.disabled=true;
}
}
//-->
</script>
</head>
<body background="bg1.gif">
<table width="500px" align="center">
<tr><td bgcolor="#333"> <!-- I tested with '<tr width="500px" align="center">' eliminating table tags, but the result was same as before -->
<form action="process-form-data-post.php" method="post" enctype="multipart/form-data" name="wordcount" id="myform" class="cols">
<h4>We strictly don't use the input data for other purposes.</h4>
<fieldset><font=+2>
<label> First name * </label><input type="text" name="first_name" id="first_name" required="required" maxlength="25" />
<label> Last name * </label><input type="text" name="last_name" id="last_name" required="required" maxlength="25" />
</fieldset>
<fieldset>
<label> E-mail address * </label><input type="email" name="e_list" id="e_list" required="required" maxlength="70" />
<label> Living City </label><input type="text" name="livingcity" id="livingcity" maxlength="25" />
</fieldset>
<fieldset>
<label> Message * Maxlength : 5000 words </label><input type="button" value="Click to Check Words Length" onClick="countit()"> <input type="text" name="wordcount3" size="5">
<textarea rows=15 cols=59 name="message" id="message" wrap="physical" required="required" maxlength="10000" />Under construction.</textarea> <p>
<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
<input type="button" name="imagesubmit" onclick="addInput()" value="Attaching file/photo(s)" />
<div id="files_list"></div>
<script>
<!-- Create an instance of the multiSelector class, pass it the output target and the max number of files -->
var multi_selector = new MultiSelector( document.getElementById( 'files_list' ), 30 );
<!-- Pass in the file element -->
multi_selector.addElement( document.getElementById( 'my_file_element' ) );
</script>
</font>
</fieldset>
<fieldset>
<label> <a href="javascript:OpenWindow('spellcheck2.html','344','285')">SPELL CHECK</a></label>
</fieldset>
<div class="clear"></div>
<button type="submit" name="s1" id="s1">Submit form</button>
<button type="button" class="close" onclick="history.back();"> Cancel/Back </button>
</form>
</td></tr>
</table>
</body>
</html>
And the following is the processing form data php code.
PHP Code:
<?php
// Connecting to the MySQL server
$db = mysql_connect("host", "username", "password");
if (!$db)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("databasename",$db) or die(mysql_error());
// Inserting these values into the MySQL table
$_POST[message] = mysql_real_escape_string($_POST[message]);
$_POST[first_name] = mysql_real_escape_string($_POST[first_name]);
$_POST[last_name] = mysql_real_escape_string($_POST[last_name]);
$_POST[livingcity] = mysql_real_escape_string($_POST[livingcity]);
$uploadDir = '/directory/path/';
/*
if(count($_POST['images']))
{
$len = count($_POST['images']);
for ($i=0; $i < $len; $i++)
{
$images = $_POST['images'][$i];
$image_title = $_POST['image_title'][$i];
}
}
*/
if(isset($_POST['s1']))
{
if($images) {
$fileName = $_FILES['images']['name'];
$tmpName = $_FILES['images']['tmp_name'];
$filePath = $uploadDir . $fileName;
$result = move_uploaded_file($tmpName, $filePath);
if (!$result) {
echo "Error uploading file";
exit;
}
if(!get_magic_quotes_gpc())
{
$filePath = addslashes($filePath);
}
}
}
foreach ($filePath as $v1) {
// foreach ($v1 as $v2) {
$query = "INSERT INTO databasename (path) VALUES ('$filePath')";
}
//}
//$filePath = serialize($filePath); $filePath = implode(',',$filePath);
$image_title = mysql_real_escape_string($image_title); //$_POST[image_title]
$image_title = serialize($image_title);
//$image_title = implode(',',$image_title); 'Invalid arguments passed' error message was produced
//$image_title = join(" ",$image_title); also 'Invalid arguments passed' error message was produced
$query = "INSERT INTO databasename (first_name, last_name, e_list, livingcity, message, image_title, submit_date, path) VALUES ('$_POST[first_name]', '$_POST[last_name]', '$_POST[e_list]', '$_POST[livingcity]', '$_POST[message]', '$image_title', NOW(), '$filePath')";
$result = mysql_query($query,$db);
if (!$result){
die('Error: ' . mysql_error());
}
echo <<<_END
<html>
<head>
<title>Processing Form Data</title>
<!-- include the Tools -->
<script src="/jquery.tools.min.js"></script>
<!-- same styling as in minimal setup -->
<link rel="stylesheet" type="text/css" href="/form.css"/>
<!-- override it to have a columned layout -->
<link rel="stylesheet" type="text/css" href="/columns.css"/>
</head>
<body background="bg1.gif" link="white">
<table align="center">
<tr><td> </td></tr><tr><td> </td></tr>
</table>
<table id="myform" class="cols" align="center">
<tr><td> </td></tr>
<tr><td align="center">
<h2>Thank you for submitting your inputs !</h2>
</td></tr>
<tr><td> </td></tr>
<tr><td align="center"><font size="+1"><a href="http://www.ehyeh.com">Back to Home Page</a></font></td></tr><tr><td> </td></tr>
</table>
</body>
</html>
_END;
mysql_close($db);
?>
And the following is a screenshot of the database table. Only the last item which I input 'a' in the field of 'image_title' was inserted into the database. (I have tested the for loop and foreach loop with 'image_title'.)

Could it be the problem of the inconsistency of the use of the array in the javascript and the php script ?
Thanks.
Bookmarks