Question

I’m working on a PHP + HTML + jQuery project. And there are quite some coding knowledge problem I faced during my way of coding – But I’m almost done with it! To get it done, I just need this last help (for this project for sure) to get done.

So, what I need is to RESET a form using jQuery after this:

1) I have a form that includes a and a to submit the form (not type=”submit”, since I’m using jQuery Ajax to submit the form)

2) I hit the button to make the form send and give back some information using a jQuery plugin etc.

3) I get the results in the same page as you might have understood. And using jQuery, I make a button that says RESET available, to reset everything I just did using Ajax.

4) The RESET button has to do the following code:

$('#remote-reset').live('click', function() // The reset button
{
    $('#remoted').slideUp('fast', function(){ $('#remoted').empty(); }); // the div that is seen after Ajax submitting the form
    $(this).hide(); // hide this button when I click it
    $('#remote-start').show(); // see the <input type="button" /> again
    $('#remote-urls').empty(); // empty the textarea
    $('#remote-upload').resetForm(); // reset the form using a jQuery plugin, doesn't work at all
});

5) I click the RESET button and it does all above, but it wont do the most important thing: It’s not making it possible to SEND a new form again with other information in the WITHOUT refreshing the page. $(‘#remote-start’).show(); would have to SEND the form again, but I simply click over it and nothing happens.

So, in short words: I send a form with information -> Get results -> Hit reset -> Form is all cleared -> Put in new information -> Hit Submit -> Nothing happens.

Why would this happen and what would be the solution? Ideas?

EDIT (Submit button code):

$('#remote-start').click(function()
{
    $('#loader1').show();
    $(this).hide(); 
    $('#remote-reset').show();
    $('#remote-upload').ajaxSubmit(
    {
         success: function(response)
         { 
            $('#remoted').html(response).hide().slideDown('fast');
            $('#loader1').fadeOut('normal');
         }
    });
});

HTML Code:

    <div id="remote" style="display: none;">
<form action="remote.php" method="post" id="remote-upload">
    <br /><br />
    <textarea name="remote-urls" id="remote-urls" rows="12"></textarea><br/>
    <input type="button" name="remote-start" id="remote-start" class="remote-button" value="Upload Images" />
    <input type="reset" id="remote-reset" class="remote-button" value="Reset" style="display: none;" />
    <br /><br />
    <span class="normal">
        Maximum <strong>20</strong> images.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong>10 MB</strong> for one image.
    </span>
</form>
    <div id="remoted">
        <img id="loader1" src="css/images/loader.gif" style="display: none;" />
    </div>
</div>

Answer 1

Maybe you are resetting fields not supposed to be reseted – Like values in hidden inputs. It would really help out if you provide the html code.

But if you want to have better control of the fields that you need to reset, you can do like this:

$("input[type=text], textarea").val("")

That would reset all input with type="text" and all textarea tags.

edit

Oh, and by the way. You need to use live, and not click if you are replacing the content where the element with id #remote-start is. Because, if you don’t the event won’t get triggered when re-submitting.

Basically

$('#remote-start').click(function()

needs to be replaced with

$('#remote-start').live('click', function()