Form State को Handle करना

prop() इस्तेमाल करें यह control करने के लिए कि inputs इस्तेमाल किए जा सकते हैं या नहीं।

In this page:

Enable और Disable
Required State
Checked State
Reset State
Track Changes

Syntax

javascript

$("selector").prop("propertyName");          // read state
$("selector").prop("propertyName", true);    // set state

// propertyName: disabled, required, checked

Enable और Disable

prop(disabled, true/false) यह control करता है कि इस समय user द्वारा किसी form field के साथ interact किया जा सकता है या नहीं, disable होने पर इसे greyed out कर देता है और input block कर देता है।

उदाहरण: Enable and Disable

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <input id="field" type="text">
    <button id="btn">Disable</button>
    <script>
      $("#btn").on("click", function() {
      $("#field").prop("disabled", true);
      });
    </script>
  </body>
</html>

Required State

required property, जिसे prop() के through पढ़ा और set किया जाता है, यह control करती है कि form submission की अनुमति देने से पहले browser किसी field को भरना ज़रूरी बनाता है या नहीं। इसे toggle करना submission requirements dynamically बदलता है।

उदाहरण: Required State

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <input id="field" type="text">
    <script>
      $("#field").prop("required", true);
    </script>
  </body>
</html>

Checked State

Checkboxes और radio buttons checked property इस्तेमाल करते हैं, जिसे attr() के बजाय prop() के through access किया जाता है, क्योंकि यह live, अभी-click की गई state को reflect करता है, HTML में लिखा गया original attribute नहीं।

उदाहरण: Checked State

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <input id="agree" type="checkbox">
    <script>
      $("#agree").prop("checked", true);
      console.log($("#agree").prop("checked"));
    </script>
  </body>
</html>

Reset State

किसी form का native reset() call करना हर field को उसके शुरुआती HTML-authored defaults पर restore कर देता है, user द्वारा की गई किसी भी change को undo करते हुए -- यह DOM level पर होता है।

उदाहरण: Reset State

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <form id="myForm"><input value="typed text"></form>
    <button id="resetBtn">Reset</button>
    <script>
      $("#resetBtn").on("click", function() {
      document.getElementById("myForm").reset();
      });
    </script>
  </body>
</html>

Track Changes

change या input event handlers के अंदर set किया गया एक simple boolean flag यह track कर सकता है कि form को load होने के बाद modify किया गया है या नहीं। यह commonly unsaved changes के बारे में warn करने के लिए इस्तेमाल होता है।

उदाहरण: Track Changes

javascript

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  </head>
  <body>
    <input id="field" type="text">
    <script>
      let dirty = false;
      $("#field").on("input", function() {
      dirty = true;
      });
    </script>
  </body>
</html>

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson Complex Form Inputs Next Lesson → Dynamic Form Inputs

Form State को Handle करना

Enable और Disable

Required State

Checked State

Reset State

Track Changes

Chapter Quiz — Complete all 5 topics to unlock

Login to run this code