jquery로 양식 필드 이동 시도

Question

양식 값 또는 입력 필드를 텍스트 단락으로 이동하려고합니다. 나는 모든 것을 시도해 봤지만 jquery가 폼 필드 나 폼 값으로 무엇이든 할 수 없다. 다음은 내가 작업하고있는 페이지입니다 : https://uwbroome.wpengine.com/

"Impact Form"섹션에서 "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(){ 
 
\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>