MENU


JQuery Helper Functions

$.param(object[,traditional]) creates a serialized representation of an array or object, suitable for use in a URL query string or Ajax request. If traditional is set to true, a shallow serialization is performed.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <script src="jquery-3.5.1.min.js"></script>
   <script>
       var myObject = {
          a: {one: 1,
                two: 2,
                three: 3
              },
          b: [1,2,3]
       };
       var recursiveEncoded = $.param(myObject);
       var recursiveDecoded =
                       decodeURIComponent($.param(myObject));
       alert(recursiveEncoded);    //a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&    //b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
              alert(recursiveDecoded);       //a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
   </script></head><body></body></html>

<!DOCTYPE html><html><head>
   <script src="jquery-3.5.1.min.js"></script>
   <script>
      var myObject = {
         a: {one: 1,
               two: 2,
               three: 3
             },
         b: [1,2,3]
      };
      var shallowEncoded = $.param(myObject, true);
      var shallowDecoded =
                            decodeURIComponent(shallowEncoded);
      alert(shallowEncoded);     // a=%5Bobject+Object%5D&b=1&b=2&b=3 
      alert(shallowDecoded);      //a=[object+Object]&b=1&b=2&b=3
   </script></head><body></body></html>

$(this).serialize() encodes a set of form elements as a string for submission.


RESETRUNFULL
<!doctype html><html><head><script src="jquery-3.5.1.min.js"></script></head><body>
    <form>
      <select name="single">
         <option>Single</option>
         <option>Single2</option>
      </select><br />
      <select name="multiple" multiple>
         <option selected>Multiple</option>
         <option>Multiple2</option>
         <option selected>Multiple3</option>
       </select><br/>
      <input type="checkbox" name="check"
                 value="check1" id="ch1"/>
      <label for="ch1">check1</label>
       <input type="checkbox" name="check"
                 value="check2" checked id="ch2"/>
      <label for="ch2">check2</label><br />
      <input type="radio" name="radio"
                 value="radio1" checked id="r1"/>
      <label for="r1">radio1</label>
      <input type="radio" name="radio"
                 value="radio2" id="r2"/>
      <label for="r2">radio2</label>
   </form><p><tt id="results"></tt></p><script>
    function showValues() {
      var str = $("form").serialize();
      $("#results").text( str );
    }
    $("input[type='checkbox'], input[type='radio']").
                                                     on( "click", showValues );
    $("select").on( "change", showValues );
    showValues();</script> </body></html>

$(this).serializeArray() encodes a set of form elements as an array of names and values.


RESETRUNFULL
<!doctype html><html><head>
  <script src="jquery-3.5.1.min.js"></script></head><body>
   <p><b>Results:</b> <span id="results"></span></p>
   <form>
      <select name="single">
         <option>Single</option>
         <option>Single2</option>
      </select>
            <select name="multiple" multiple>
         <option selected>Multiple</option>
         <option>Multiple2</option>
         <option selected>Multiple3</option>
      </select><br/>
          <input type="checkbox" name="check"
                 value="check1" id="ch1"/>
      <label for="ch1">check1</label>
        <input type="checkbox" name="check"
                 value="check2" checked id="ch2"/>
      <label for="ch2">check2</label>
      <input type="radio" name="radio"
                 value="radio1" checked id="r1"/>
      <label for="r1">radio1</label>
      <input type="radio" name="radio"
                  value="radio2" id="r2"/>
      <label for="r2">radio2</label>
   </form>
   <script>
      function showValues() {
         var fields = $(":input").serializeArray();
         $("#results").empty();
         jQuery.each(fields, function(i, field){
            $("#results").append(field.value + " ");
         });
      }
      $(":checkbox, :radio").click(showValues);
      $("select").change(showValues);
      showValues();</script> </body></html>