尝试使用 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() 事件并获取输入的值并将其插入到范围中。这里有一个小提琴，应该让你走上正确的道路。玩得愉快！

$('#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>