NotRocketScientist NotRocketScientist - 28 days ago 10
Javascript Question

how to enable/disable a submit button, only if two conditions are provided: checking input radio and filling input text

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

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>

Comments