社区首页 >问答首页 >使用JavaScript获取具有会话用户输入值的HTML

问使用JavaScript获取具有会话用户输入值的HTML
EN

Stack Overflow用户

提问于 2017-07-13 16:37:32

回答 1查看 297关注 0票数 3

我目前正在进行一个项目，在这个项目中，我需要能够处理存储和查看HTML字符串(从数据库，但从页面本身进行测试)，这些字符串中有输入元素。我还需要存储元素的当前输入值(用户在查看页面时放置在其中的内容)，最好是在HTML字符串中。

下面是我寻求帮助的一个例子：

我有以下HTML显示：

<p id="pullfrom">
Character Name: <input><br>
Character Level: <input type="number">
</p>
<button onclick="algorithm('pullfrom')">Save</button>

然后，用户在文本框中输入一个字符名"Garrus Vakarian“，在数字框中输入"5”。然后，用户按下调用算法的保存按钮。

然后，该算法返回：

<p id="pullfrom">
Character Name: <input value="Garrus Vakarian"><br>
Character Level: <input type="number" value="5">
</p>

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-13 18:25:19

使用setAttribute( "value", npt.value )

设置指定元素上的属性值。如果该属性已经存在，则更新该值；否则将添加一个具有指定名称和值的新属性。

在被解析的元素中，我们可以将forEach <input>属性设置为提供的value，然后获取outerHTML toString()。

function algorithm( id ) {
  const e = document.getElementById( id ),
        npts = e.querySelectorAll( "input" );
  npts?.forEach( npt => npt.setAttribute( "value", npt.value ) );
  console.log( e.outerHTML.toString() );
}

<p id="pullfrom">
Character Name: <input><br>
Character Level: <input type="number">
</p>
<button onclick="algorithm('pullfrom')">Save</button>

注意：--这是收集表单数据和像这样折磨DOM的糟糕方式--这可能是一种犯罪。然而..。

对于更复杂和更标准的<form>

尽管下面的示例不是非常复杂的<form>，但它应该演示如何扩展此方法以处理不同类型的表单数据。

const frm = document.getElementById( "demo" );
frm.submit.addEventListener( "click", () => {
  // grab all desired inputs by tag
  const npts = frm.querySelectorAll( 'input:not([type="button"]), select, textarea' );
  npts?.forEach( npt => {
    switch ( npt.tagName.toLowerCase() ) {
      case "input": {
        switch ( npt.type ) {
          case "radio":
          case "checkbox": {
            npt.removeAttribute( "checked" ); // remove prior selections
            npt.setAttribute( "checked", npt.checked );
            break;
          }
          default: npt.setAttribute( "value", npt.value );
        }
        break;
      }
      case "textarea": npt.textContent = npt.value; break;
      case "select":
        const optns = npt.querySelectorAll( "option" ),
              pre_slctd = npt.querySelector( "[selected]" );
        if ( pre_slctd ) {
          pre_slctd.removeAttribute( "selected" ); // remove prior selections
        }
        optns[ npt.selectedIndex ].setAttribute( "selected", "selected" );
        break;
    }
  } );
  console.log( frm.outerHTML.toString() );
}, { passive: true } );

label {
  display: block;
  margin-bottom: .3em;
}

<form id="demo">
  <label>Character name: <input name="char_name" type="text"></label>
  <label>Character level: <input name="char_level" type="number"></label>
  <label>Character species: <select name="char_species">
    <option value="imagination">Human</option>
    <option value="cuddly" selected>Anthro</option>
    <option value="target_practice">Undead</option>
    <option value="caffeine_sponge">Developer</option>
  </select></label>
  <fieldset>
    <legend>Character's favourite radio station</legend>
    <label>Electro: <input type="radio" name="char_radio" value="electro" checked></label>
    <label>Black metal: <input type="radio" name="char_radio" value="black_metal"></label>
    <label>Opera: <input type="radio" name="char_radio" value="opera"></label>
  </fieldset>
  <label>Character has character: <input name="char_char" type="checkbox"></label>
  <label for="bio">Bio:</label>
  <textarea name="char_bio" id="bio"></textarea>
  <label>I do not understand the Terms of Service because I have not read them: <input name="tos" type="checkbox" required></label>
  <input name="submit" type="button" value="Submit">
</form>