Jump to content

Javascript Form Submit


phpSensei

Recommended Posts

I have used document.myform.submit() which works fine with sending across form field datas, except for file fields. I am creating an AJAX FILE upload, and there seems to be an issue trying to get the file across.

 

Here is the script

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload Stuff</title>
<script language="javascript" type="text/javascript">


function getAttr(){

var type_valid = false;
var size_valid = false;  
var upload_file = document.uploadForm.upload_file;
var upload_name = document.uploadForm.upload_name;
var terms_agreement = document.uploadForm.is_agreed;
var private_upload = document.uploadForm.is_private;

   if(upload_file.value != null || upload_file.value != ''){ upload_file.disabled = "disabled"; document.getElementById('loading_div').style.display = ''; 
   
   
   document.uploadForm.action = 'upload.php';
   document.uploadForm.submit(); }
  
}
function loadAtrr(success,type,size){

var type_valid = false;
var size_valid = false;  
var upload_file = document.uploadForm.upload_file;
var upload_name = document.uploadForm.upload_name;
var terms_agreement = document.uploadForm.is_agreed;
var private_upload = document.uploadForm.is_private;
  alert(type);
    if(success == 1){
  
  upload_file.disabled = "";
  document.getElementById('loading_div').style.display = 'none';
  document.getElementById('upload_type').innerHTML = ' '+type;
  

  }

}
</script>
<style type="text/css">
<!--
body {
background-color: #DEDDBA;
background-image: url(images/bg.png);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.border_layout {
background-color: #F4F4EA;
border: 1px solid #000000;
}
.style2 {
font-size: 36px;
font-family: Arial, Helvetica, sans-serif;
}
.style3 {
color: #A6A657;
font-weight: bold;
}
.style5 {color: #393924}
.textfield {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #393924;
margin: 5px;
padding: 5px;
border: 1px solid #C9C998;
}
.style6 {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #393924;
}
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
.style38 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style41 {font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #5C5C3A; }
.style44 {font-family: Arial, Helvetica, sans-serif; color: #5C5C3A; font-size: 12px;}
.style46 {font-family: Arial, Helvetica, sans-serif; color: #5C5C3A; font-size: 14px; }
-->
</style>
</head>
<body>
<br />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" class="style2"><span class="style5">Upload</span><span class="style3">Things</span></td>
  </tr>
  <tr>
    <td align="center" class="style6">A place for upload things - version <strong>1.0  </strong></td>
  </tr>
</table>
<br />
<table width="45%" border="0" align="center" cellpadding="0" cellspacing="0" class="border_layout">
  <tr>
    <td height="484" valign="top"><table width="100%" border="0" cellspacing="3" cellpadding="3">
      <tr>
        <td width="16%" align="center" bgcolor="#E4E4CB" class="style9">Upload</td>
        <td width="16%" align="center" bgcolor="#EAEAD7"><span class="style9">Account</span></td>
        <td width="16%" align="center" bgcolor="#EAEAD7"><span class="style9">Search</span></td>
        <td width="16%" align="center" bgcolor="#EAEAD7"><span class="style9">Skins</span></td>
        <td width="16%" align="center" bgcolor="#EAEAD7"><span class="style9">Options</span></td>
        <td width="16%" align="center" bgcolor="#EAEAD7"><span class="style9">About</span></td>
      </tr>
      
      <tr>
        <td height="25" colspan="6" align="center" valign="top"><form  method="post" enctype="multipart/form-data" name="uploadForm" target="upload_target" id="uploadForm">
          <table width="92%" border="0" cellspacing="3" cellpadding="0">
            <tr>
              <td width="22%" height="19" align="left" valign="middle"><span class="style41">Select a File: </span></td>
              <td width="78%" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="66%"><input name="upload_file" type="file" onchange="getAttr();" class="textfield" id="upload_file" size="30" /></td>
                  <td width="34%"><div id="loading_div" style="display:none;"><img src="images/loader.gif" width="16" height="16" /></div></td>
                </tr>
              </table> </td>
            </tr>
            <tr>
              <td height="19" align="left" valign="middle"><span class="style41">Choose <span class="style38">n</span>ame:</span></td>
              <td align="left"><input name="upload_name" type="text" class="textfield" id="upload_name" value="No Title Specified" size="40" /></td>
            </tr>
            <tr>
              <td height="33" align="left" valign="middle"><span class="style41">Size:</span></td>
              <td align="left"><span class="style46">
                <div id="upload_size"> 0 kb (chose file) </div>
              </span></td>
            </tr>
            <tr>
              <td height="33" align="left" valign="middle"><span class="style41">Type:</span></td>
              <td align="left"><span class="style46">
                <div id="upload_type"> N/A (chose file) </div>
              </span></td>
            </tr>
            <tr>
              <td align="left" valign="top"><span class="style41">Terms of Use: </span></td>
              <td align="left"><div class="style46" style=" border:1px solid #C9C998; height:10em; overflow:scroll;">
                  <table width="100%" border="0" cellspacing="3" cellpadding="0">
                    <tr>
                      <td>Photobucket, Inc. ("Photobucket" or "we") operates Photobucket.com (the "Site"), which is a content hosting and sharing service that allows Users (as defined in the following paragraph) to store images and videos and share them across the internet and create unique personal profiles online. The services offered by Photobucket include the Site, content (including, without limitation, images, video and accompanying audio) hosting and sharing on the Site and third party sites, applications and services, content editors, links to partner providers, printing and other photographic merchandise, Photobucket APIs, and any other features, content, mobile services, Photobucket branded URLs or applications offered from time to time by Photobucket in connection with Photobucket’s business (collectively, the "Photobucket Services"). The Photobucket Services are hosted in the United States. </td>
                    </tr>
                  </table>
              </div></td>
            </tr>
            <tr>
              <td height="68" align="left" valign="middle"> </td>
              <td align="left" valign="middle" class="style44"><label>
                <input name="is_agreed" type="checkbox" class="textfield" id="is_agreed" value="true" />
                </label>
                  <strong>Do you agree with the TOU? </strong>
                  <label><br />
                  <input name="is_private" type="checkbox" class="textfield" id="is_private" value="true" />
                  </label>
                  <strong>Private Upload? </strong></td>
            </tr>
            <tr>
              <td height="52" align="left" valign="middle"> </td>
              <td align="left" valign="top" class="style44"><label>
                <input name="Button" type="Submit" class="textfield" disabled="disabled"  value="Upload my file" />
              </label></td>
            </tr>
          </table>
                </form>
        </td>
      </tr>
    </table></td>
  </tr>
</table>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</body>
</html>

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.

×
×
  • 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.