Disable submit when inputs are empty

Question

This is my code. I have tried multiple other methods posted using jquert, but I must have not been writing it correctly. I'm not sure how to apply this to my code. But the second submit button needs to be disabled when the inputs are not filled out.

if I may , can you try not nesting forms, as it is considered a bad practice — Satya, Jul 20 '16 at 00:54
Possible duplicate of [Disable submit if inputs empty jquery](http://stackoverflow.com/questions/9671918/disable-submit-if-inputs-empty-jquery) — , Jul 20 '16 at 05:22

Louys Patrice Bessette · Accepted Answer · 2016-07-20T05:29:54.327

0

I changed your "second" button type for button instead of sumbit.
And I removed the attribute disabled.

You need to perform an check on all inputs which resutl will decide if the form has to be submitted or not.

    <input type="hidden" name="submit" value="Submit">
    <input type="button" id="button" value="Submit">
  </form>
  <script>
  $("#button").click(function(){
    var flag=true;

    // check all input values
    $("input[type='text']").each(function(){
        if( $(this).val()=="" ){
            flag=false;
        }
    });

    // submit the form
    if(flag){
        $("form#input").submit()
    }else{
        // You should do something here.
        alert("Please fill all inputs!");
    }
  });
  </script>

You should think of what to do if flag is false...
Like something to inform the user he has to fill all inputs.

Note: Load the jQuery library in your head to make it work.

Comment on your "naming"...
That may be confusing to use names, classes or ids with input or button.
Try to use descriptive words that are not the same as methods or HTML tags.
;)

edited Jul 20 '16 at 05:29

answered Jul 20 '16 at 01:24

Louys Patrice Bessette

33,375
6
36
64

http://pastebin.com/R5fYUS9t I tried to add your code, did I do something wrong because it's not working... – KidMessiah Jul 20 '16 at 02:49
I edited my answer with an example of what you could do. `alert()` is a JavaScript function to trigger an alert box. There are various ways to inform the user on errors... Depending on what you want to do. `alert()` is the easyiest... A nicer alert can be achieved with [SweetAlert](http://t4t5.github.io/sweetalert/). – Louys Patrice Bessette Jul 20 '16 at 03:43
At the top of the page I am checking to see if the data has been submitted and if it does it shows the data. But now the button does not show the data after submitting. Nor does it get printed to XML. But once I remove your code it works again. Not sure why this occurs. – KidMessiah Jul 20 '16 at 05:04
Sorry I don't quite understand. Can you please explain in further detail where I am meant to put that line? – KidMessiah Jul 20 '16 at 05:22
Sorry... I'm getting tired I think. Check for the first line of my edited answer. Just add it. – Louys Patrice Bessette Jul 20 '16 at 05:27
I added your edited code once more, but now the button doesn't work once all the inputs are filled, the code above does not execute. Sorry if this is frustrating. I can wait for another answer if :) – KidMessiah Jul 20 '16 at 05:28
I edited again... This new selector is more precise : `$("input[type='text']")` – Louys Patrice Bessette Jul 20 '16 at 05:30

score 0 · Answer 2 · answered Jul 20 '16 at 05:04

0

use JQuery Function

$('form').submit(function(e){
  var i=Number(0);
  $('input').each(function(){
    if($(this).val() == '')
      i++;
  });

 if(i>0)
  {
    e.preventDefault();
  }
});

answered Jul 20 '16 at 05:04

Zigri2612

2,279
21
33

Disable submit when inputs are empty

2 Answers2