1

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>
aborted
  • 4,481
  • 14
  • 69
  • 132

4 Answers4

3

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()
Milimetric
  • 13,411
  • 4
  • 44
  • 56
Fredrik
  • 2,016
  • 3
  • 15
  • 26
  • Thanks for responding. You asked for the HTML and I've added it to the first post. – aborted Jun 02 '11 at 20:06
  • Hm, does look correct. Check with Firebug, or Developer Console in Google Chrome while ajax-submitting the form and check for errors. Does it work multiple times to submit the form if you never click the reset button? – Fredrik Jun 02 '11 at 20:13
  • Ok, then the problem is not related to the reset function at all. In your success callback for the ajaxSubmit, it would be interesting to see the content of the response variable. You can add console.debug(response); and inspect the variable in Firebug/Developer Console. I presume ajaxSubmit is some custom plugin? Because normally, you receive the actual response data through an ajax call by accessing it through response.data and not response. – Fredrik Jun 02 '11 at 20:26
  • Yep, it is a custom jQuery plugin, that sends forms using Ajax. http://plugins.jquery.com/project/form Can you please re-explain what to do? :) Thanks a lot for your time mate. – aborted Jun 02 '11 at 20:30
  • Change the code to look like this: success: function(response) { alert("Form submitted without any errors!.. now go check in your favorite javascript console what response contains"); console.debug(response); $('#remoted').html(response).hide().slideDown('fast'); $('#loader1').fadeOut('normal'); } Let me know if you didn't get a alert box. If you did, follow the instructions in the alert and let me know what it contained. – Fredrik Jun 02 '11 at 20:37
  • I received the Alert Box with the message, but I couldn't manage to get the content of _response_. – aborted Jun 02 '11 at 20:50
  • What browser are you using, Chrome or Firefox with Firebug installed? – Fredrik Jun 02 '11 at 20:51
  • Firefox with Firebug installed. – aborted Jun 02 '11 at 20:52
  • Ok, so open up Firebug and click on the Console tab. Then change console.debug(response) to console.debug("ResponseText", response). Then the Firebug logger should log a record with "ResponseText" with a variable. You should be able to inspect the variable or at least see the content of the variable if it's a string and not an object. – Fredrik Jun 02 '11 at 20:55
  • I still couldn't manage to do that you said. But what I can tell you is that _response_ includes remote.php's content (php and html). – aborted Jun 02 '11 at 21:06
  • Hm, damn... But ok, if you know that response contains remote.php content then you must have managed to inspect the variable in some way at least. But do you really mean PHP and html? You sure it contains PHP? I guess you can do like this instead. Change this line $('#remoted').html(response).hide().slideDown('fast'); to this: $('#remoted').html(response);... What does #remoted container contain then? – Fredrik Jun 02 '11 at 21:12
  • Okay, let me explain the situation: #remoted is going to output the response using _html();_. I just used slideDown to make the coming of response more attractive. – aborted Jun 02 '11 at 21:17
  • Yeah, I understand that. But since it doesn't submit multiple times, one possibility would be that the response is not what you'd expect it to be. That's why I wanted you to inspect the response by removing the "hide()" of the #remoted jquery instance. However, I don't think I can help further... It's too hard to debug through this stupid comment form :) But what you can try to do is to stop depend on the ajaxSubmit plugin and just do it the "vanilla way" explained here: http://api.jquery.com/jQuery.post/ it's dead simple. – Fredrik Jun 02 '11 at 21:26
  • @Fredrik update: in jquery 1.9 live was removed, they suggest using "on" instead – Timo Huovinen Feb 02 '13 at 20:39
1
 $('#remote-upload').get(0).reset();
webdynamik
  • 11
  • 3
1

See this question/answer to see how to reset without the plugin:

Resetting a multi-stage form with jQuery

The problem is probably caused by the resetForm plugin you're using, probably "die"ing the events or attributes on the form or something.

Community
  • 1
  • 1
Milimetric
  • 13,411
  • 4
  • 44
  • 56
  • As I said, it changes nothing. I've already tried this solution as I found it via Google. I just retried it and nothing happened, again. – aborted Jun 02 '11 at 20:04
1

Try to make it as live click

$('#remote-start').live('click',function(){.....});
T1000
  • 2,909
  • 7
  • 36
  • 53