how to make a texbox active when insert with text?

Hi Team

I want to make my Next button active, only when a user select both radio-button and textbox. i want to know jquery side of things, with my following logic i have below.

class="col-sm-3">
@Html.RadioButtonFor(m => m.CourseAdmin.LoginID, "LoginID")
for="LoginID" class="col-form-label">LoginID

class="col-sm-3">

@Html.RadioButtonFor(m => m.CourseAdmin.SIS_ID, "SIS_ID")

for="SIS_ID" class="col-form-label">SIS_ID

Hello,

I have modified the code based on your requirement, please have a look.

Important attribute is name="choose" which should be identical for all the radio button so it will only allow to choose one radio button at a time.

<div class="col-sm-3">
<input type="radio" id="LoginID" name="choose" />
<label for="LoginID" class="col-form-label">LoginIDlabel>
div>
<div class="col-sm-3">
<input type="radio" id="SIS_ID" name="choose" />
<label for="SIS_ID" class="col-form-label">SIS_IDlabel>
div>
<div class="col-sm-12">
<input type="text" multiple id="eNtsaTextAreaDisc" />
div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
<button type="button" class="btn btn-primary" id="btnNext" disabled>Nextbutton>

And Script (updated)

"text/javascript">
$(document).ready(function () {
// Fire when radio button clicked
$("#LoginID, #SIS_ID").bind("change", function () {
checkdata();
});
// Fire when we enter anything in the textbox
$("#eNtsaTextAreaDisc").bind("input", function () {
checkdata();
});
});
//here we check both radio button clicked and textbox filled with some information
function checkdata() {
if (($("#LoginID").prop("checked") || $("#SIS_ID").prop("checked")) && $("#eNtsaTextAreaDisc").val().length > 0) {
$("#btnNext").removeAttr("disabled");
}
else {
$("#btnNext").attr("disabled","disabled");
}
}

Hope this will help!

Hi Shah

Last thing, how do i now determine, if a user select the email_address. it must from above TextArea validate this error message "Example: [email protected], [email protected]". Then when its an Login ID "Example: lsmith, mfoster". Then if it finds it must show this gui below, if not see below;

Hi Shah

Please view my screen shot for more information, thanks.

Hi Gcobani Mkontwana,

Please could you please attach the screen you are working on so that I can give you exact solution?

Many thanks!

Hi Shah

The logic is to be working, but the issue is my radio button they all get selected other than choosing one i need, they all marked. How do i resolve this from to happened?

Hi try below Jquery code snippet :

var SIS_ID_VAL='';

$("input[name='SIS_ID']").click(function () {

var txt = $("#LoginID").val();

SIS_ID_VAL=$(this).val();

if ($("#SIS_ID").is(":checked") && txt.length > 0 ) {

$("#Next").removeAttr("disabled");

} else {

$("#Next").attr("disabled", "disabled");

}

});

$("#LoginID").keyup(function(){

var txt = $("#LoginID").val();

if (SIS_ID_VAL.length > 0 && txt.length > 0 ) {

$("#Next").removeAttr("disabled");

} else {

$("#Next").attr("disabled", "disabled");

}

});

HI,

I have just re-write your code just to simplify.

your HTML (with ids in controls)

<div class="col-sm-3">
<input type="radio" id="LoginID" />
<label for="LoginID" class="col-form-label">LoginIDlabel>
div>
<div class="col-sm-3">
<input type="radio" id="SIS_ID" />
<label for="SIS_ID" class="col-form-label">SIS_IDlabel>
div>
<div class="col-sm-12">
<input type="text" multiple id="eNtsaTextAreaDisc" />
div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
<button type="button" class="btn btn-primary" id="btnNext" disabled>Nextbutton>

jQuery Script

"text/javascript">
$(document).ready(function () {
// Fire when radio button clicked
$("#LoginID, #SIS_ID").bind("change", function () {
checkdata();
});
// Fire when we enter anything in the textbox
$("#eNtsaTextAreaDisc").bind("input", function () {
checkdata();
});
});
//here we check both radio button clicked and textbox filled with some information
function checkdata() {
if ($("#LoginID").prop("checked") && $("#SIS_ID").prop("checked") && $("#eNtsaTextAreaDisc").val().length > 0) {
$("#btnNext").removeAttr("disabled");
}
else {
$("#btnNext").attr("disabled","disabled");
}
}

