Fill (Populate) TextBox based on another using jQuery

Last Reply 10 months ago By pandeyism

Posted 10 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 10 months ago Modified on 10 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