Don't show the #loading if the is empty

Question

Demo - jsfiddle.net/75CqW/

When someone clicks the Submit button, it shows the loading div even if the input is empty.

I don't want the user to see the #loading if he didn't write anything in the input, I've tried to add "required" in the input but the #loading is still showing when the input is empty. What do you think is wrong with my loading div? Thanks in advance.

score 3 · Accepted Answer · answered Jan 21 '14 at 00:59

Instead of click handler use submit handler for the form - the form validation are triggered on form submit not on submit button click

$(function () {
    $("#myform").submit(function () {
        $("#controller").hide();
        $("#loading").show();
    });
});

Demo: Fiddle

Note: You might want to prevent the default action of submit event so that the default form submit is prevented - if you are using ajax to do server side processing

score 1 · Answer 2 · answered Jan 21 '14 at 00:59

1

try this

var id = $("#statusid").val();
if (id.length == 0)
{
    return false;
}

answered Jan 21 '14 at 00:59

Scary Wombat

44,617
6
35
64

Hi, this script doesn't show the loading div, it starts the action of the form right away. Thank you :) – user3213765 Jan 21 '14 at 01:03
If you are wanting to have the loading image wait until a response from the server comes try using ajax and then hide the image on success. – Scary Wombat Jan 21 '14 at 01:05

score 1 · Answer 3 · answered Jan 21 '14 at 01:03

1

You need to test for a value (or run a validation check) on the field(s) before firing off the processing code

$(function() {
    $(".submit").click(function() {
        if $('#statusid').val() {
            $("#controller").hide();
            $( "#loading" ).show();
        }
    });
});

answered Jan 21 '14 at 01:03

DanJGer

514
3
4

Hi, this script doesn't show the loading div, it starts the action of the form right away just like user2310289's – user3213765 Jan 21 '14 at 01:05
The loading DIV wont show unless you change this to an ajax query since your page will always get replaced, loading div and all with a typical form submission. There are easy ways to serialize a form using jquery. jquery docs http://api.jquery.com/serialize/ http://stackoverflow.com/questions/10398783/jquery-form-serialize-and-other-parameters – DanJGer Jan 21 '14 at 01:59

Don't show the #loading if the is empty

3 Answers3