Click here to Skip to main content
15,881,625 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
function getBathroomsValue() {
    var uiBathrooms = document.getElementsByName("uiBathrooms");
    for(var i in uiBathrooms) {
      if(uiBathrooms[i].checked) {
          return parseInt(i)+1;
    return -1; // Invalid Value
function getBedroomsValue() {
    var uiBHK = document.getElementsByName("uiBedrooms");
    for(var i in uiBedrooms) {
      if(uiBedrooms[i].checked) {
          return parseInt(i)+1;
    return -1; // Invalid Value

function onClickedEstimateRent() {
    console.log("Estimated Rent button clicked");

    var state = document.getElementById("uiState");
    var category = document.getElementById("uiCategory");
    var bathrooms = getBathroomsValue();
    var bedrooms = getBedroomsValue();
    var fee = document.getElementById("uiFee");
    var pets_allowed = document.getElementById("uiPets");
    var square_feet = document.getElementById("uiSqft");
    var cityname = document.getElementById("uiCity");
    var with_storage = document.getElementById("uiStorage");
    var with_parking = document.getElementById("uiParking");
    var with_gym = document.getElementById("uiGym");
    var with_pool = document.getElementById("uiPool");
    var with_woodfloors = document.getElementById("uiWood_floors");
    var with_patio = documnet.getElementById("uiPatio");
    var with_clubhouse = document.getElementById("uiClubhouse");
    var with_internet = document.getElementById("uiInternet");
    var with_gated = document.getElementById("uiGated");
    var est_rent = document.getElementById("uiEstimatedRent")

var url = ""; //URL of the Flask Server
    // $.post is a jquery post call 
        type: "POST",
        url: "" , data:JSON.stringify({
        state: state.value,
        category: category.value,
        bathrooms: bathrooms,
        bedrooms: bedrooms,
        fee: fee.value,
        pets_allowed : pets_allowed.value,
        square_feet: parseFloat(square_feet.value),
        cityname: cityname.value,
        with_storage : with_storage.value,
        with_parking : with_parking.value,
        with_gym : with_gym.value,
        with_pool : with_pool.value,
        with_woodfloors : with_woodfloors.value,
        with_patio : with_patio.value,
        with_clubhouse : with_clubhouse.value,
        with_internet : with_internet.value,
        with_gated : with_gated.value
    }),contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(data, status) {
        est_rent.innerHTML = "<h2>" + data.estimated_rent.toString() + " $</h2>";

//function onPageLoad() {
 // console.log( "document loaded" );
 // var url = ""; // Use this if you are NOT using nginx which is first 7 tutorials

window.onload = onClickedEstimateRent;

What I have tried:

I have set up a flask server with saved ML Model to get prediction. I have set up a front end with HTML, CSS and JS using jquery to communicate with the server and get predictions from the saved model in flask server.

I am able to communicate with the server with a postman application to get prediction. But as soon as I try to get the inference through my web page, it gives a key error. I could understand that the problem is with my web page JavaScript code. I am new to web page designing and jquery.

I have been trying to connect the webpage to the backed server to get the predictions, but it does not work. I am new to creating and deploying websites.

Can someone please go through my code and tell me what the problem is.
Thanks in advance.
Updated 24-Oct-23 12:20pm
Richard Deeming 18-Oct-23 4:42am    
"Can someone please go through my code and tell me what the problem is."

No. Nobody is going to spend hours combing through thousands of lines of unknown code trying to find a problem. You need to debug your own code, and at least narrow down the problem to a specific part of the code before asking for help.
Richard MacCutchan 18-Oct-23 5:09am    
"But as soon as I try to get the inference through my web page it gives a key error."
OK, so show us the code where the error occurs, and the exact error message that is received. Use the Improve question link above, and add complete details to your post.
Ranjeetha Ravindran Virdi 18-Oct-23 5:11am    
Thanks for pointing that to me.I have updated my question. Can you please help me now?
Richard MacCutchan 18-Oct-23 5:54am    
Where is the full text of the error message, and which line does it refer to?
Ranjeetha Ravindran Virdi 18-Oct-23 8:07am    
File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 2548, in __call__

return self.wsgi_app(environ, start_response)

File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 2528, in wsgi_app

response = self.handle_exception(e)

File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 2525, in wsgi_app

response = self.full_dispatch_request()

File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 1822, in full_dispatch_request

rv = self.handle_user_exception(e)

File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 1820, in full_dispatch_request

rv = self.dispatch_request()

File "C:\Users\kulpr\anaconda3\Lib\site-packages\flask\", line 1796, in dispatch_request

return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args)

File "C:\Users\kulpr\Documents\Ranjeetha\projects\property_prediction\code\server\", line 65, in predict_rent

'estimated_rent': util.get_estimated_rent(state,category, bathrooms, bedrooms, fee, pets_allowed, square_feet, cityname, with_storage, with_parking, with_gym, with_pool, with_woodfloors, with_patio, with_clubhouse, with_internet, with_gated)
UnboundLocalError: cannot access local variable 'state' where it is not associated with a value

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900