• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 464
  • 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
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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