尝试使用 jquery 移动表单字段

Question

我正在尝试将表单值或输入字段移动到一段文本中。我几乎尝试了所有方法，但似乎无法让我的 jquery 对表单字段或表单值做任何事情。这是我正在处理的页面：https://uwbroome.wpengine.com/

在“影响形式”部分，我试图将值“33”移动或克隆到“提供”之后的段落中。我目前在表单中有两种方式，作为输入和作为带有跨度的摘要。 （不确定一个是否比另一个更容易移动）我在其中添加了一个跨度，其中包含一个我希望移动值的类。该值会根据表单滑块的位置而变化，所以我不确定这是否是导致问题的原因。我尝试了很多东西，首先移动表单包装器以包含整个部分（不确定它是否没有移动，因为我将它移到表单之外），但这似乎没有帮助。有任何想法吗？这是我目前使用的 jquery。

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#impact-calculator').each(function() {
  var $frm = $(this).find('form');
  $frm.contents().unwrap();
  $(this).wrapInner($frm)
})

$( "input:text#fieldname4_1" ).insertAfter(  $("#students .et_pb_blurb_description .number" ) );
});
</script>

Answer 1

使用.change() 事件并获取输入的值并将其插入到跨度中。这是一个小fiddle，它应该会让你走上正确的道路。玩得开心！

$('#fieldname4_1').on('change' , function(){
	var data = $(this).val();
	$('.number').html(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fieldname4_1" name="fieldname4_1" class="codepeoplecalculatedfield field large valid" type="text" value="" dep="" notdep="">
<p>Provides <span class="number"></span> student(s) with programming that improves the social, emotional and academic abilities of at risk youth.</p>