Fill (Populate) TextBox based on another using jQuery

Last Reply 3 months ago By pandeyism

Posted 3 months ago

im having two textbox and according to the value entered in first textbox..

i want to display the value in the second textbox''

for example:

if im enetering value A in first box , then i want to display value b in second textbox automatically

<div class="input-group">
    <input id="lenght" type="text" class="form-control" name="email" placeholder="select truck length" />
    <span class="input-group-addon" style="position: relative; width: 14%; display: none">
        <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a>
    </span>
</div>

        <div class="input-group" style="margin-left: 350px;top: -33px;">
    <input id="Text1" type="text" class="form-control" name="email" placeholder="select truck weight" />
    <span class="input-group-addon" style="position: relative; width: 14%; display: none">
        <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a>
    </span>
</div>

 

Posted 3 months ago Modified on 3 months ago

Hey v@run,

Please refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#lenght").keyup(function (e) {
            if ($(this).val().toLowerCase() == "a") {
                $("#Text1").val("B");
            }
            else {
                $("#Text1").val("");
            }
        });
    });
</script>
<div class="input-group">
    <input id="lenght" type="text" class="form-control" name="email" placeholder="select truck length" />
    <span class="input-group-addon" style="position: relative; width: 14%; display: none">
        <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a>
    </span>
</div>
<div class="input-group" style="margin-left: 350px; top: -33px;">
    <input id="Text1" type="text" class="form-control" name="email" placeholder="select truck weight" />
    <span class="input-group-addon" style="position: relative; width: 14%; display: none">
        <a href="#" class="showhide"><i class="glyphicon glyphicon-chevron-left"></i></a>
    </span>
</div>

Demo