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, Mar 20 '12 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, Mar 20 '12 at 14:54
@TJ. I missed that, however I think `preventDefault()` is the preferred method when using jQuery — ianbarker, Mar 20 '12 at 14:57
@ianbarker We're in agreement, it's in general the better method because you can place it right at the beginning of the event handler and if an error occurs afterwards the default action is still not executed. This is where return false fails. — T. Junghans, Mar 20 '12 at 15:03

score 3 · Answer 1 · answered Mar 20 '12 at 14:53

3

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

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

answered Mar 20 '12 at 14:53

T. Junghans

11,385
7
52
75

score 2 · Answer 2 · edited Oct 19 '12 at 14:13

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 '12 at 14:13

Hristo Iliev

72,659
12
135
186

answered Mar 20 '12 at 14:53

Hamza Waqas

629
4
12

and I should be able to receive them in my php file line normal $_POST['']? – Jakub Zak Mar 20 '12 at 15:00
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! – Hamza Waqas Mar 20 '12 at 15:06

score 2 · Accepted Answer · answered Mar 20 '12 at 14:59

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 '12 at 14:59

The Alpha

143,660
29
287
307

why is it on submit reloading whole page? – Jakub Zak Mar 20 '12 at 15:07
1

Did you added e.preventDefault(), please take a look at this http://jsfiddle.net/GkCbD/2/ – The Alpha Mar 20 '12 at 15:11

jquery ajax form submit

3 Answers3

Linked