未使用本地存儲在表單提交中保存值

[英]Values not getting saved onsubmit of form using local storage


I want to capture 2 values (product name and energy consumption)from a form and store it using local Storage.

我想從表單中捕獲2個值(產品名稱和能耗)並使用本地存儲進行存儲。

OnClick I want to display the stored values on the side of the form.

OnClick我想在表單一側顯示存儲的值。

What is working local storage is getting set.

什么是有效的本地存儲設置。

Issues (in the commented function compareSetup)

問題(在評論函數compareSetup中)

1) My guess is I am not getting the selected product nor the energy values from the form itself.

1)我的猜測是我沒有從表格本身獲得所選產品和能量值。

2) wrote the display logic but getting error on that line Uncaught SyntaxError: Unexpected identifier. I tried 2 different ways. I am newbie hence trying different syntax

2)寫了顯示邏輯,但在該行上獲取錯誤Uncaught SyntaxError:意外的標識符。我嘗試了兩種不同的方式。我是新手因此嘗試不同的語法

3) Resources tab in Chrome shows callAnnual as undefined callProduct as 0

3)Chrome中的“資源”選項卡將callAnnual顯示為未定義的callProduct為0

4) alerts inside function did not work

4)內部功能警報不起作用

I missing something. either logically or syntaxwise or both. Can some one guide me please. Thanks for your time.

我錯過了什么。邏輯上或語法上或兩者兼而有之。有人可以指導我。謝謝你的時間。

var wattage = {
  'Artic King AEB': 100,
  'Artic King ATMA': 200,
  'Avanti Compact': 300,
  'Bosch SS': 400,
  'Bosch - SHXUC': 100,
  'Asko DS': 200,
  'Blomberg': 300,
  'Amana': 400
};
var annualEnergy = 0;
var dailyEnergyConsumed = 0;

function configureDropDownLists(category, products) {

  var refrigerators = new Array('Artic King AEB', 'Artic King ATMA', 'Avanti Compact', 'Bosch SS');
  var dishWasher = new Array('Bosch - SHXUC', 'Asko DS', 'Blomberg', 'Amana');
  //var wattage = {'Artic King AEB':100,'Artic King ATMA':200,'Avanti Compact':300;'Bosch SS':400,'Bosch - SHXUC':100;'Asko DS':200;'Blomberg':300;'Amana':400}

  switch (category.value) {
    case 'refrigerators':
      products.options.length = 0;
      for (i = 0; i < refrigerators.length; i++) {
        createOption(products, refrigerators[i], refrigerators[i]);
      }
      break;
    case 'dishWasher':
      products.options.length = 0;
      for (i = 0; i < dishWasher.length; i++) {
        createOption(products, dishWasher[i], dishWasher[i]);
      }
      break;
    default:
      products.options.length = 0;
      break;
  }

}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

function configureProductDropDownLists(product) {
  document.getElementById('wattage').innerText = wattage[product.value];

}

function setConsumption(hrs) {
  setConsumption();

}

dailyEnergyConsumption = function(hrs) {

  dailyEnergyConsumed = 0;
  dailyEnergyConsumed = parseFloat(hrs * parseInt(document.getElementById('wattage').innerText) / 1000).toFixed(2);
  document.getElementById('dailyEnergyConsumptionVal').innerText = dailyEnergyConsumed + " kWh";

}


annualEnergyConsumption = function(days) {

  annualEnergy = 0;


  var allYear = document.getElementById('allYear');
  var halfYear = document.getElementById('halfYear');
  var threeMonths = document.getElementById('threeMonths');
  var oneMonth = document.getElementById('oneMonth');

  if (allYear || days != 365) {
    annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
    document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";

  } else if (days == 182 && !halfYear) {
    annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
    document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
  } else if (days == 90 && !threeMonths) {
    annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
    document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
  } else if (days == 30 && !oneMonth) {
    annualEnergy = parseFloat(dailyEnergyConsumed * parseInt(days)).toFixed(2);
    document.getElementById('annualEnergyConsumption').innerText = annualEnergy + " kWh";
  }


}


