jQuery HTTP Post stopped working, only works when long strings are input

Question

Quick background: Very new to web development. I have a bootstrap page with a form which users can fill out. There are four fields (two text boxes, one radio, one dropdown). The idea was to form a JSON using that input data and POST it to my HTTP server, but it doesn't seem to be working anymore.

Very strange, my code was working perfectly a few hours ago (have been testing with requestb.in). Now all of a sudden it (1) only sends the POST if I have long values for the apiname and apiurl variables, and (2) no longer sees what I've chosen from the radio checkboxes (env1 - env3), and instead always thinks I've chosen 'Dev,' regardless of what was actually selected. I'm assuming my issues are caused by the jQuery in my code and not the HTML, so I've attached that here:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">        </script>

    <script>
    $(document).ready(function(){
        $("button").click(function(){
            var env1 = document.getElementById("seldevid");
            var env2 = document.getElementById("selstageid");
            var env3 = document.getElementById("selprodid");
            var apiname = $("#apinameid").val();
            var apiurl = $("#apiurlid").val();
            var actionvar;
            $("#actionid").change(function() {
            actionvar = $(this).val();
            }).change();
            if (env1.checked = true) {
                var env = "Dev";
            } else if (env2.checked = true) {
                var env = "Stage";
            } else if (env3.checked = true) {
                var env = "Prod";
            }
            $.post("http://requestb.in/107fmof1",
            {
              apiName: apiname,
              apiURL: apiurl,
              environment: env,
              action: actionvar
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
            });

        });




    });
    </script>

Thanks for the help!

score 0 · Answer 1 · edited May 23 '17 at 12:08

First Question: Why Always "Dev"?

The issue is in your if statements you have used an assignment, rather than a boolean comparison. You need to use == to compare the two values for equality. Instead you are setting env1.checked = true, which evaluates to true, so env is always being set to "Dev".

if (env1.checked == true) {
     var env = "Dev";
} else if (env2.checked == true) {
     var env = "Stage";
} else if (env3.checked == true) {
     var env = "Prod";
}

or even

var env;
if (env1.checked) {
     env = "Dev";
} else if (env2.checked) {
     env = "Stage";
} else if (env3.checked) {
     env = "Prod";
}

Second Question: Why not posting?

You should try simplifying your code a bit:

$(document).ready(function(){
    var env1 = document.getElementById("seldevid");
    var env2 = document.getElementById("selstageid");
    var env3 = document.getElementById("selprodid");

    $("button").click(function(){
        var env = "Dev";
        if (env2.checked) {
            env = "Stage";
        } else if (env3.checked) {
            env = "Prod";
        }

        $.post("http://requestb.in/107fmof1",
            {
                apiName:     $("#apinameid").val(),
                apiURL:      $("#apiurlid").val(),
                environment: env,
                action:      $("#actionid").val()
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + status);
            }
        );
    });
});

Then using the browser Developer Tools to see what exactly is being POST'd, if anything.

Hmm, this seems to have solved the radio button issue, but it still doesn't POST consistently. I can't seem to even find any patterns with when it does and doesn't POST, seems completely random. I've used the developer tools, and that shows that there's almost always a POST, but the 'parameters' are empty almost every time (so the HTTP server doesn't receive anything). — user6656429, Jul 30 '16 at 15:12
One possibility is that you are submitting the form before the $(document).ready(...) code is executed. In that case, if you didn't specify any names for the form fields, then you would see an empty POST. — Andy, Jul 30 '16 at 18:42
In the case of the empty POST, are you seeing the apiName, etc fields, but they are empty? or are you seeing no POST data? or what? Also, does your
tag have an action and method defined? If so, what are they? — Andy, Jul 30 '16 at 18:43
It seems to work properly 60% of the time when using Firefox, and about 25% of the time when using Chrome. When using Developer Tools in Chrome, it never even registers that a post is being made, even when it successfully goes through. In Firefox, it always registers the post, but the parameters don't show up at all when it doesn't go through properly (completely blank parameters area), but when the POST does go through, the parameters show up correctly. Interestingly, when I hit submit without entering anything into the form, it will almost always go through successfully (values are " ") — user6656429, Jul 31 '16 at 00:42

jQuery HTTP Post stopped working, only works when long strings are input

1 Answers1