JQuery multiple POSTs on form submission

Question

I am trying to submit my form to 2 different scripts on form submission. ScriptA that the form is submitted to redirects on submission. ScriptB doesnt give response of any kind, just writes the given info down.

I can't get the submission to work and I am not very experienced with JQuery and it is my first time so I was hoping someone could point out why my form isn't properly submitting with JQUERY.

Body of Html:

<script type="text/javascript">
$(document).ready( function(){
    $('#submit').click(function(){
    //Send data to the email script
    $.post( 'authenticate.php', $('Auth').serialize(), function(data, textStatus) {
        //data is the result from the script
        alert(data);
    });

    //Send data to the other script
    $.post( 'http://Service3.com/j_security_check', $('Auth').serialize(), function(data, textStatus) {
        //data is the result from the script
        alert(data);
    });
    });
});
</script>

Body of html Form:

<form action=authenticate.php method=post name=Auth id="form" class="appnitro">
 <div class="form_description"><h2>Login</h2></div>
<ul>
    <li id="li_1" >
        <label class="description" for="element_1">Username </label>
        <div>
        <input id="element_1" name="j_username" class="element text medium" type="text" maxlength="255" value=""/>
        </div>
    </li>

    <li id="li_2" >
        <label class="description" for="element_2">Password </label>
        <div>
        <input id="element_2" name="j_password" class="element text medium" type="password" maxlength="255" value=""/>
        </div>
    </li>

    <li class="buttons">
     <input id="saveForm" class="button_text" type="submit" name="submit" id="submit" value="Log In" />
    </li>
</ul>
</form>

One off topic question I have is how do I fix the formatting of my code? whenever I post my code here I always get huge indentation.

Answer 1

$(document).ready( function(){

  $('#form').submit(function(){

    $.ajax({
      type: 'POST',
      async: false,
      url: "your_url_1",
      data: $(this).serialize(),
      success: function(data, status, xhr){
        alert('ok');
      },
      error: function(xhr, status, err) {
        alert(status + ": " + err);
      }
    });

    $.ajax({
      type: 'POST',
      async: false,
      url: "your_url_2",
      data: $(this).serialize(),
      success: function(data, status, xhr){
        alert('ok');
      },
      error: function(xhr, status, err) {
        alert(status + ": " + err);
      }
    });

  });

});

Answer 2

You have some issues with your code. Instead of binding to the click event for the submit button, why not bind to the submit event for the form. Also when you serialize the form you want to target the form and you were selecting $('Auth') which will try to select any Auth tags (which don't exist).

$('#form').submit(function(){
    //Send data to the email script
    $.post( 'authenticate.php', $(this).serialize(), function(data, textStatus) {
        //data is the result from the script
        alert(data);
    });
    return false;//this stops the form from submitting normally
});

Your second $.post() looks like it's sending the form submission to a different domain that the one the user is currently on. You can only do this with JSONP : http://api.jquery.com/jquery.ajax (do a search for JSONP and you will find excellent information on how to do this)