jquery ajax form submit

Question

Is this code correct? I'm trying to submit it and also I would like on submit if text area would be empty again.

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

    $("form#submit").submit(function() {
        // we want to store the values from the form input box, then send via ajax below
        var fid = $(".messag").attr("id");
        var val = $("#mess_ar").val();
        $.ajax({
            type: "POST",
            url: "send_message.php",
            data: "fid="+ fid +"&val="+ val,
            success: function(){
                    $("#mess_ar").
            }
        });
        return false;
    });
}):
</script>

I'm trying to upload this:

<form id="submit" method="POST">
<textarea name="mess_cont" id="mess_ar" autofocus="autofocus" cols="70" rows="5">      </textarea>
<button id="mess_but" type="submit">Send</button>
</form>

Thankx...

you probably need to add a parameter into your event catching function like so $("form#submit").submit(function(e) { you can then use e.preventDefault() to stop the default action, submit, from happening — ianbarker
– ianbarker, Commented Mar 20, 2012 at 14:53
Nothing in the HTML you posted has class "messag", so that line that tries to set "fid" will set it to null. Also the "success" function is clearly incomplete; do you want to just cal .val('') to clear the textarea? — Pointy
– Pointy, Commented Mar 20, 2012 at 14:54
@TJ. I missed that, however I think preventDefault() is the preferred method when using jQuery — ianbarker
– ianbarker, Commented Mar 20, 2012 at 14:57

T. Junghans · Accepted Answer · 2012-03-20 14:53:38Z

3

Looks good. To empty the textarea use the following in the ajax success callback:

$("#mess_ar").val('');

answered Mar 20, 2012 at 14:53

T. Junghans

11.7k8 gold badges55 silver badges78 bronze badges

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

Comments

The Alpha · Accepted Answer · 2012-03-20 14:59:48Z

2

$(function(){
    $("form#submit").submit(function(e){
        e.preventDefault();
        var fid = $(".messag").attr("id");
        var val = $("#mess_ar").val();
        $.ajax({
            type: "POST",
            url: "send_message.php",
            data: "fid="+ fid +"&val="+ val,
            success: function(){
                $("#mess_ar").val("");
            }
        });
    });
});

Use

$("#submit").on('submit', function(e){...});

instead of

$("#submit").submit(function(e){...});

if you are using latest version of jquery.

answered Mar 20, 2012 at 14:59

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

Jakub Zak Over a year ago

why is it on submit reloading whole page?

The Alpha Over a year ago

Did you added e.preventDefault(), please take a look at this jsfiddle.net/GkCbD/2

Hristo Iliev · Accepted Answer · 2012-10-19 14:13:27Z

2

What are you actually looking for? Does it return the data in response too? Add the functions to track your the error case too. Make something like

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

    $("form#submit").submit(function() {
       // we want to store the values from the form input box, then send via ajax below
       var fid = $(".messag").attr("id");
       var val = $("#mess_ar").val();
       $.ajax({
          type: "POST",
          url: "send_message.php",
          data: "fid="+ fid +"&val="+ val,
          success: function(incoming_data){
             // ALERT incoming data if coming
             $("#mess_ar").text(""); // DO YOUR JOB CONTINUOU
          },
          error: function() { 
             alert("BROKEN REQUEST.");
          }
       });
       return false;
   });

});
</script>

Else, seems all fine.

edited Oct 19, 2012 at 14:13

Hristo Iliev

74.9k12 gold badges148 silver badges197 bronze badges

answered Mar 20, 2012 at 14:53

Hamza Waqas

6274 silver badges12 bronze badges

2 Comments

Jakub Zak Over a year ago

and I should be able to receive them in my php file line normal $_POST['']?

Hamza Waqas Over a year ago

yeah, as you are passing parameters from your ajax ` data: "fid="+ fid +"&val="+ val` so they can be accessed in php by $_POST['fid'] and '$_POST['val']'. However, error comes in the form of client side error object. So, if you want to pass to php server side, you need to make another can in which you pass your Error Object!

Collectives™ on Stack Overflow

jquery ajax form submit

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related