{"error": "Please use a POST request"} - an alternative solution to submit the form

I am working on a school project and tried to create a calculator which can be found at the following link:

http://jsfiddle.net/ae97vgxz/2/

And my JS:

$(document).ready(function(){

// Setup variable as empty
var method = "";

// Detect when initial radio button is clicked
$("input[type=radio]").click(function() { 

    // Get the weight from the input box
    var weight = $("#meatWeight").val();

    // If the water method was clicked
    if ($(this).hasClass("water")) {
        var method = weight * 60;
        // Show me what the value is (can be removed)
        alert(method);

    // If the fridge method was clicked
    } else if ($(this).hasClass("fridge")) {
        var method = weight * 793;
        // Show me what the value is (can be removed)
        alert(method);
    }
});

      

When you use it, if you input the weight first and then select the defrost method, you will get the correct answer in the alert box. However, if you click on the calculate button, you will receive the following message:

{"error": "Please use POST request"}

From my own research, I believe this is because I am trying to submit a form and the JSFiddle does not allow you to do this. If I try to use my local environment in Chrome, again there is no output.

I'm very limited by my knowledge of JS (as I'm sure you can see), so I just can't figure out the solution. Can anyone suggest what I am doing wrong and what solution there might be?

Thank!

+3


source to share


3 answers


You have an error here:

function defrost(weight) {
    return (makeTime(method));
}

      

It should be:



function defrost(weight) {
    return (makeTime(weight));
}

      

Also, you must change the makeTime function, otherwise it will not work. The parseInt clause should be like this:

parseInt(time / 60);

      

+1


source


Your current form submit method is GET

<form id="defrostCalculator" name="defrostCalculator" onsubmit="callbackDefrost(this.elements.meatWeight.value); return false;" method="GET">

      



If the assignment requires POST, use POST.

<form ... method="POST">

      

0


source


There are some minor issues in your code. However, the main problem is that if you want to use a non-AJAX form on jsfiddle, you need to change all your buttons to have the attribute:

type="button"

      

instead of what you currently have:

type="submit"

      

When you execute <input type="submit"

, jsfiddle.net squashes and fails because you cannot post form information to your servers. Luckily, you don't need AJAX or server interaction. So your simple calculator can just use simple buttons.

0


source







All Articles