/*

function compareSetup(){
// I am trying to set the local storage for 2 things : selected [product name and Annual Energy Consumption]. End goal is to use them inorder to plot a chart 


        //initialize the selected product and annual consumption by calling their latest values on submit
		var submittedProduct = document.getElementById("products").options.selectedIndex;
		var submittedAnnualEnergyConsumption = document.getElementById("annualEnergyConsumption").value;
		
		
		//alert(submittedProduct);
		
        //setting the local storage with a key and variable name which was defined above
        localStorage.setItem("callProduct", submittedProduct);
        localStorage.setItem("callAnnual", submittedAnnualEnergyConsumption);
		
		
        
		//get Item with a key and display
		var displayName = localStorage.getItem("callProduct");
		//alert(callProduct);
		
		displayName = document.getElementById("displayName");
		
		
		var displayAnnual = document.getElementById("displayAnnual").innerHTML = localStorage.getItem parseInt(("callAnnual"));
		
		// return false as I dont want the form to submit
		return false;
    }

*/




$(document).ready(function() {

  $("#h1").click(function() {
    $("#onesSelected").show();

    $("#threeSelected").hide();
    $("#sixSelected").hide();
    $("#twentyFourSelected").hide();

  });

  $("#h3").click(function() {
    $("#threeSelected").show();

    $("#onesSelected").hide();
    $("#sixSelected").hide();
    $("#twentyFourSelected").hide();

  });


  $("#h6").click(function() {
    $("#sixSelected").show();

    $("#onesSelected").hide();
    $("#threeSelected").hide();
    $("#twentyFourSelected").hide();

  });
  $("#h24").click(function() {

    $("#twentyFourSelected").show();

    $("#onesSelected").hide();
    $("#threeSelected").hide();
    $("#sixSelected").hide();


  });

});

/*
annualCost = function() {

// utility rate currently is hard coded but this will come from the database and shall be inputted by user once. Utility Rate does not change that often

var utilityRate = 0.11;
var button = document.getElementById('annualCost');

 var annualCost = parseFloat( annualEnergy * utilityRate).toFixed(2);
document.getElementById('annualCostOperation').innerText= "$" + annualCost  ;

}
*/
#leftColumn {

  width: 600px;

  float: left;

}

.placeholderText {

  font: bold 12px/30px Georgia, serif;

}

body {

  padding-left: 45px;

}

#annualEnergyConsumption {

  font: bold 25px arial, sans-serif;

  color: #00ff00;

}

#dailyEnergyConsumptionVal {

  font: bold 25px arial, sans-serif;

  color: #00ff00;

}

#annualCostOperation {

  font: bold 40px arial, sans-serif;

  color: #00ff00;

}

.dailyButInline {

  display: inline;

}

#wattage {

  position: absolute;

  left: 160px;

  top: 130px;

  font: bold 25px arial, sans-serif;

  color: #00ff00;

}

/* mouse over link */

button:hover {

  background-color: #b6b6b6;

}

#onesSelected {

  position: absolute;

  left: 53px;

  top: 246px;

  background-color: #00ff00;

  display: none;

  width: 99px;

  height: 5px;

}

#threeSelected {

  position: absolute;

  left: 156px;

  top: 246px;

  background-color: #00ff00;

  display: none;

  width: 99px;

  height: 5px;

}

#sixSelected {

  position: absolute;

  left: 259px;

  top: 246px;

  background-color: #00ff00;

  display: none;

  width: 99px;

  height: 5px;

}

#twentyFourSelected {

  position: absolute;

  left: 362px;

  top: 246px;

  background-color: #00ff00;

  display: none;

  width: 113px;

  height: 5px;

}
<h2>Annual Energy Consumption and Cost Calculator</h2>

