仅在提供两个条件的情况下，如何启用/禁用提交按钮：检查输入单选和填充输入文本

Question

I have this form:

<form name="myform" method="post">
  <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1"/><br/>
  <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2"/><br/>
  <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3"/><br/>
  <input onkeyup="checkFormsValidity();" id="input_id" type="text" name="input_name" value="" required/><br/>
  <input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/>
</form>

three input radios, one input text, and one input submit button.

According to the javascript code:

//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT RADIO
function checkIfValid() {
var current = $('input.class_x').filter(':checked');

  if (current.length > 1) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }
};

//ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT TEXT
checkFormsValidity = function(){
var myforms = document.forms["myform"];   
    if (myforms.checkValidity()) {
        sbmtBtn.disabled = false;
    } else {
        sbmtBtn.disabled = true;
    }
}

if any of these two conditions are provided the input submit button will be enabled. BUT what I need is that the input submit button ONLY enables if BOTH conditions are provided . AND if ANY of these conditions are changed back THEN the submit button should disable back again.

I know this needs a very strict syntax.

According to the code I am providing, what changes need to be done in order to achieve this? Here is the JSFIDDLE https://jsfiddle.net/Suiberu/1n5gbooq/

thanks!

Answer 1

Try this: Updated fiddle

condition : select with 2 radio button & one text input .

I was remove the link keyup event in html added direct with javascript. No need to separably validate the input text

 //SUBMIT BUTTON VARIABLE DECLARED var sbmtBtn = document.getElementById("SubmitButton"); sbmtBtn.disabled = true; //INPUTS RADIO; CHECK OR UNCHECK var prv; var markIt = function(e) { if (prv === this && this.checked) { this.checked = false; prv = null; } else { prv = this; } checkIfValid(); }; $(function() { $('input.class_x').on('click', markIt); $('input[type=text]').on('keyup', markIt); }); //ENABLE OR DISABLE SUBMIT BUTTON CODE ACCORDING TO INPUT RADIO function checkIfValid() { var current = $('input.class_x').filter(':checked'); if ((current.length > 1) && ($('input[type=text]').val() != "")) { sbmtBtn.disabled = false; } else { sbmtBtn.disabled = true; } }; 

 input[type='submit']:disabled{ color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="myform" method="post"> <input class="class_x" type="radio" name="name_1" value="value_1" id="id_1"/><br/> <input class="class_x" type="radio" name="name_2" value="value_2" id="id_2"/><br/> <input class="class_x" type="radio" name="name_3" value="value_3" id="id_3"/><br/> <input id="input_id" type="text" name="input_name" value="" required/><br/> <input type="submit" name="submit_name" value="OK" class="submit_class" id="SubmitButton"/> </form>