jQuery delete text on input after submit

Question

I putted a jQuery script on my chat so the message sends without page refreshing.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
            $("#msgsending").validate({
               type: "POST",
                    debug: false,

                    submitHandler: function(form) {
                            // do other stuff for a valid form
                            $.post('index.php', $("#msgsending").serialize(), function(data) {

                            });
                    }
            });
    });
    </script>

And form

 <form id="msgsending" name="form" method="post" action="" > 
<input name="message" id="message" type="text" maxlength="350" />

<input name="message" id="message" type="text" maxlength="350" />

<input name="submit" type="submit" value="Send!" />

</form>

The code works perfectly. (index is the script that insert the message + username in the database)

But now I have a issue.

The text don't delete on the message input after submitting. I've google'd alot of pages and all the codes didn't work. (Somes worked but message isn't sending)

What do you recommand me?

You are using id=messageon two inputs. jQuery assumes only one element with that id, mening that it only accesses the first. — mariusnn
– mariusnn, Commented Feb 20, 2013 at 15:28
I'm actually only using one. But I accidently putted two while writing the question. — user2091820
– user2091820, Commented Feb 20, 2013 at 15:32

Sparky · Accepted Answer · 2013-02-20 16:26:53Z

1

$('#message').val(''); should clear the input's value, and I'm guessing you'd do this after the message was sent, something like:

$(document).ready(function(){
    $("#msgsending").validate({
       type: "POST",
          debug: false,
          submitHandler: function(form) {
               // do other stuff for a valid form
               $.post('index.php', $("#msgsending").serialize(), function(data) {
                    $('#message').val('');
               });
          }
    });
});

This will only work on the first element with the ID #message, as ID's are unique and you can't have two elements with the same ID.

edited Feb 20, 2013 at 16:26

Sparky

98.8k26 gold badges202 silver badges293 bronze badges

answered Feb 20, 2013 at 15:27

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2091820 Over a year ago

Thank you! I'm a beginner at jQuery and I didn't though of doing that.

marekful · Accepted Answer · 2013-02-20 15:28:22Z

0

Instead of

$.post('index.php', $("#msgsending").serialize(), function(data) {

});

you could do something like:

var data = $("#msgsending").serialize();
$('#message').val('');

$.post('index.php', data, function(data) {

});

to empty the message field before sending the request OR as @adeneo suggest, you can empty the field in the success callback of the AJAX.

answered Feb 20, 2013 at 15:28

marekful

15.4k6 gold badges39 silver badges63 bronze badges

Comments

Sparky · Accepted Answer · 2013-02-20 16:26:10Z

You can place any code within the callback function of .post() in order to clear out or reset the form.

You also have type: "POST" listed as an option for .validate(). You should remove this as it's not a valid option/parameter for this plugin.

Since you're doing ajax, you'll need a return false at the end of your submitHandler in order to prevent a page redirection.

Optionally, you can also replace $('#msgsending').serialize() with $(form).serialize() or form.serialize() since form is passed into the submitHandler callback function.

$(document).ready(function(){
    $("#msgsending").validate({
        type: "POST", // <-- REMOVE THIS... not a valid plugin option
        debug: false,
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('index.php', $(form).serialize(), function(data) {
                $('#message').val(''); // clears out #message
                // any other code to clear out or reset the form
            });
            return false; // prevent page redirection
        }
    });
});

Collectives™ on Stack Overflow

jQuery delete text on input after submit

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related