PHP Stop Form Reload Show Error Js

Question

I want to show my error if 'fileToUpload' is empty (show error with js) and stop reloading page if 'fileToUpload' is empty

<form method="post" enctype="multipart/form-data">
    Select image to upload:
    <input type="file" name="fileToUpload" id="fileToUpload">
    <input class='new_post' type="submit" value="Upload Image" name="submit">
</form>

$('.new_post').click(function() {
    var get_photo = $('#fileToUpload').get(0).files.length;

    // If 0 file show error 
    if (get_photo == 0) {
        openandclose('.error_box' , 'emptyyyy.', 1700);
        $('.error_box').focus();
        return false;
    }
});

So, what is your problem ? Test it to know if it works. I advise you to use the submit event on form instead of click on button. But you are starting right, if you want we help you more, post a jsfiddle please. — Loenix, Jul 24 '16 at 07:14
Could you specify the issue. bcoz i ran your code in the code-runner in my answer and it worked, and that is why I deleted my answer. I'm undeleting for your reference. Pls specify your problem. — Iceman, Jul 24 '16 at 17:40

score 0 · Accepted Answer · answered Jul 24 '16 at 07:25

Add an id to your form like this <form method="post" enctype="multipart/form-data" id="myform"> and in your javascript attach the checking function as callback to the form submit event rather than button click event like $('#myform').submit().

$('#myform').submit(function() {
  var get_photo = $('#fileToUpload').get(0).files.length;
  // If 0 file show error 
  if (get_photo == 0) {
    /*
    openandclose('.error_box', 'emptyyyy.', 1700);
    $('.error_box').focus();
    */
    alert("EMPTY!!");
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="myform">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input class='new_post' type="submit" value="Upload Image" name="submit">
</form>

However, I think there is no error in OP's code either and should work. This is just a recommendation answer (thats why i had deleted it earlier) — Iceman, Jul 24 '16 at 17:42

score 0 · Answer 2 · answered Jul 24 '16 at 07:39

This code might help you out.Upon clicking the button it checks for whether file is selected or not , and return True/False Accordingly.

<form method="post" enctype="multipart/form-data" onsubmit="return funccheck();"> 
Select image to upload:
 <input type="file" name="fileToUpload" id="fileToUpload"> 
<input class='new_post' type="submit" value="Upload Image" name="submit"> </form>
<script>
 function funccheck() { 
var get_photo = $('#fileToUpload').get(0).files.length; 
// If 0 file show error 
if (get_photo == 0) { 
 openandclose('.error_box' , 'emptyyyy.', 1700); 
 $('.error_box').focus();
 return false; //stops page loading
 }
return true; // initiates page loading
});
</script>

score 0 · Answer 3 · answered Jul 24 '16 at 08:06

0

Try this:

$('.new_post').click(function(e) { var get_photo = $('#fileToUpload').get(0).files.length; // If 0 file show error if (get_photo == 0) { openandclose('.error_box' , 'emptyyyy.', 1700); $('.error_box').focus(); e.preventDefault(); return false; } });

The variable e is the event, the function preventDefault will stop the form from submitting if there is no file.

answered Jul 24 '16 at 08:06

Florian Humblot

1,121
11
29

return false in a jquery event callback does the same as preventDefault, so this addition isnt required. – Iceman Jul 24 '16 at 17:38
Noy necessarily, I've witnessed some weird bugs where this was necessary and it's also the "right" way to do it – Florian Humblot Jul 24 '16 at 18:08
actually jquery makes the call internally to `e.preventDefault` and `e.stopPropagation`. You can follow the jquery team mailing list archive -> THE RIGHT WAY TO STOP, as well as refer this SO: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false . This said, I'd be really interested if you could replicate such a scenario where the `return false` fails. :D – Iceman Jul 24 '16 at 18:15
btw: the mail from jquery creator John Resig himself : http://www.mail-archive.com/jquery-en@googlegroups.com/msg71371.html – Iceman Jul 24 '16 at 18:18
My bad, what I was taught was to use the prevent default function, but I stand corrected – Florian Humblot Jul 24 '16 at 18:49
1

Thanks for telling me – Florian Humblot Jul 24 '16 at 18:49
my pleasure, m8. Btw :) funny thing: I also didnt know this for very long and many still don't. :D – Iceman Jul 24 '16 at 18:55

PHP Stop Form Reload Show Error Js

3 Answers3