Fill (Populate) TextBox based on another using jQuery

Last Reply one month ago By pandeyism

Posted one month 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 one month ago Modified on one month 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