无法将表单数据存入Session Storage，寻求技术解决方案

Hey there! Let's get your form data saving to sessionStorage working properly. I've gone through your code and found a couple of key issues that are stopping it from working as expected:

1. Incorrect jQuery Selector for the Form #

Your code uses $("formset") to target the form, but your form has an id of formset, not a tag name. jQuery uses # to select elements by ID, so you need to change that to $("#formset"). Without the #, jQuery is looking for a <formset> HTML tag (which doesn't exist), so the submit event handler never gets attached.

2. Misconfigured Email Input Type #

Your email field has type="tel" which is meant for phone numbers. While this won't break the storage, it's semantically incorrect and will cause the browser to show the wrong keyboard on mobile devices. Change it to type="email" for proper behavior and validation.

Corrected Code #

JavaScript #

$(function() {
  // Use #formset to target the form by ID
  $("#formset").submit(function (event) {
    event.preventDefault();
    
    var name = $("#fullname").val();
    var email = $("#email").val();
    var phonenumber = $("#phonenumber").val();
    var message = $("#message").val();

    if (typeof (Storage) !== "undefined") {
      sessionStorage.setItem("Fullname", name);
      sessionStorage.setItem("E-mail", email);
      sessionStorage.setItem("Phoneno", phonenumber);
      sessionStorage.setItem("Msg", message);
      
      // Optional: Add a console log to verify data is saved
      console.log("Data saved to sessionStorage:", sessionStorage);
    } else {
      console.log("Session storage is not supported in this browser.");
    }
  });
});

HTML #

<form id="formset" class="main_form">
  <div class="row">
    <div class="col-md-12 ">
      <input class="contactus" placeholder="Full Name" type="text" id="fullname" required>
    </div>
    <div class="col-md-7">
      <!-- Changed type from "tel" to "email" -->
      <input class="contactus" placeholder="Email" type="email" id="email" required>
    </div>
    <div class="col-md-7">
      <input class="contactus" placeholder="Phone Number" type="text" id="phonenumber" required>
    </div>
    <div class="col-md-12">
      <textarea class="contactus1" placeholder="Message" id="message" required></textarea>
    </div>
    <div class="col-md-12">
      <button class="send_btn" type="submit" id="submitform">Send</button>
    </div>
  </div>
</form>

How to Verify It's Working #

1. Open your browser's Developer Tools (F12 or Ctrl+Shift+I)
2. Go to the Application tab
3. Look under Session Storage in the left sidebar — you should see your key-value pairs after submitting the form.
4. Check the Console tab for the debug logs to confirm the code is running.

That should do it! Let me know if you run into any other issues.

内容的提问来源于stack exchange，提问作者gregory