Question

我是javascript的新手。我试图抓住用户通过表单提交的答案，然后将其放在HTML文档的有序列表中。我知道如何在PHP中执行此操作，但我的任务要求我使用javascript，并且我不确定在通过ID获取元素后该怎么做。

任何帮助都很精彩，谢谢！

Answer 1

您可以使用获取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>

Answer 2

使用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/

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

2 个答案: