How to Select Radio Button Based on Value Entered into Textbox

[Danyelle]

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>

[Gayathri KarunaiAnandam]

Hi Danyelle, 

 

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. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Rad_core-10560101 

 

Demo Link: https://ej2.syncfusion.com/aspnetcore/Button/RadioButtonFor#/material 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Gayathri K 

[Danyelle]

works great! thanks

[Gayathri KarunaiAnandam]

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