jqueryでフォームフィールドを移動しようとしています

Question

フォームの値または入力フィールドをテキストの段落に移動しようとしています。私はすべてを試しましたが、フォームフィールドやフォームの値で何かを行うためにjqueryを取得できないようです。私が取り組んでいるページは次の通りです：https://uwbroome.wpengine.com/

"Impact Form"セクションでは、値 "33"を "提供する"の後の段落に移動または複製するようにしています。私は現在、フォームとして2つの方法を入力として、そしてスパンを持つ要約として持っています。 （他のものよりも移動が容易かどうかはわかりませんでした）私は値を移動したい場所にクラスを追加しました。値はフォームのスライダの位置によって変わりますので、ここで問題が発生しているかどうかはわかりません。私はフォームのラッパーをセクション全体を含むように移動しました（フォームの外に移動していたため移動していなかったかどうかはわかりませんでしたが、それは役に立たないようです）。何か案は？ここに私が現在使っている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(){ 
 
\t var data = $(this).val(); 
 
\t $('.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>