Jump to content

Javascript, Ajax, Iframes, File Upload, form submission functions, PHP... - HELP

radar

By radar
in Javascript Help

 Share

Recommended Posts

radar Regular Member

radar

Posted
Posted

Alright so this might be in the wrong area.  If it is, please move it.

 

I am creating a custom script using PHP utilizing MySQL.  I also use the Smarty Templating engine to seperate my logic from my PHP only as I havent found another solution to this that allows for the custom programming..

 

Okay so in my PHP  I have a deals case, which involves a sub-switch for adding, editing, viewing, deleting different deals in the database.  At this point I am working on just being able to add them into the database.

 

I've done a fair ammount of searching the internet to find out that through AJAX calls you cannot realistically run the multipart/form-data enctype through it.  But because I wish to achieve the 'ajax' style of image uploading as the images are being added, but not submitting the rest of the form fields until the actual submit button has been placed I've come to the solution of using an iframe for that.

 

But in order for that to work I need to add in the multipart/form-data enctype on the form, which theoretically could damage the end ajax call linked to the submit button?

 

I just came up with another solution to this, but don't know if it will damage the initial onchange for the input pox, or damage the ajax call made in the onclick for the submit button itself (as the main form has no action)... 

 

the code I have come up with, is as follows:

 

deals_add.tpl:

<table width="865" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px #cecece solid; background-color:#ffffff; ">
	<tr>
		<td width="865">		
			<table width="865" height="47" align="center" border="0" cellpadding="0" cellspacing="0" style=" background-color:#eeeeee; border-bottom:1px #dddddd solid;" >

			<tr>
				<td width="17" height="15"></td>
				<td width="552" rowspan="3" align="left" valign="middle" class="bl_text1">ADD DEAL</td>
			  <td width="146" rowspan="3"></td>
			  <td width="150" rowspan="3" align="center" valign="middle"> </td>
			</tr>
			<tr>
				<td height="23"></td>

			</tr>
			<tr>
				<td height="15"></td>
			</tr>
			</table>				
		</td>
	</tr>		
	<tr>
	  <td width="865" height="230" align="left" valign="top" class="bl_text1"><p><br />
	    </p>
        <form id="form1" name="form1" method="post" action="">
          <table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td colspan="4" class="bl_text1"><blockquote>Customer Information:</blockquote></td>
                </tr>
            <tr>
              <td colspan="4" class="maintext"> </td>
                </tr>
            <tr>
              <td width="16%" class="maintext">First Name:</td>
              <td width="28%" class="maintext"><label>
                <input type="text" name="f_name" id="f_name" class="maintext"/>
                  </label></td>
              <td width="16%" class="maintext">Last Name:</td>
              <td width="40%" class="maintext"><label>
                <input type="text" name="l_name" id="l_name" class="maintext" />
                  </label></td>
                </tr>
            <tr>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td class="maintext">Email:</td>
              <td class="maintext"><input name="email" type="text" class="maintext" id="email" size="30"/></td>
              <td class="maintext">Website:</td>
              <td class="maintext"><input name="website" type="text" class="maintext" id="website" size="40" /></td>
                </tr>
            <tr>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td class="maintext">Phone:</td>
              <td class="maintext"><input name="phone" type="text" class="maintext" id="phone" size="10"/></td>
              <td class="maintext">Fax: </td>
              <td class="maintext"><input name="fax" type="text" class="maintext" id="fax" size="10"/></td>
                </tr>
            <tr>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td class="maintext">Address: </td>
              <td class="maintext"><input name="street" type="text" class="maintext" id="street" size="30"/></td>
              <td class="maintext">City, State, Zip: </td>
              <td class="maintext"><input name="city" type="text" class="maintext" id="city" size="10"/>
                ,
                    <input name="state" type="text" class="maintext" id="state" size="1"/> <input name="zip" type="text" class="maintext" id="zip" size="5"/></td>
                </tr>
            <tr>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td nowrap="nowrap" class="maintext">Business Name: </td>
              <td class="maintext"><input name="business" type="text" class="maintext" id="business" size="30"/></td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
              <td class="maintext"> </td>
                </tr>
            <tr>
              <td colspan="4" class="maintext"><blockquote class="bl_text1">Coupon Information:</blockquote></td>
                </tr>
            <tr>
              <td colspan="4" class="maintext"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="16%" class="maintext">Deal Title: </td>
                  <td width="84%"><input name="title" type="text" class="maintext" id="title" size="60"/></td>
                    </tr>
                    <form name="uploads" target="hiddenframe" enctype="multipart/form-data" action="upload.php">
                <tr>
                  <td class="maintext">Image Folder: </td>
                  <td class="maintext"><input name="image" type="text" class="maintext" id="image" size="30"/> 
                    <span class="red_text">*note: this is the folder images will be uploaded to.</span></td>
                    </tr>
                <tr>
                  <td class="maintext">Image Upload : </td>
                  <td class="maintext"><input type="file" name="filefieldname" id="fileField" onchange="document.uploads.submit()"/></td>
                    </tr>
                    </form>
                <tr>
                  <td class="maintext">Uploaded Files:</td>
                  <td id="uploadedfile" class="maintext"> </td>
                    </tr>
                <tr>
                  <td class="maintext"> </td>
                  <td class="maintext"> </td>
                    </tr>
                <tr>
                  <td class="maintext">Expiration Date:</td>
                  <td class="maintext">{html_select_date}</td>
                    </tr>
                <tr>
                  <td class="maintext">Minimum Quantity: </td>
                  <td class="maintext"><input name="minimum" type="text" class="maintext" id="minimum" size="2"/></td>
                    </tr>
                <tr>
                  <td class="maintext">Coupon Prefix: </td>
                  <td class="maintext"><input name="prefix" type="text" class="maintext" id="prefix" size="2" maxlength="3"/> 
                    <span class="red_text">*eg: BRT</span></td>
                    </tr>
                <tr>
                  <td class="maintext"> </td>
                  <td class="maintext"> </td>
                    </tr>
                <tr>
                  <td class="maintext">About Deal</td>
                  <td class="maintext"> </td>
                    </tr>
                <tr>
                  <td colspan="2" class="maintext"> </td>
                    </tr>
                <tr>
                  <td class="maintext"> </td>
                  <td class="maintext"> </td>
                    </tr>
                <tr>
                  <td class="maintext">Status: </td>
                  <td class="maintext"> </td>
                    </tr>
                  </table></td>
                </tr>
            <tr>
              <td colspan="4" class="maintext">  </td>
                </tr>
              </table>
        </form></td>
  </tr>
</table>
</td>
  </tr>
	</table>
<iframe name="hiddenframe" style="display:none" >Loading...</iframe>

 

 

I havent quite finished the form at all, as i've been stuck trying to figure out the best possible solution for this issue.

 

Ultimately, I'll be able to limit the ammount of image uploads to 8 but thats easy to do through the PHP and/or javascript in the upload.php.

 

In that code you'll notice I have my main form, form1, which contains everything.  But then around the Image Upload and Image Folder parts of the form, I have inserted another form, that has a target attached, and actually has an action then on the file upload field, it has the onchange added in.

 

Is this a suitable way of getting done what I need done, or is there a better alternative that I should be looking at?

 

If I use this method, what are the detrements to passing the rest of the form fields to AJAX through a POST method?

 

Any and all answers, questions, comments, and suggestions taken with enthusiasm and gratitude.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.