jquery $.post not working in some browsers

Question

 $(document).ready(function(){
     $("#btnc").click(function(){
            $.post("php/snova_campanha.php", {campanha : $("#campanha").val() },
                function(data){
                    if(data == "1" )
                    {
                        alert(data);
                    }
                    else
                        alert(data);
                });
     });
});

the php only has:

<?php
echo 0;
return;
?>

HTML:

<div id="corpo" align="center">
    <br/><br/>
    <h1 align="center" style="color:#F8F8F8">Nova Campanha</h1>
    <br/><br/><br/>
    <form id="novacamp">
        <label style="color:#F8F8F8" for="campanha">Nome</label>
        <input align="middle" size="35" type="text" name="campanha" id="campanha"/>
        <br/>
        <input type="submit" id="btnc" value="OK"/>
    </form>
</div>

Im using this php just for tests, i will implement inserting into database, and returning 1 with sucess or 0.

Well, I have two pages, the other one is working fine:

WORKING LOGIN PAGES:

 $(document).ready(function(){
     $("#login").click(function(){
        $("#login").attr("disabled", "disabled");
                $.post("php/slogin.php", {usuario : $("#usuario").val(), senha : $("#senha").val()},
                function(data){
                    if(data != "1" && data != "0")
                    {
                        alert(data);
                        $("#login").removeAttr("disabled");
                    }
                    else
                        window.location = "principal.php";
                });
     });
});

HTML

<div id="bar">
    <div id="container">
        <!-- Login Starts Here -->
        <div id="loginContainer">
            <img id="logoNetradio" src="../images/logonetradio3.png"/>
            <br/><br/><br/>
                <form id="formLogin">
                    <label for="usuario">Usuário</label>
                    <input align="middle" size="35" type="text" name="usuario" id="usuario"/>
                    <br/><br/>
                    <label for="senha">Senha</label>
                    <input align="middle" size="35" type="password" name="senha" id="senha" />
                    <br/>
                    <input type="submit" id="login" value="Login"/>
                </form>
        </div>
        <!-- Login Ends Here -->
    </div>
</div>

I dont see any difference......... When I run the non-working code, the address on my browsers changes to www.myaddress.com/current_page.php?campanha=value_on_textfield seems like $.post is making a GET request on the current page... Both codes works on IExplore and the working pages works on chrome and IE but not on firefox.... Any ideas?

Answer 1

Actually, return false has some side effects in jQuery event handlers that most people aren't aware of. If all you want to do is prevent the form from submitting, then you should be using event.preventDefault().

To make your life easier, I'd recommend changing your PHP file to return json, like so:

<?php
echo "{'status':'0'}";
?>

Then specify 'json' when performing the post:

$(document).ready(function(){
     $("#btnc").click(function(evt){
            $.post(
                "php/snova_campanha.php", 
                {campanha : $("#campanha").val() },
                function(data){
                   alert(data.status);
                },
                "json"
            );
            // Keep the form from submitting
            evt.preventDefault();
     });
});

Also, I will suggest looking into malsup's excellent jQuery form plugin, which takes care of the majority of what you're trying to do here.

Finally, you can try using the full $.ajax call instead of $.post:

$('#btnc').click(function(evt) {
   $.ajax({
       method: 'POST',
       url: 'php/snova_campanha.php',
       data: {
           campanha: $('#campanha').val()
       },
       dataType: 'json',
       success: function(data, status) {
           alert(data);
       },
       error: function(jqXHR, status, err) {
           alert('ERROR');
           alert(String(err));
       }
   });
   evt.preventDefault();
});

What's probably happening is that the $.post call is throwing an error. Using $.ajax as above will allow you to catch that error.

Answer 2

The click event of your button should return false, if the intent is to not allow the button to post the form.