Question

I have a form that is dynamically created, so I can’t edit the layout of the form itself. However, I want to add a title above one of the text input fields in the form. I have given that field a unique css ID and am using the following script to try and add my heading before it:

<script type="text/javascript">
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
</script>

For some reason this won’t work though, can anyone think why that might be. Here is the page in question

http://www.theres-a-thought.com/client-yourdream/?page=property_submit

Answer 1

Looking at your page, I don’t see where #price is defined. Maybe it is added later via JS and i missed it..

You are using jquery in no-conflict mode, and you need to wrap your code in document ready..

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>

Running this; however, has no affect on the page(from what i can see).

The code below works because the ID exists. It isn’t what you are trying to accomplish, but it should get you started.

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#property_name');
});
</script>