个人中心
gpt4 book ai didi

javascript - 无法使用 jQuery/Javascript 从表单中检索值

转载 作者：行者123 更新时间：2023-11-28 15:12:21 25 4
gpt4 key购买 nike

我正在尝试验证我的表单，但我似乎无法捕获我的表单值!现在不知去向何方。我尝试了 jQuery 和 Javascript 的组合。这是我的代码片段。

HTML:

<form action="#" name="application-form" method="post" enctype="multipart/form-data">
          <ul>
            <li class="input-row">
              <label for="app-resume">Resume</label>
              <input type="file" id="app-resume" name="resume" />
            </li>
            <li class="input-row">
              <label for="app-name">Full Name</label>
              <input type="text" id="app-name" name="fname" />
            </li>
            <li class="input-row">
              <label for="app-pnum">Phone Number</label>
              <input type="number" id="app-pnum" name="pnum" />
            </li>
            <li class="input-row">
              <label for="app-email">Email</label>
              <input type="email" id="app-email" name="email" />
            </li>
            <li class="input-row">
              <label for="app-info">Additional Information</label>
              <textarea type="text" id="app-info" name="info"></textarea>
            </li>
          </ul>
          <div class="btn-mssg-container">
            <button type="submit" name="sbt-btn" id="sbt-btn">apply</button>
            <p id="sbt-mssg" class="hidden">Thank you for applying.</p>
          </div>
        </form>

JS:

var myForm = document.forms["application-form"];
myForm.onsubmit = processForm;
function processForm(){
  console.log(myForm.fname.value); 
}

我也试过:

function processForm(){
  var inName = $("#app-name").val();
  console.log(inName);
}

我一无所获!有人请把我从痛苦中解救出来。

最佳答案

获取表单值的第一次尝试称为 HTMLFormControlsCollection

<强>1。引用表格:

var FoRm = document.forms .FormID_or_NAME

或

var FoRm = document.forms[" FormID_or_NAME "]

或

var FoRm = document.forms[0]

如果目标 <form>，最后一个在括号符号中使用索引号零的方法将起作用。是页面上的第一个还是唯一的<form>在页面上。

<强>2。将所有表单的表单控件收集到一个类似数组的对象中:

var formControlS = FoRm.elements

第 2 步是您遗漏的关键步骤。

<强>3。现在您可以在该特定 <form> 下的任何表单控件中引用和获取值:

var foRmC = formControlS. FormControlID_or_NAME .value

或

var foRmC = formControlS[" FormControlID_or_NAME "].value

或

var foRmC = formControlS[0].value

Demo中有详细说明

由于安全措施，此 localStorage 功能无法在 Stack Snippet 中使用。如果您想查看功能齐全的演示，请访问 Plunk

演示

<!DOCTYPE html>
<html>

<head>
  <style>
    #main {
      display: flex;
      justify-content: space-around;
      flex-wrap: nowrap;
    }
    
    iframe {
      display: inline-table;
      max-width: 40%;
      height: 100vh
    }
    
    #app0 {
      max-width: 60%;
      margin: 0 0 5px 15px;
    }
    
    label {
      display: inline-block
    }
    /* Area code - Central Office code */
    
    [type=number] {
      width: 5ch
    }
    /* The last 4 digits - Station code */
    
    label [type=number]:last-of-type {
      width: 6ch
    }
    
    [type=email] {
      width: 26ch
    }
    
    .hidden {
      opacity: 0
    }
    
    #msg {
      height: 60px;
      overflow-x: hidden;
      overflow-y: scroll;
      border: 3px inset grey;
      padding: 10px;
      display: block;
    }
  </style>
</head>

<body>
  <main id='main'>
    <!-- On submit, form sends to a real test server
    || The target attribute value is the name of 
    || iframe#display. Whenver data is tested thru 
    || this server, it will send a response later. 
    -->
    <form action="https://httpbin.org/post" id="app0" method="post" enctype="multipart/form-data" target='display'>

      <fieldset id='set0'>

        <label for="file0">Resume</label>
        <input type="file" id="file0" name="resume">
        <br>
        <br>

        <label for="name0">Full Name</label>
        <input type="text" id="name0" name="name">
        <br>
        <br>

        <label>Phone Number
          <input type="number" id="area0" name="phone" min='100' max='999'>
          <input type="number" id="cent0" name="phone" min='100' max='999'>
          <input type="number" id="stat0" name="phone" min='0000' max='9999'>
        </label>
        <br>
        <br>

        <label for="mail0">Email</label>
        <input type="email" id="mail0" name="mail">
        <br>
        <br>

        <label for="info0">Additional Information</label>
        <br>
        <textarea id="info0" name="info" cols='28'></textarea>
        <br>

      </fieldset>

      <fieldset id="set1">
        <button id='btn' type="button" class=''>Process</button>
        <button id='sub' type='submit' class='hidden'>Transfer</button>

      </fieldset>
      <output id="msg"></output>
    </form>

    <iframe name='display' src='about:blank' width='60%'></iframe>

  </main>
  <script>
    /* The interface used to refer to form controls
        || is called HTMLFormControlsCollection
        */ // Reference the form
    var xApp = document.forms.app0;

    /*\\\\\\\\\\/IMPORTANT\//////////
    This is the part that was in error
    In order to refer to any form controls
    of the referenced form, you must
    collect them in an array-like object
    using the .elements proerty //////*/

    var xCon = xApp.elements;

    // Then from the .elements reference by id
    // A click event on a button--processForm
    // is called
    xCon.btn.onclick = processForm;

    /* This function will gather all form values
    || into an array.
    || Then it stores that array in localStorage
    || Displays the data then hides the "Process"
    || button and reveals the "Transfer" button
    */
    function processForm(e) {

      var qty = xCon.length;
      var data = [];
      for (let i = 0; i < qty; i++) {

        var formControl = xCon[i].value;

        if (formControl !== null || formControl !== undefined || formControl !== "") {

          data.push(formControl);

        }
      }

      localStorage.setItem("data", JSON.stringify(data));
      var stored = JSON.parse(localStorage.getItem("data"));
      appX();

      xApp.onsubmit = appX;

      function appX(e) {
        xCon.msg.value = stored;
        xCon.btn.classList.toggle('hidden');
        xCon.sub.classList.toggle('hidden');
      }
    }
    /* Once the "Transfer" button is clicked, the
    || data is sent to the test server and the
    || test server responds back. The response is 
    || captured and displayed in the iframe to the
    || right
    */
  </script>
</body>

</html>

关于javascript - 无法使用 jQuery/Javascript 从表单中检索值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48046098/

25 4 0
文章推荐： javascript - 在 flex-box 中使用 javascript 管理图像
文章推荐： javascript - AngularJS - $注入(inject)器 :modulerr Module Error in angular. js:36
文章推荐： javascript - 字符串传递给另一个函数后变成对象？
文章推荐： javascript - 在 Angular2 中设置背景并将封装设置为无
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com