How To Swap Value Between Two Input Fields Using Jquery

In this topic,

We are going to see how to swap values between two input fields using jQuery.

Clicking on the “>>” button will swap the value of the left input box to the Right input box, and the icon of the “>>” button will be “<<“.

Step-1: Include the jQuery link in the <head>..</head>tag on index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step-2: Create Html Code in the index.html file.

<body>
  <div class="row">
    <div class="first-box">
      <input type="text" name="box1" id="left">
    </div>
    <div class="button">
      <button type="button" id="btnleftside">>></button>
    </div>
    <div class="second-box">
      <input type="text" name="box1" id="right">
    </div>
  </div>
</body>

Step-3: Add jQuery code in <script>…</script> tag on index.html.

In This code, first of all I have declared two variables.
When I click on the button, the value of the first input box goes to the second input box and, the button text change.

 $("#btnleftside").click(function () {
     var left = $("#left").val();
     var right = $("#right").val();

     if ($("#btnleftside").text() == ">>") {
         $("#right").val(left);
         $("#left").val("");
         $("#btnleftside").text("<<");
     }
     else {
         $("#left").val(right);
         $("#right").val("");
         $("#btnleftside").text(">>");
     }
});

Review the below video.

I hope you guys found something useful  ??

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories