Fill (Populate) TextBox based on another using jQuery

Last Reply one year ago By pandeyism

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