I've a PHP page which takes user inputs like first name, last name and also allows user to select & upload image, these details need to be saved to database. I'm uploading the image using ajax so that page is not refreshed. The upload works fine, but the save is not working, I guess this is because of the inner FORM tag? Can anyone please suggest how to make upload and save working in the same page? Below is my code:
<form name="frm1" id="frm1" method="post" action="product_db.php" enctype="multipart/form-data" onsubmit="return submitForm(this);">
<table width="100%" id="mem_det" >
<tr >
<td width="20%" style="font-style:italic;">Product ID</td>
<td width="40%">
<label style="font-style:normal;"><?php echo $lid; ?></label>
</td>
<input type="hidden" name="product_id" id="product_id" value="<?php echo $lid; ?>" />
<td> </td>
</tr>
</table>
<form id="vasPLUS_Programming_Blog_Form" method="post" enctype="multipart/form-data" action="javascript:void(0);" autocomplete="off">
<div>Browse Image:</div>
<input type="file" name="vasPhoto_uploads" id="vasPhoto_uploads">
</form>
<div>
<input type="submit" value="" style="background:url(img/save.png) right no-repeat;"/>
</div>
</form>
You cannot have one form inside another form.
Either use a single form, or move one of them outside the other.
And use a validator.
It's impossible to have form inside another form. In saving your image you can use the form but in saving data other than the image then you can use the jquery for that. Hope this help.