CODEWITHSUNDEEP
javascripthtmljqueryselectinput
ze ro
ze ro

Reputation: 35

Enable submit button only when all fields are not empty - type > file & select & input

<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
        
<script type="text/javascript">
       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 and textarea
                    ($this.is(':radio') && !$('input[name='+ $this.attr("name") +']:checked').length)) { // radio
                    valid = false;
                }
            });
            return valid;
        }

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

        validateRealTime();
</script>
<form action="" method="post" id="submitform" />

Title:
<input type="text" name="title">

Select:
<select>
    <option value="">aaa</option>
    <option value="1">bbb</option>
    <option value="2">ccc</option>
</select>
<br/>
 <label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"> 
<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="submit" id="submit" disabled="disabled" /> 

</form>

Hi i want to enable the submit button only when all field are filled specially the select input and the file input here's a working code for the other type except the select and the file type

The code below is doing this

  1. When the text field is empty the submit should be disabled (disabled="disabled").

  2. When something is typed in the text field to remove the disabled attribute.

  3. If the text field becomes empty again(the text is deleted) the submit button should be disabled again. My aim is to enable submit button only once everything has been filled. How do I do this? Any ideas? how can i disable the submit button when user is not choosing a file or an option in the form

<form action="" method="post" id="submitform" /> Title:
<input type="text" name="title"> Select:
<select>
  <option value="">aaa</option>
  <option value="1">bbb</option>
  <option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<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="submit" id="submit" disabled="disabled" />

</form>

Upvotes: 0

Views: 2072

Answers (2)

JJUNIOR19
JJUNIOR19

Reputation: 36

If u add id on every input, u can use next js vanilla code, and add onchange function on form.

<head>
<script>

    function validate(){
        var submit = document.getElementById('submit');
        var title = document.getElementById('title').value === ""? false: true; 
        var file = document.getElementById("myfile").value === ""? false: true;
        var val19 = document.getElementById("in-category-19").checked;
        var val20 = document.getElementById("in-category-20").checked;
        var checked = val19 || val20;
        
        var textArea = document.getElementById("textarea").value===""?false: true;
        var filled =(checked && title&& textArea && file);
        filled? submit.disabled=false: submit.disabled=true;
    }
    
</script>
</head>

  <body><form onchange="validate();" action="" method="post" id="submitform" /> Title:
<input type="text" id="title" name="title"> Select:
<select>
  <option value="">aaa</option>
  <option value="1">bbb</option>
  <option value="2">ccc</option>
</select>
<br/>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
<br> Description:
<textarea id ="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="submit" id="submit" disabled=true />

</form>
</body>

Upvotes: 0

mplungjan
mplungjan

Reputation: 177692

  1. You closed your form tag
  2. You cannot name or ID anything in a form "submit" - it will stop any future submission by script so get used to not doing it

You COULD just add the required attribute to the fields, then the form would give error when submitted

Here is how to disable in not both text field and textarea have content

$(function() {
  $("#submitform").on("input",function() {
    const anythingEmpty = $(":input").val().trim() === "";
    $("#subBut").prop("disabled",anythingEmpty);
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="post" id="submitform"> Title:
  <input type="text" name="title"> Select:
  <select>
    <option value="">aaa</option>
    <option value="1">bbb</option>
    <option value="2">ccc</option>
  </select>
  <br/>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
  <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" id="subBut" value="Submit Topic" class="button-primary" disabled="disabled" />
</form>

Plain JS

window.addEventListener("load",function() {
  document.getElementById("submitform").addEventListener("input",function() {
    const desEmpty = this.querySelector("[name=description]").value.trim() === "";
    const txtEmpty = this.querySelector("[name=title]").value.trim() === "";
    document.getElementById("subBut").disabled = desEmpty || txtEmpty
  })
})

Upvotes: 1

Related Questions