Dynamic Form Inputs

जब users को ज़्यादा entries चाहिए हों तो नए fields बनाएँ।

In this page:

Inputs Add करना
Inputs हटाना
Dynamic Events
Fields Count करना
Practical Dynamic Forms

Syntax

javascript

$("#container").append("<input ...>");        // add a field

$("#container").on("click", ".child-selector", function() {
  $(this).remove();                          // remove a field
});

Inputs Add करना

append() runtime पर form में बिल्कुल नए input fields insert करता है, users को जितने चाहिए उतने entries add करने देते हुए, जैसे additional phone numbers या list items।

उदाहरण: Adding Inputs

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div id="fields"></div>
    <button id="add">Add Field</button>
    <script>
      $("#add").on("click", function() {
      $("#fields").append("<input type='text'>");
      });
    </script>
  </body>
</html>

Inputs हटाना

ज़रूरत न रहने पर dynamic fields को remove() से हटाया जा सकता है, जैसे किसी specific entry के बगल में एक 'delete row' button click करना।

उदाहरण: Removing Inputs

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div id="fields"><div class="row"><input><button class="del">Remove</button></div></div>
    <script>
      $("#fields").on("click", ".del", function() {
      $(this).closest(".row").remove();
      });
    </script>
  </body>
</html>

Dynamic Events

Delegated events -- एक stable parent पर listener attach करना और event.target check करना -- बाद में add किए गए elements के साथ काम करते हैं, किसी direct listener के उलट जो सिर्फ page load पर मौजूद elements से bind होता है।

उदाहरण: Dynamic Events

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div id="fields"></div>
    <button id="add">Add</button>
    <script>
      $("#fields").on("click", "input", function() {
      console.log("Clicked a field, even a new one");
      });
      $("#add").on("click", function() {
      $("#fields").append("<input type='text'>");
      });
    </script>
  </body>
</html>

Fields Count करना

एक running counter हर नए dynamically-added input के लिए unique field names या ids generate कर सकता है, entries के बीच collisions से बचते हुए। यह मायने रखता है क्योंकि form submission duplicate names पर भरोसा नहीं कर सकता।

उदाहरण: Counting Fields

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div id="fields"></div>
    <button id="add">Add</button>
    <script>
      let count = 0;
      $("#add").on("click", function() {
      count++;
      $("#fields").append("<input name='field" + count + "'>");
      });
    </script>
  </body>
</html>

Practical Dynamic Forms

Dynamic fields पहले से unknown quantity वाले repeated data के लिए उपयोगी हैं, जैसे guests या attachments की variable संख्या। append(), delegation, और counting को combine करना पूरी feature बनाता है।

उदाहरण: Practical Dynamic Forms

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <div id="guests"></div>
    <button id="addGuest">Add Guest</button>
    <script>
      let guestCount = 0;
      $("#addGuest").on("click", function() {
      guestCount++;
      $("#guests").append("<div class='row'><input name='g" + guestCount + "'><button class='del'>X</button></div>");
      });
      $("#guests").on("click", ".del", function() {
      $(this).closest(".row").remove();
      });
    </script>
  </body>
</html>

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Handling Form State Next Lesson → Client-Side Validation

Dynamic Form Inputs

Inputs Add करना

Inputs हटाना

Dynamic Events

Fields Count करना

Practical Dynamic Forms

Chapter Quiz — Complete all 5 topics to unlock

Login to run this code