使用Javascript将表单输入放入有序列表中

Question

我是javascript新手。我试图获取用户通过表单提交的答案，然后将其放在HTML文档中的有序列表中。我知道如何在PHP中做到这一点，但我的任务要求我使用javascript，我不知道我通过ID获得元素后该怎么做。

任何帮助都是美妙的，谢谢!

Answer 1

Use serializeArray();

Html

<form id="testform">
  <input type="radio" name="foo" value="1" checked="checked" />
  <input type="radio" name="foo" value="0" />
  <input name="bar" value="xxx" />
  <select name="this">
    <option value="hi" selected="selected">Hi</option>
    <option value="ho">Ho</option>
  </select>
  <input type="submit" value="Submit"/>
</form>
<div id="result"></div>

JS

function showValues(fields) {
  $( "#result" ).empty().append("<ul></ul>");
  jQuery.each( fields, function( i, field ) {
    $( "#result ul" ).append( "<li>"+field.value+"</li>" );
  });
}
$( "#testform" ).submit(function( event ) {
  var showfields = $( this ).serializeArray();
  showValues(showfields);
  event.preventDefault();
});

这是一个很好的例子https://jsfiddle.net/xanfar/sgeuoyhj/

Answer 2

您可以使用get ElementbyId.value，然后由innerHTML显示。

<textarea placeholder="Type somethings..." id="input"></textarea>
<input type="button" id="btn" value="Change"/>
<div id="result" style="text-align:left"></div>
<script language="javascript"/>
var btn = document.getElementById("btn");
btn.addEventListener('click',function change(){
        var text = document.getElementById("input").value;
        document.getElementById("result").innerHTML=text;
});
</script>