Click here to Skip to main content
15,923,164 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
what i am trying to do is that on a event of checkbox clicked i want values from one text box to appear in another text box and the second text box should become disabled.

What I have tried:

@model EmployeeJoiningPortal.Data.CanditateBasicInformation

@{
    ViewData["Title"] = "Edit";
    Layout = "~/Views/Shared/_UserLayout1.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    <script>

        function getphone() {

            var istrasnportphonechecked = document.getElementById("getPhone");

            var permannentnumber = document.getElementById("personalphone");

            var phonefortransport = document.getElementById("getPhone";)

            if (istrasnportphonechecked.ariaChecked == true) {

                let phonefortransport = permannentnumber.ariaValueNow;

            }
            else {
                let phonefortransport ="";
            }

        }
    </script>

    
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    
    <h1>Section 1: Employee Information</h1>
       
      
    <div class="container">
    <div class="row">
            <form asp-action="Edit">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="CanditateId" />

               
                <div class="row mb-2">
                    <label class="col-sm-2 col-form-label">Mobile Number</label>
                    <div class="col-sm-3">
                        <input asp-for="CanditateMobileNumber" class="form-control" id="personalphone" placeholder="+91-1234567890" />
                        <span asp-validation-for="CanditateMobileNumber" class="text-danger"></span>
                    </div>

                </div>
                 
                <div class="row mb-2">
                    <label class="col-sm-2 col-form-label">Required Company Transport</label>
                    <div class="col-sm-2">
                        @*<label asp-for="CanditatePrefix">Prefix</label>*@
                        <select asp-for="CanditateTransportRequestStatus" class="form-control" asp-items="Html.GetEnumSelectList<EmployeeJoiningPortal.Data.CanditateBasicInformation.transportstatus>()">
                        </select>
                        <span asp-validation-for="CanditateTransportRequestStatus" class="text-danger"></span>
                    </div>
                </div>
                 
                <div class="row mb-2">
                    <label class="col-sm-2 col-form-label">Phone Number For Company Transport</label>
                    <div class="col-sm-3">
                        <input asp-for="CanditateTransportPhoneNumber" class="form-control" placeholder="012-2345 7890" />
                        <span asp-validation-for="CanditateTransportPhoneNumber" class="text-danger"></span>
                    </div>
                    <div class="col-sm-2">
                        <input type="checkbox" onclick="getphone()" id="getPhone"  name="filladdress">
                        <span asp-validation-for="IsPhoneSame" class="text-danger">Same as Mobile Number</span>
                    </div>
                </div>
                

                
                </br>
                <div class="form-group">
                    <input  type="submit" style="float:right;" value="Next"  class="btn btn-primary" />
                </div>
            </form>
        </div>
    </div>

    @*<div>
        <a asp-action="Index">Back to List</a>
    </div>*@
</body>
</html>
Posted
Updated 13-Dec-22 23:00pm
Comments
BillWoodruff 13-Dec-22 0:47am    
and what result from what you tried ? error message ? text does not appear in textbox as expected ? or ? where is the code that disables the textbox ?
Member 15627495 13-Dec-22 1:20am    
'aria' is a special feature, not the common one.

1 solution

Your script is extremely confused, and has several syntax errors.

Based on the vague description, you're looking for something like:
JavaScript
const isPhoneSame = document.getElementById("getPhone");
const personalPhoneNumber = document.getElementById("personalphone");
const transportPhoneNumber = document.getElementById("CanditateTransportPhoneNumber");

const updatePhoneNumber = (clearIfDifferent) => {
    if (isPhoneSame.checked) {
        transportPhoneNumber.value = personalPhoneNumber.value;
        transportPhoneNumber.readOnly = true;
    } else {
        if (clearIfDifferent) { transportPhoneNumber.value = ""; }
        transportPhoneNumber.readOnly = false;
    }
};

// Copy the phone number when the checkbox is checked/unchecked:
isPhoneSame.addEventListener("click", () => updatePhoneNumber(true));

// If the phone numbers are the same, update the transport phone when the personal phone changes:
personalPhoneNumber.addEventListener("change", () => updatePhoneNumber(false));
personalPhoneNumber.addEventListener("input", () => updatePhoneNumber(false));
personalPhoneNumber.addEventListener("blur", () => updatePhoneNumber(false));

You'll want to remove the onclick attribute from the checkbox, as the event handler is attached via code:
HTML
<input type="checkbox" id="getPhone" name="filladdress">

Demo[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900