CODEWITHSUNDEEP
jquerywordpressformsappendprepend
freshyjosh
freshyjosh

Reputation: 1

Trying to move form fields with jquery

I'm trying to move a form value or input field into a paragraph of text. I've tried just about everything but can't seem to get my jquery to do anything with the form field or the form value. Here is the page I'm working on: https://uwbroome.wpengine.com/

In the "Impact Form" section, I'm trying to get the value "33" to be moved or cloned into the paragraph after "Provides". I have it two ways in the form currently, as an input and as a summary with a span. (wasn't sure if one would be easier to move than the other) I added a span with a class there where I want the value to move. The value changes depending on the form slider position, so I'm not sure if that is causing the issue here. I've tried a lot of things, firstly moving the form wrapper to include the entire section (wasn't sure if it wasn't moving because I was moving it outside of the form), but that didn't seem to help. Any ideas? Here is the jquery I was currently using.

<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>

Upvotes: 0

Views: 277

Answers (1)

Derek Nolan
Derek Nolan

Reputation: 744

Use the .change() event and get the value of the input and insert it into the span. Here's a little fiddle which should set you on the right path. Have fun!

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

Upvotes: 1

Related Questions