Custom Upload Button Preventing Form Submit

[MBM]

I’m using a javascript to style the default upload button. When I click a submit button to store the image it does not submit. If I use the standard upload button however the image submits. I’m guessing this has something to do with the javascript?

I don’t want the image to automatically submit when pressing upload as I have the upload inside a form and am running validation (php) on form field inputs.

Javascript

<script type="text/javascript">
 function getFile(){
   document.getElementById("upfile").click();

 }
 function sub(obj){
    var file = obj.value;
    var fileName = file.split("\\");
    document.getElementById("uploadimgbtn").innerHTML = fileName[fileName.length-1];
    document.myForm.submit();
    event.preventDefault();
}
</script>

HTML

<div><p>Upload Image</p></div>
<div style='height: 0px;width: 0px;overflow:hidden'>&lt;input id="upfile" type="file" name="file" onchange="sub(this)"/&gt;</div>

CSS

.uploadimgbtn {
font-family:'Voltaire', sans-serif;
font-size:20px;
text-transform:uppercase;
background-color:#333333;
color:#ffffff;
border-width:1px;
border-color:#8C1717;
padding:3px 20px 2px 25px;
position:absolute;
height:44px;
width:120px;
margin-left:800px;
margin-top:-70px;
cursor: default;
}

.submitcbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
text-transform:uppercase;
background-color:#8C1717;
color:#ffffff;
padding:2px 10px 2px 10px;
position:absolute;
height:49px;
width:120px;
margin-left:617px;
margin-top:-70px;
}

[MBM]

Thanks. I removed it, still doesn’t work.

[Author]

Posts