Hope this would help you!

Thanks!

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Darshan Shah6y ago
Accepted answer
Hello,

I have modified the code based on your requirement, please have a look.

Important attribute is name="choose" which should be identical for all the radio button so it will only allow to choose one radio button at a time.
<div class="col-sm-3">
        <input type="radio" id="LoginID" name="choose" />
        <label for="LoginID" class="col-form-label">LoginIDlabel>
    div>

    <div class="col-sm-3">
        <input type="radio" id="SIS_ID" name="choose" />
        <label for="SIS_ID" class="col-form-label">SIS_IDlabel>
    div>

    <div class="col-sm-12">
        <input type="text" multiple id="eNtsaTextAreaDisc" />
    div>

    <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
    <button type="button" class="btn btn-primary" id="btnNext" disabled>Nextbutton>
And Script (updated)
"text/javascript">
    $(document).ready(function () {
        // Fire when radio button clicked
        $("#LoginID, #SIS_ID").bind("change", function () {
            checkdata();
        });

        // Fire when we enter anything in the textbox
        $("#eNtsaTextAreaDisc").bind("input", function () {
            checkdata();
        });
    });

    //here we check both radio button clicked and textbox filled with some information
    function checkdata() {
        if (($("#LoginID").prop("checked") || $("#SIS_ID").prop("checked")) && $("#eNtsaTextAreaDisc").val().length > 0) {
            $("#btnNext").removeAttr("disabled");
        }
        else {
            $("#btnNext").attr("disabled","disabled");
        }
    }

Hope this will help!
Guest User6y ago
Hi Shah

Last thing, how do i now determine, if a user select the email_address. it must from above TextArea validate this error message "Example: [email protected], [email protected]". Then when its an Login ID "Example: lsmith, mfoster". Then if it finds it must show this gui below, if not see below;
Guest User6y ago
Hi Shah

Please view my screen shot for more information, thanks.
Darshan Shah6y ago
Hi Gcobani Mkontwana,

Please could you please attach the screen you are working on so that I can give you exact solution?

Many thanks!
Guest User6y ago
Hi Shah

The logic is to be working, but the issue is my radio button they all get selected other than choosing one i need, they all marked. How do i resolve this from to happened?
Sonu Gupta6y ago
Hi try below Jquery code snippet :

var SIS_ID_VAL='';
$("input[name='SIS_ID']").click(function () {
var txt = $("#LoginID").val();
SIS_ID_VAL=$(this).val();
if ($("#SIS_ID").is(":checked") && txt.length > 0 ) {
$("#Next").removeAttr("disabled");

} else {
$("#Next").attr("disabled", "disabled");
}
});
$("#LoginID").keyup(function(){
var txt = $("#LoginID").val();
if (SIS_ID_VAL.length > 0 && txt.length > 0 ) {
$("#Next").removeAttr("disabled");

} else {
$("#Next").attr("disabled", "disabled");
}
});
Darshan Shah6y ago
HI,

I have just re-write your code just to simplify.
your HTML (with ids in controls)
<div class="col-sm-3">
       <input type="radio" id="LoginID" />
       <label for="LoginID" class="col-form-label">LoginIDlabel>
   div>

   <div class="col-sm-3">
       <input type="radio" id="SIS_ID" />
       <label for="SIS_ID" class="col-form-label">SIS_IDlabel>
   div>

   <div class="col-sm-12">
       <input type="text" multiple id="eNtsaTextAreaDisc" />
   div>

   <button type="button" class="btn btn-secondary" data-dismiss="modal">Closebutton>
   <button type="button" class="btn btn-primary" id="btnNext" disabled>Nextbutton>
jQuery Script
"text/javascript">
    $(document).ready(function () {
        // Fire when radio button clicked
        $("#LoginID, #SIS_ID").bind("change", function () {
            checkdata();
        });

        // Fire when we enter anything in the textbox
        $("#eNtsaTextAreaDisc").bind("input", function () {
            checkdata();
        });
    });

    //here we check both radio button clicked and textbox filled with some information
    function checkdata() {
        if ($("#LoginID").prop("checked") && $("#SIS_ID").prop("checked") && $("#eNtsaTextAreaDisc").val().length > 0) {
            $("#btnNext").removeAttr("disabled");
        }
        else {
            $("#btnNext").attr("disabled","disabled");
        }
    }

Hope this would help you!
Thanks!