jQuery - Adding new input boxes

[eluser]Kemik[/eluser]
Hi all,

I've got a form where I want the user to be able to add new input boxes (one for description, one for price) so they can add items to an invoice.

Here is the code I've got:

Code:

<scri.pt type="text/javascript">
            
            $(document)[dot]ready(function(){
               $('#btn_add')[dot]click(function(){
                  addItem();
                  return false;
               });
            });
            
            function addItem(){
               $('#divItems').append('
               <label for="item[]">Item description</label>
               &lt;input type="text" name="item[]" id="item[]" class="short" /&gt;
               <em>E.g. Repairs - 5 hours @ &pound;10 /hr</em>
              
               <label for="price[]">Price</label>
               &lt;input type="text" name="price[]" id="price[]" class="short" /&gt;');
            }

            </scri.pt>
            
            <a href="#" id="btn_add">Add</a>
            <div id="divItems"></div>

Not having much luck making it add to the form. Any ideas? (obviously the [dots] are actually dots.

[eluser]markanderson993[/eluser]
$(document).ready(function() {

});

needs to contain ALL of your jQuery not just your event listeners.

Hope this helps,
Mark Anderson

[eluser]cahva[/eluser]
[quote author="pianoman993" date="1269739679"]$(document).ready(function() {

});

needs to contain ALL of your jQuery not just your event listeners.
[/quote]

Sorry but that is bullcrap You can place the function outside if you want.
The reason why it didnt work is how you did the append. In JS you cant create multiline variables like that. Instead you have to "glue" the lines together like this:

Code:

function addItem(){
    $('#divItems').append('<label for="item[]">Item description</label>'
        + '&lt;input type="text" name="item[]" id="item[]" class="short" /&gt;'
        + '<em>E.g. Repairs - 5 hours @ &pound;10 /hr</em>'
        + '<label for="price[]">Price</label>'
        + '&lt;input type="text" name="price[]" id="price[]" class="short" /&gt;'
    );
}

[eluser]sidscorner[/eluser]
Like cahva said above, get rid of the linebreaks.

If you had checked your console, you'd have seen an "unterminated string literal" error.

[eluser]sidscorner[/eluser]
[quote author="pianoman993" date="1269739679"]$(document).ready(function() {

});

needs to contain ALL of your jQuery not just your event listeners.

Hope this helps,
Mark Anderson[/quote]

It is not necessary to put your functions inside $(document).ready() - only events you want to load as soon as the DOM is ready.

[eluser]anthrotech[/eluser]
Okay...what is the most efficient way to do what you recommended?

"Like cahva said above, get rid of the linebreaks." I have tried using the chr and preg_replace to no avail. How do you remove them?

I need to do this with form_dropdown since it creates line breaks and messes up Javascript.

[eluser]danmontgomery[/eluser]
http://forum.jquery.com/

[eluser]anthrotech[/eluser]
Thanks for the redirection...I figured it out.

$dropdown_add_month = preg_replace("/\r?\n/", "\\n", $dropdown_add_month);

It was a PHP question as relates to using a helper within Codeigniter, so I think it's most appropriate to ask the question here.

Are you the moderator of this forum? May be you should let the moderator do their job.

[eluser]InsiteFX[/eluser]
Are you the moderator of this forum? Do you see Moderator in his Title?

May be you should let the moderator do their job. They do their job and very well.

InsiteFX