how to make a texbox active when insert with text?

Question

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

Darshan Shah · 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" > LoginID label > div > div class = "col-sm-3" > input type = "radio" id = "SIS_ID" name = "choose" /> label for = "SIS_ID" class = "col-form-label" > SIS_ID label > div > div class = "col-sm-12" > input type = "text" multiple id = "eNtsaTextAreaDisc" /> div > button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close button > button type = "button" class = "btn btn-primary" id = "btnNext" disabled > Next button > 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!

Darshan Shah · Answer

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" > LoginID label > div > div class = "col-sm-3" > input type = "radio" id = "SIS_ID" /> label for = "SIS_ID" class = "col-form-label" > SIS_ID label > div > div class = "col-sm-12" > input type = "text" multiple id = "eNtsaTextAreaDisc" /> div > button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close button > button type = "button" class = "btn btn-primary" id = "btnNext" disabled > Next button > 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!

Guest User · Answer

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: lsmith@myschool.edu, mfoster@myschool.edu". Then when its an Login ID "Example: lsmith, mfoster". Then if it finds it must show this gui below, if not see below;

Guest User · Answer

Hi Shah Please view my screen shot for more information, thanks.

Darshan Shah · Answer

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 User · Answer

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 Gupta · Answer

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"); } });

how to make a texbox active when insert with text?

Answers (7)