Error submitting form using JQuery Mobile

Question

I'm making a small web app using JQuery Mobile and Multi Page architecture.

I have a form as my second page. When I click the submit button, I get this error on my console. I need this web app to work on my phone but I'm testing it on my PC browser to see for possible errors.

I'm using localStorage to save the form data in an array in the phone's memory.

Why am I getting this error? I tried with "get" but it just refreshes and takes me back to my home page.

below is my form code:

<div data-role="page" id="entry_page">
        <div data-role="header">
            <a href="#" onclick="clearFields()" data-icon="refresh">Clear</a>
            <h3 id="chickenNameHeader"></h3>
            <a href="#" onclick="showLogs()" data-icon="action" >Show Logs</a>
        </div>

        <div class="form-container">
            <form action="" method="post">

                <label for="ID_input">ID:</label>
                <input id="ID_input" type="number" placeholder="xxxx">

                <label for="weight_input">Weight (g):</label>
                <input id="weight_input" type="number" step="any" min="0" max="10000" placeholder="0. &rarr; 10000">

                <label for="eggs_input">Eggs laid:</label>
                <input id="eggs_input" type="number" min="0" max="4" placeholder="0 &rarr; 4">

                <label for="grain_input">Grain eaten (g):</label>
                <input id="grain_input" type="number" step="any" min="0" max="1000" placeholder="0. &rarr; 1000">

                <label for="category_input">Category:</label>
                <select id="category_input" required="true">
                    <option value="empty" selected></option>
                    <option value="poor">Poor</option>
                    <option value="average">Average</option>
                    <option value="good">Good</option>
                </select>

                <button id="submitBtn" type="submit" name="button">Save log entry</button>
            </form>
        </div>

        <div data-role="footer" class="ui-bar">
            <a id="6" href="#"  onclick="traverse(this)" data-icon="arrow-r" data-ajax="false" >Next</a>
            <a id="7" href="#" onclick="traverse(this)" data-icon="arrow-l" data-ajax="false" >Previous</a>
            <a id="5" onclick="getID(this)" href="#" data-icon="home" >Home</a>
        </div>
    </div>

Below is my submit button handler in JS:

//Initialise entry page for the first time and handle form submission validation
$(document).delegate("#entry_page","pageinit",function()
{

  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }

  changeHeaderName("#chickenNameHeader");

  $("#submitBtn").click(function(event)
  {
    var id = $.trim($("#ID_input").val());
    var weight = $.trim($("#weight_input").val());
    var eggs = $.trim($("#eggs_input").val());
    var grain = $.trim($("#grain_input").val());
    var category = $("#category_input").val();
    var error_free = 1;

    if(id == "")
    {
      alert("Please enter a 4 digit ID");
      error_free = 0;
    }

    if(weight == "")
    {
      alert("Please enter the amount of weight");
      error_free = 0;
    }

    if(eggs == "")
    {
      alert("Please enter the amount of eggs laid");
      error_free = 0;
    }

    if(grain == "")
    {
      alert("Please enter the amount of grain eaten");
      error_free = 0;
    }

    if(category == "empty")
    {
      alert("Please select a category");
      error_free = 0;
    }

    if(Number(id) < 1000 || Number(id) > 9999)
    {
      alert("ID must be 4 digits");
      error_free = 0;
    }

    if(Number(weight) < 0 || Number(weight) > 10000)
    {
      alert("Weight must be between 0. and 10000");
      error_free = 0;
    }

    if(Number(grain) < 0 || Number(grain) > 1000)
    {
      alert("Grains eaten must be between 0. and 1000");
      error_free = 0;
    }

    if(latitude == "" || longitude == "")
    {
      alert("Location not given. Please allow location access and refresh the application");
      error_free = 0;
    }

    if(dateTime == "")
    {
      alert("Date & Time not acquired");
      error_free = 0;
    }

    if(!Boolean(error_free))
    {
      alert("Error saving log. Please fix problems and try again.");
      event.preventDefault();
    }
    else
    {
      var item = {
        id:id,
        dateTime:dateTime,
        latitude:latitude,
        longitude:longitude,
        weight:weight,
        eggs:eggs,
        grain:grain,
        category:category };

        switch (chickenNumber) {
          case 0:
          foghorn_items.push(item);
          localStorage.foghorn_items = JSON.stringify(foghorn_items);
          break;
          case 1:
          little_items.push(item);
          localStorage.little_items = JSON.stringify(little_items);
          break;
          case 2:
          tweety_items.push(item);
          localStorage.tweety_items = JSON.stringify(tweety_items);
          break;
          case 3:
          hawk_items.push(item);
          localStorage.hawk_items = JSON.stringify(hawk_items);
          break;
          case 4:
          bertha_items.push(item);
          localStorage.bertha_items = JSON.stringify(bertha_items);
          break;
        }

        alert("Log saved");
      }
    });
  });

EDIT: I'm using Nginx as my web server if that helps.

Answer 1

Putting "error_page 405 =200 $uri;" in the Nginx.conf config file made the error go away, but yet to see if my data is getting stored in the memory.