How to renew a text input value in a js var in jquery

Question

Hello,

I have a jquery + plugin Boxy + form input mess.

That´s the situation:

1 - when I press a link, a form with only a text input and a submit button appears in a popup.

2- When I write some text and press the submit button, I get the text input value in a js var, and send it by ajax to a PHP function that performs a operation a returns the result.

3 - I get the result, and the popup is closed. All is fine.

My problem begins when I want to repeat the operation. When I click the link in the step 1 to make the form to appear, the text input in the form still has the first operation value. I thought it should be a new form, but it seems to be still the first one. I don´t know how to renew the text input value.

Here´s my code: (still in develop phase)

<script type="text/javascript">
    $(document).ready(function() {

    var myForm = '<div><form action="" method="">';
    myForm += 'New gallery name <input type="text" name="galleryName" /><br />';
    myForm += '<input type="button" name="create" value="create" />';
    myForm += '</form></div>';

    var littleWindow = null;
        $('#new_gallery').click(function(){
            littleWindow = new Boxy(myForm,
                    {
                        type:'POST',
                        modal:true,
                        closeable:true,
                        title:'some title',
                        behaviours: function(c) {
                            c.find('input[name="create"]').click(function(){
                                var newGalleryName = $('input[name="galleryName"]').val();
                                if(newGalleryName.length < 3)
                                {
                                    Boxy.alert('Please, write a name for your gallery');
                                } else {
                                    alert(newGalleryName);//To check its value. It doesn´t refresh!

                                    $.post('photos/new_gallery/'+newGalleryName,function(data){
                                        if(data=='error')
                                        {
                                            Boxy.alert('ERROR',function(){littleWindow.hide()});
                                        } else {
                                            Boxy.alert('the gallery with ID '+data+' has been created',function(){
                                                    littleWindow.hide(function(){
                                                            var newGalleryDiv = '<div class="gallery" title="'+data+'"><h3>'+newGalleryName+'</h3></div>';
                                                            $('#galleries').append(newGalleryDiv);
                                                        });
                                                }); 
                                        }//else #2
                                    });

                                }//else #1
                            });
                        }//behaviours
                    });
         });

    });
    </script>

Why the second time I do $('#new_gallery').click(function(){... I don´t have a new fresh form?

Can someone give me a light? Thanks in advance.

EDIT

I have published a video in Youtube to show you my problem:

http://www.youtube.com/watch?v=fNftwwVXvYc (1080 recommended) In the video, the code and the web are in spanish. I have translate it here in the StackOverflow.

Answer 1

$('input[name="galleryName"]').val("");

or

$('input[name="galleryName"]').attr("value","");

use this at the end of your script this will clear your form input

EDIT

did you try to use something like this

//BEFORE
$('#galleries').append(newGalleryDiv);
//AFTER
$('#galleries').append(newGalleryDiv).find('input[name="galleryName"]').attr("value","");

Answer 2

Ara you mixing PHP and JavaScript? There is no .= operator in JavaScript. You probably wanted to use +=