HTML form is POSTing incorrectly, ignoring jQuery AJAX specifying to format in JSON

Question

So the primary problem seems to be that my jQuery code is being completely ignored for some reason. My form is POSTing data, but it seems to be in regular key-value pairs as opposed to properly formatted JSON. The issue with what the server is receiving is exactly the same as here: How can I use JQuery to post JSON data?

My form wasn't POSTing at all until I added the 'action=' and method="POST" to my form section of my HTML, and added a 'name='value to each form input area (textboxes, dropdowns, etc.). But now that it is posting, it is using the name= 'abc' as the first value in each pair, and the value of the input as second. I've tried deleting all my jQuery to test this, and it still POSTs exactly the same way, even when there's no jQuery in the code. Below is my jQuery, designed to POST my four inputs as JSON.

<script>
$(document).ready(function() {
    env1.checked = true;

    $("button").click(function() {
        var x = {
            "apiName": $("#apinameid").val(),
            "apiURL": $("#apiurlid").val(),
            "environment": $("#envid").val(),
            "action": $("#actionid").val()
        }

        $.ajax({
            url: 'http://requestb.in/1kynzln1',
            type: 'POST',
            contentType: "application/json",
            dataType: "json",
            data: x,

            success: function(json) {
                alert(JSON.stringify(json));
            },

            error: function() {
                alert(data);
            }
        });
    });

});

And here is my HTML (the part which is probably relevant)

  <div class="section section-primary"><div class="container"><div class="row"><div class="col-md-12"><h1 class="text-center">Akana Server Proxy Configuration Portal</h1></div></div></div></div>
<div class="section section-warning">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3 class="text-left">Please enter your API's information below:</h3>
      </div>
    </div>
  </div>
</div>
<div class="section section-warning">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <form action="http://requestb.in/1kynzln1"method="POST"role="form">
          <div class="form-group">
            <label class="control-label" for="exampleInputEmail1">API Name</label>
            <input name="apiName" class="form-control input-lg" id="apinameid" placeholder="Cat API" type="text">
          </div>
          <div class="form-group">
            <label class="control-label" for="exampleInputEmail1">API URL</label>
            <input name="apiURL" class="form-control input-lg" id="apiurlid" placeholder="http://cats.com/api" type="text">
          </div>
          <div class="form-group">
            <label class="control-label">Environment</label>
            <select name="environment" id="envid" class="form-control">
              <option value="Dev" id="devid">Dev</option>
              <option value="Stage" id="stgid">Stage</option>
              <option value="Prod" id="prodid">Prod</option>
            </select>
            </div>
          </div>
          <div class="form-group"></div>
          <div class="form-group">
            <label class="control-label">Configuration Action</label>
            <select name="action" id="actionid" class="form-control">
              <option value="Add" id="add">Add a new API</option>
              <option value="Remove" id="remove">Remove an API</option>
            </select>
            <p class="help-block">You can add or remove access to an API by configuring the proxy.</p>
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>

Any help is very much appreciated! Thank you!

Your button element is a submit button, and your click handler does not cancel the default click behaviour which is to submit the form - so at the moment a "standard" (non-JS) form submission will occur regardless of whether your Ajax code works or not. Note also that if an Ajax error occurs it might be shown in the console, but your `error` handler's `alert(data)` won't work because `data` is not defined. — nnnnnn, Aug 01 '16 at 00:16
How do I prevent the default form submission behavior from occurring? — user6656429, Aug 01 '16 at 00:38
Unfortunately, neither of these seem to be working. When I change the button type, it continues to ignore my AJAX, it simply does not post anything at all. Adding the preventDefault() seems to have no effect, it continues to post incorrectly, and when the two are combined (preventDefault and switching to button type), it again doesn't post. I have a strong feeling the issue is coming from my formatting or syntax in my jQuery, since Sublime text has been highlighting that script it might mean something is incorrect. — user6656429, Aug 01 '16 at 11:40
What is `env1` from the first line of the document ready handler? If that's not defined in an earlier script you'd get a runtime error and the button click handler wouldn't be bound. Are there any errors shown in the console? — nnnnnn, Aug 01 '16 at 12:11
Okay, so I've deleted env1 (that did seem to be a problem). It is now POSTing closer to how it should be. I also changed dataType in the AJAX to "jsonp" The console is now displaying the following error: uzuoljuz?callback=jQuery2030410…_1470058804961&{"apiName":"ff","apiURL":"44","environm…:1 Uncaught ReferenceError: ok is not defined._______________________The first "uzuolijuz" part is the URL i'm posting to, the {"apiName"..."} stuff is my JSON, and "ok" is the response from the HTTP server. The callback near the beginning seems to be the problem — user6656429, Aug 01 '16 at 13:44
Why did you change it to `jsonp`? Does the service you are posting to support jsonp? (Are you posting to your own server, or some third-party server?) — nnnnnn, Aug 01 '16 at 21:22

score 0 · Answer 1 · answered Aug 01 '16 at 00:10

0

Simple answer, in JavaScript object, you mustn't use quotes as value key:

Your code:

var x = {
        apiName: $("#apinameid").val(),
        apiURL: $("#apiurlid").val(),
        environment: $("#envid").val(),
        action: $("#actionid").val()
    }

answered Aug 01 '16 at 00:10

Sebastian Schneider

4,896
3
20
47

This is not correct. With or without quotes is fine. – nnnnnn Aug 01 '16 at 00:15

HTML form is POSTing incorrectly, ignoring jQuery AJAX specifying to format in JSON

1 Answers1