1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to Select Radio Button Based on Value Entered into Textbox

How to Select Radio Button Based on Value Entered into Textbox

I have a radio button that has two options Pass and fail. I also have a numeric text box for the user to enter a number. If that number is greater than 70 I want to set the radio button to Pass. If it is less than 70 I want to select the fail option.

Here is a screenshot of the page when it loads.  If the user puts 70 or higher in the result box the Passed radio button should become selected. If they put less than 70 then the Failed radio button should become selected. Also, how would I validate that a radio button is selected when the form is submitted to the controller?


Code:
HomeController
[HttpPost]
       public IActionResult AddTest(NewTestViewModel newTest)
       {
           return View();
       }

test.cshtml
ToolTesting.Web.Models.NewTestViewModel
<div class="row mt-2">
       <div class="col-sm-6 col-lg-6 col-md-6">
           <ejs-radiobutton id="Passed" label="Passed" value="true" name="Passed">ejs-radiobutton>
           <ejs-radiobutton id="Failed" label="Failed" value="false" name="Passed">ejs-radiobutton>
       div>
 
   div>
   div>

3 Replies 1 reply marked as answer
GK Gayathri KarunaiAnandam Syncfusion Team March 30, 2021 01:07 PM UTC

 
We have checked your reported query. We can achieve your requirement by using Numeric Textbox change event. Please refer below code snippet. 
 
Index.cshtml 
 
<div class="control-section"> 
    <div class="radio-control"> 
        <form method="post"> 
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                <ejs-numerictextbox id="numeric" Type="text" change="change" placeholder="Enter Number"></ejs-numerictextbox> 
            </div> 
            <div class="row"> 
                <ejs-radiobutton id="Failed" label="Fail" value="fail" ejs-for="result"></ejs-radiobutton> 
            </div> 
            <div class="row"> 
                <ejs-radiobutton id="Passed" label="Pass" value="pass" ejs-for="result"></ejs-radiobutton> 
            </div> 
            <span id="error-message" asp-validation-for="result"></span> 
            <ejs-button id="submit-button" content="Submit"></ejs-button> 
        </form> 
    </div> 
</div> 
 
<script> 
 
    function change(args) { 
        if (args.value >= 70) { 
            document.getElementById("Passed").ej2_instances[0].checked = true; 
        } else { 
            document.getElementById("Failed").ej2_instances[0].checked = true; 
        } 
    } 
 
 
</script> 
 
HomeController.cs 
 
public class HomeController : Controller 
    {  
       public IActionResult Index() 
        { 
            RadioButtonModel model = new RadioButtonModel(); 
            return View(model); 
        } 
 
        [HttpPost] 
        public IActionResult Index(RadioButtonModel model) 
        { 
            return View(model); 
        } 
} 
public class RadioButtonModel 
    { 
        [Required] 
        public string result { get; set; } 
    } 
 
Please check the below sample. 
 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Gayathri K 


Marked as answer
DA Danyelle March 30, 2021 01:25 PM UTC

works great! thanks

GK Gayathri KarunaiAnandam Syncfusion Team March 31, 2021 04:57 AM UTC

Hi Danyelle, 

Thanks for the update. 

We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 

Regards, 
Gayathri K 


Loader.
Up arrow icon