how to make a texbox active when insert with text?

Guest User

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

class="col-sm-12">

@Html.TextAreaFor(m => m.eNtsaAdmin.eNtsaTextAreaDisc, new { @class = "form-control", style = " font-weight: bold; width:450px" })

;div class="modal-footer">

"button" class="btn btn-secondary" data-dismiss="modal">Close

"button" class="btn btn-primary">Next

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!
+1
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;

+1
Guest User6y ago
Hi Shah

Please view my screen shot for more information, thanks.

+1
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!
+1
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?
+1
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");
}
});

+1
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!
+1

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!
+1
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;

+1
Guest User6y ago
Hi Shah

Please view my screen shot for more information, thanks.

+1
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!
+1
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?
+1
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");
}
});

+1
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!
+1