使用 JavaScript 获取带有会话用户输入值的 HTML 字符串

Question

I am currently working on a project where I need to be able to handle storing and viewing HTML strings (from a database, but from the page itself for testing) which have input elements in them. I also need to store the current input values (what the user has placed in them while the user is viewing the page) of the elements, preferably within the HTML string.

Here is an example of what I looking for help with:

I have the following HTML displaying:

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

The user then enters a character name of "Garrus Vakarian" into the text box and "5" into the number box. Then the user presses the save button which calls the algorithm.

The algorithm then returns:

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

Answer 1

Using setAttribute( "value", npt.value )

Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.

forEach <input> in the element being parsed, we can set the HTML value attribute to the value supplied, then get the 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>

Note: this is a terrible way of gathering form data and torturing the DOM like this should probably be a crime. However...

For more complex and standard <form> s

Although the following example isn't a very complex <form> , it should demonstrate how this method might be expanded to handle different types of form data.

 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>