<form method="post" onSubmit="return compareSetup()">

  <div id="leftColumn">

    <div>
      <span class="placeholderText">Choose Category</span>
      <span>
		<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('products'))">
			<option value="">Select a Category</option>
			<option value="refrigerators">Refrigerators</option>
			<option value="dishWasher">DishWasher</option>
			</select>
		</span>
      </br>

      <span class="placeholderText">Select a Product</span>
      <span>
		<select id="products" onchange="configureProductDropDownLists(this)">
				<option selected>--------------------------</option>
		</select>
		</span>


    </div>

    <div>
      <span class="placeholderText">Wattage</span>
      <span id="wattage">---</span>
      </br>
      </br>
    </div>

    <div id="buttonBoundary">
      <div class="placeholderText">Estimated Daily Use</div>

      <div class="dailyButInline">
        <button type="button" id="h1" onclick="dailyEnergyConsumption(1)">Not a Lot</br>1 hour per day</button>
      </div>
      <div class="dailyButInline">
        <button type="button" id="h3" onclick="dailyEnergyConsumption(3)">Average</br>3 hour per day</button>
      </div>
      <div class="dailyButInline">
        <button type="button" id="h6" onclick="dailyEnergyConsumption(6)">A Lot</br>6 hour per day</button>
      </div>
      <div class="dailyButInline">
        <button type="button" id="h24" onclick="dailyEnergyConsumption(24)">Always On</br>24 hours per day</button>
      </div>


      <div id="onesSelected"></div>
      <div id="threeSelected"></div>
      <div id="sixSelected"></div>
      <div id="twentyFourSelected"></div>

      </br>
      </br>


    </div>
    <div>
      <span class="placeholderText">Daily Energy Consumption</span>
      </br>
      <div id="dailyEnergyConsumptionVal">---</div>
      </br>
    </div>


    <div>
      <span class="placeholderText">Estimated Yearly Use</span>
      </br>

      <input type="radio" name="usageRadio" value="AllYear" id="allYear" onclick="annualEnergyConsumption(365)" />
      <label for="allYear">All year</label>

      <input type="radio" name="usageRadio" value="halfYear" id="halfYear" onclick="annualEnergyConsumption(182)" />
      <label for="halfYear">6 Months</label>

      <input type="radio" name="usageRadio" value="threeMonths" id="threeMonths" onclick="annualEnergyConsumption(90)" />
      <label for="threeMonths">3 Months</label>


      <input type="radio" name="usageRadio" value="oneMonth" id="oneMonth" onclick="annualEnergyConsumption(30)" />
      <label for="oneMonth">1 Month</label>
      <!-- <div id="daysUsed"><input type="number" id="hour" maxlength="2" min="1" onchange="annualEnergyConsumption(this.value)"></br> -->

    </div>
    </br>
    <div>
      <span class="placeholderText">Energy Consumption</span>
      </br>
      <div id="annualEnergyConsumption">---</div>
      </br>
    </div>

    <input type="submit" value="Save Product" />
  </div>

  <div id="right">
    <div id="displayName">Selected Product 1</div>
    <div id="displayAnnual">Selected Product1's Annual Consumption</div>

  </div>
  <!--
<div id="right">

</form>
<div>
		<span class="placeholderText">Enter your Utility Rate per Kw/h</span></br>
		<span><input type="number" id="utilityRate" /></span>
		</br></br>
</div>


<div>
		<span class="placeholderText"><button id="annualCost" onclick='annualCost()'>Annual Cost to Operate</button></span></br>
		<span id="annualCostOperation" /></span>
</div>
</div>

-->

</form>

1 个解决方案

#1


Your scope access of '$' as undefined should be a dead give away as to why the remainder of the code is not working. Once you have called the '$' bit of code within the proper scope it will work.

你的范圍訪問'$'作為未定義應該是一個死的東西,為什么代碼的其余部分不起作用。一旦你在適當的范圍內調用了'$'位代碼就行了。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/05/10/720d05662a753a902c91e97887af2248.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com