• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

jquery to notify of file upload

Hello, I am trying to write a small jquery script which will display a message if they choose to upload a file.

1. i have 2 file upload fields, if neither has a value then do nothing, else display a message in a div

I understand the page is being reposted and this could be why this isnt working, it is wordpress as well which explains my weird hidden action field



<div class="message"></div>

<form method="post" name="form1" id="form1" enctype="multipart/form-data">
<input type="file" name="logo" />
<input type="file" name="logotwo" />

<input type="hidden" name="action" value="form1" />
<input type=hidden name=MAX_FILE_SIZE value=419430400>
<input type="hidden" name="MM_update" value="form1" />
<input type="hidden" name="order_id" value="1" />
</form>
 
 <script>
   $("form1").submit(function() {
      if (  ($("input:logo").is(":empty"))  &&   ($("input:logotwo").is(":empty"))   ) {
     
      
        } else {
             $("div.message").text("Image uploading...").show();  
                return true;
        }
     
    });
</script>
0
jblayney
Asked:
jblayney
1 Solution
 
BardobraveCommented:
You have forgotten to add "#" to your form reference.

$("#form1").submit(function () {
    whatever
}

Your submission function is never being fired.
0
 
Julian HansenCommented:
You also need to add a return false to your submit function to prevent the submit on error
$("#form1").submit(function() {
      if (  ($("input:logo").is(":empty"))  &&   ($("input:logotwo").is(":empty"))   ) {
     
        // Or return false; here - I prefer having a return at the end of the function though
        } else {
             $("div.message").text("Image uploading...").show();  
                return true;
        }
        return false;
    })

Open in new window

0
 
leakim971PluritechnicianCommented:
Check this plugin, it allow you to upload files without reloading your page :
http://www.malsup.com/jquery/form/
Check examples (right click, view source) :
http://www.malsup.com/jquery/form/#file-upload

<script src="js/jquery.form.js"></script>
<script type="text/javascript">
	$("form1").ajaxForm({
		beforeSubmit: function(arr, $form, options) { 
			if($("input[name='logo']").val().length + $("input[name='logotwo']").val().length>0)
				$("div.message").text("Image uploading...").show(); 
			else
				return false;
		}
	});
</script>

Open in new window


Check this too : http://www.quillstudios.com.au/recent-work/customizing-gravity-forms-adding-jquery-form-validation-and-upload-indicator
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
jblayneyAuthor Commented:
thanks everyone,

im not ready to rewrite my form yet as it also has a lot more going on leakim.

Julian and Bard, I added those changes and it still doesn't work, can you see anythign else?
0
 
Julian HansenCommented:
Yes - did not see this before but your JQuery is wrong
  $("#form1").submit(function() {
    if ($("input[name='logo']").val() == '' &&  $("input[name='logotwo']").val() == '') {
      $("div.message").text("please enter a value...");  
    } else {
      $("div.message").text("Image uploading...").show();  
      return true;
    }
    return false;
  })

Open in new window

Full test code here
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $("#form1").submit(function() {
    if ($("input[name='logo']").val() == '' &&  $("input[name='logotwo']").val() == '') {
      $("div.message").text("please enter a value...");  
    } else {
      $("div.message").text("Image uploading...").show();  
      return true;
    }
    return false;
  })
});
</script>
</head>
<body>
<div class="message"></div>
<form method="post" name="form1" id="form1" enctype="multipart/form-data">
  <input type="file" name="logo" />
  <input type="file" name="logotwo" />
  <input type="hidden" name="action" value="form1" />
  <input type=hidden name=MAX_FILE_SIZE value=419430400>
  <input type="hidden" name="MM_update" value="form1" />
  <input type="hidden" name="order_id" value="1" />
  <input type="submit" />
</form>
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
>im not ready to rewrite my form yet as it also has a lot more going on leakim.

you don't need to rewrite your form...
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now