Enable the submit button only when all fields are filled

Question

In my form, I want to include the form only when all fields (and the list of radio buttons) have been selected.

So far, I have successfully made a submit button enablewhen the field titlehas content with:

onkeyup="if(this.textLength != 0) {subnewtopic.disabled = false} else {subnewtopic.disabled = true}"

My goal is to enable the submit button only once all . How to do it?

Here is my complete code with working jsfiddle :

            <form action="" method="post" id="subnewtopicform" />

                Title:
                <input type="text" name="title" onkeyup="if(this.textLength != 0) {subnewtopic.disabled = false} else {subnewtopic.disabled = true}">

<br/>

                Description:
                <textarea name="description"></textarea> 

<br/>
                Category:
<ul class="list:category categorychecklist form-no-clear" id="categorychecklist">

<li id="category-19"><label class="selectit"><input type="radio" id="in-category-19" name="category" value="19"> Animation</label></li>

<li id="category-20"><label class="selectit"><input type="radio" id="in-category-20" name="category" value="20"> Anime</label></li>

    </ul>

                <input type="submit" value="Submit Topic" class="button-primary" name="subnewtopic" id="subnewtopic" disabled="disabled" /> 

            </form>

Answer 1

Here is the fiddle for you. http://jsfiddle.net/soyn0xag/6/

$("input[type='text'], textarea").on("keyup", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

$("input[name='category']").on("change", function(){
    if($(this).val() != "" && $("textarea").val() != "" && $("input[name='category']").is(":checked") == true){
        $("input[type='submit']").removeAttr("disabled");
    } else {
        $("input[type='submit']").attr("disabled", "disabled");
    }
});

Answer 2

use the "required" command inside the tag.

. . . JSFiddle: http://jsfiddle.net/soyn0xag/3/

edit 2: JSfiddle , , . jquery, submit , , - : http://jsfiddle.net/soyn0xag/9/

, . , , .

edit 3 - Final Fix ​​, - : http://jsfiddle.net/soyn0xag/36/

, , .

:

<input type="radio" id="in-category-19" name="category" value="19" required> Animation</label>

, - .

Answer 3

required = function(fields) {
  var valid = true;
  fields.each(function () { // iterate all
    var $this = $(this);
    if (($this.is(':checkbox') && !$this.is(":checked")) || // checkbox
       (($this.is(':text') || $this.is('textarea')) && !$this.val()) || // text 
       ($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) {
            valid = false;
        }
    });
    return valid;
}

validateRealTime = function () {
    var fields = $("form :input:not(:hidden)"); // select required
    fields.on('keyup change keypress blur', function () {
        if (required(fields)) {
            {subnewtopic.disabled = false} // action if all valid
        } else {
            {subnewtopic.disabled = true} // action if not valid
        }
    });
}

http://jsfiddle.net/jsq7m8hL/2/

Answer 4

( , , ).

, , , , , , - - . , , . ( ).

:

function check() { // Define a function that we can call our event listeners with
    // Get our inputs and textareas
    var inputs = document.getElementsByTagName("input");
    var textareas = document.getElementsByTagName("textarea");
    var filled = true; // We'll assume that all of the fields are full unless proven otherwise
    var oneChecked = false; // We can use this to keep track of the radio buttons (by assuming at first that none are checked)

    for (var i = 0; i < inputs.length; i++) { // Loop through all of the inputs first
        if (inputs[i].type === "text" && !inputs[i].value) { // If the input is a text field, check whether it is empty; if so, set filled to false
            filled = false;
        }

        if (inputs[i].type === "radio" && inputs[i].checked) { // If the input is a radio button, see if it is filled in; because we only need one radio button to be filled in, that all we need to know
            oneChecked = true;
        }

    }

    if (!oneChecked) { // Check outside of the loop if any of our radio buttons were selected and, if not, set filled to false
        filled = false;
    }

    for (var j = 0; j < textareas.length; j++) { // Now loop through all of the text areas; if any aren't filled in, set filled to false
        if (!textareas[j].value) {
            filled = false;
        }
    }

    if (filled) { // Check whether any of the fields are empty (or, in the radio button case, if one is selected, and enable/disable the button accordingly
        document.getElementById("subnewtopic").disabled = false;
    } else {
        document.getElementById("subnewtopic").disabled = true;
    }
}

// Add event listeners to check for keypresses and clicks
window.addEventListener("keyup", check);
window.addEventListener("click", check);

Answer 5

: Live Demo Link

$(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });

   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

 $(document).on('change keyup', '.required', function(e){
   let Disabled = true;
    $(".required").each(function() {
      let value = this.value
      if ((value)&&(value.trim() !=''))
          {
            Disabled = false
          }else{
            Disabled = true
            return false
          }
    });
   
   if(Disabled){
        $('.toggle-disabled').prop("disabled", true);
      }else{
        $('.toggle-disabled').prop("disabled", false);
      }
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="required">
    <option value="" selected disabled>selected a value</option>
    <option>Car</option>
    <option>Buss</option>
    <option>Train</option>
</select>
 
<select class="required">
    <option value="" selected  disabled>selected a option</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
</select>
<br /> <br /> 
<input type="text" class="required" placeholder="Full Name">

<input type="number" class="required" placeholder="Age">
<br /> <br /> 
<button type="button" class="toggle-disabled" disabled>Submit</button>

Hide result