使用.append()或.html()插入时,.val()从textform检索的文本消失

时间:2012-12-23 09:23:16

标签: jquery forms textbox get

我正在尝试学习如何一起使用表单和jQuery。

我正在尝试将文本输入到文本表单中并将其附加或插入到另一个元素中

我创建了一个jsFiddle:http://jsfiddle.net/B9weu/5/

由于某种原因,我使用.val()检索的文本在它附加的元素中暂时显示,然后它就消失了。这是为什么?

通过简单地使用.val()作为.submit()事件中的处理程序,我是否正在使用表单?

代码:

    <form id="target">
   <div>
    <textarea id="blogentry" name="d" rows="8" cols="40">4</textarea>
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

<script>
$('#target').submit(function() {
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});
</script>

<div id="printbodytexthere">
</div>

1 个答案:

答案 0 :(得分:2)

您的表单正在提交(页面刷新)

USE:event.preventDefault();以防止默认提交行为

$('#target').submit(function( e ) {
    e.preventDefault();
  var blogtext = $('#blogentry').val();
  $('#printbodytexthere').append('<p>' + blogtext + '</p>');
});

DOCS:http://api.jquery.com/event.preventDefault/