Develop Reference

how to fix my Metric/Imperial unit conversion project in Javascript

i am trying to build a solo project in javascript. I am having trouble to display a function when an number input is submitted.
this is my HTML code
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="submit" onclick="meterFeet()">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>
and this is my javascript code
let miucn = document.getElementById("input1");
function meterFeet() {
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
}

I made some small fixes in your code.
change input type from submit to button
put (document.getElementById("input1").value) inside the function
parseInt() the input value
function meterFeet() {
let miucn = parseInt(document.getElementById("input1").value);
document.getElementById("p-l1").textContent =
miucn +
" meters = " +
(miucn * 3.281).toFixed(3) +
" feet | " +
miucn +
" feet =" +
(miucn / 3.281).toFixed(3) +
" meters";
return false;
}
<header>
<h1>Metric/Imperial unit conversion</h1>
<form>
<input type="number" name="input" id="input1">
<input type="button" onclick="meterFeet()" value="Submit">
</form>
</header>
<main>
<h3>Length (Meter/Feet)</h3>
<p class="p-l" id="p-l1" "></p>
</main>

How to trigger focus keyup for next render remaining char jquery javascript

I want to make dynamically text remaining, the code for row 1 is work. But not for the next row.
var str = getStringForm(typeNarrative, nomor); // my str is equal of my text area html code
$('#Scores').append(str);
(function($) {
'use strict';
$.fn.remainingCharsCounter = function() {
return this.on('focus keyup', function() {
var remainingChars = $(this).attr('maxlength') - $(this).val().length;
$(this).next('.remainingChars').text(remainingChars).focus();;
});
};
})(jQuery);
jQuery(document).ready(function() {
'use strict';
$('textarea.char-textarea').remainingCharsCounter().css('border', '1px solid #0000004f');
});
**getStringForm**
my string from here
function getStringForm(typeNarrative, nomor) {
var str;
if (typeNarrative == "subtest" || typeNarrative == "SUBTEST") {
str = `<div class="row NarrativeField" id="label` + nomor + `" style="text-align:center;margin-top:15px;">
<div class="col-xs-2">
<textarea id="NarrativeLong`+ nomor + `" class="k-textbox char-textarea" maxlength="2000" name="NarrativeLong` + nomor + `" data-bind="value:Narrative[` + nomor + `].NarrativeLong` + nomor + `" style="width:70%"></textarea>
Remaining chars: <span class="remainingChars" style="font-size:8pt; font-weight:bold;"></span>
</div>
<i class="fas fa-trash-alt"></i>
</div>`;
} else if (typeNarrative == "IQ") {
str = `<div class="row NarrativeField-IQ" id="label` + nomor + `" style="text-align:center;margin-top:15px;">
<div class="col-xs-2">
<input type="number" class="k-textbox char-textarea" maxlength="2000" id="Score`+ nomor + `" name="Score` + nomor + `" value="` + nomor + `" style="width:40%" readonly="readonly" />
Remaining chars: <span class="remainingChars" style="font-size:8pt; font-weight:bold;"></span>
</div>
<div class="col-xs-8">
<textarea id="NarrativeIQ`+ nomor + `" class="k-textbox char-textarea" maxlength="2000" name="NarrativeIQ` + nomor + `" style="width:70%"></textarea>
Remaining chars: <span class="remainingChars" style="font-size:8pt; font-weight:bold;"></span>
</div>
<i class="fas fa-trash-alt"></i>
</div>`;
} else {
str = "";
}
return str;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Score entered" id="label1">
<textarea id="NarrativeLong1" class="char-textarea" name="NarrativeLong1" style="width:70%" maxlength="100"></textarea> Remaining chars: <span class="remainingChars" style="font-size:8pt; font-weight:bold;"></span>
</div>
i think keyup can't detect my new row field. Please help if there are any solution, thank you !

JQuery | How to display variables when associated checkbox is checked

I'm creating a website that grabs weather information based on the location entered by the user. At the moment there are some features on the page with no functionality, it is still a work in progress. I apologies for the sloppy code.
I have 9 checkboxes at the top of my form that have the info that should be displayed and I'm not sure of the best method to edit the output accordingly.
In my JS file there is a block that grabs all of the relevant weather data and assigns it to variables. These variables are then used to generate a <p> element containing all of this info. How can I edit it to only display the variables that are selected via checkboxes?
$(document).ready(function() {
var inputType = 1;
$("#Radio1").click(function() {
$("#lbl1").text("City Name:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2,}",
"placeholder": "Regina"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 1;
});
$("#Radio2").click(function() {
$("#lbl1").text("Postal Code:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[A-Z][0-9][A-Z]",
"placeholder": "S4X"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 2;
});
$("#Radio3").click(function() {
$("#lbl1").text("Latitude:");
$("#lbl2").text("Longitude:");
$("#Firstbox").removeAttr("pattern");
$("#Secondbox").removeAttr("pattern");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "number",
"min": "-90",
"max": "90",
"step": "any",
"placeholder": "50.4"
});
$("#Secondbox").attr({
"type": "number",
"min": "-180",
"max": "180",
"step": "any",
"placeholder": "-105.5"
});
inputType = 3;
});
$("#SearchButton").click(function() {
if (checkValidity()) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var SearchResponse = this.responseText;
var obj = JSON.parse(SearchResponse);
var city_name = obj["name"];
var country_name = obj["sys"]["country"];
var longitude = obj["coord"]["lon"];
var latitude = obj["coord"]["lat"];
var weather_description = obj["weather"][0]["description"];
var temp = obj["main"]["temp"] - 273.15;
var pressure = obj["main"]["pressure"];
var humidity = obj["main"]["humidity"];
var wind_speed = obj["wind"]["speed"];
var wind_direction = obj["wind"]["deg"];
var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
var sunset = new Date(obj["sys"]["sunset"] * 1000);
var SearchResultsHTML = "City: " + city_name + "<br />" +
"Country: " + country_name + "<br />" +
"Longitude: " + longitude + "<br />" +
"Latitude: " + latitude + "<br />" +
"Weather: " + weather_description + "<br />" +
"Temperature: " + temp + "<br />" +
"Pressure: " + pressure + "<br />" +
"Humidity: " + humidity + "<br />" +
"Wind Speed: " + wind_speed + "<br />" +
"Wind Direction: " + wind_direction + "<br />" +
"Sunrise: " + sunrise.toLocaleTimeString() + "<br />" +
"Sunset: " + sunset.toLocaleTimeString() + "<br />";
$("#SearchResults").html(SearchResultsHTML);
}
}
var Firstbox = $("#Firstbox").val();
var Secondbox = $("#Secondbox").val();
var apiKey = "52453f34dee0d65b1a41a02656142c6b";
if (inputType == 1) {
var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
"?q=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 2) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?zip=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 3) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?lat=" + Firstbox + "&lon=" + Secondbox +
"&APPID=" + apiKey;
}
xhttp.open("GET", SearchString, true);
xhttp.send();
}
});
function displayError() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid) {
if (inputType == 1 || inputType == 2) {
alert("Country code must be 2 characters in length.");
} else {
alert("Longitude must be between -180 and 180");
}
} else {
if (inputType == 1) {
alert("City name must be longer than 1 character.");
} else if (inputType == 2) {
alert("Postal code must be 3 characters in length, following the format 'S4X'");
} else {
alert("Latitude must be between -90 and 90");
}
}
}
function checkValidity() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid && second.validity.valid) {
return true;
} else {
displayError();
return false;
}
}
function checksSelected() {
}
});
.validated:valid {
background-color: #BDF0A8;
}
.validated:invalid {
background-color: #FAC3C9;
}
.row {
margin-bottom: 10px;
}
.ticksel {
border: solid black 1px;
}
tr,
td {
border: solid black 1px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">
<form id="searchForm" method="POST" action="URL">
<div class="row col-md-12">
<h2>OpenWeatherMap Weather Search</h2>
</div>
<div class="row">
<div class="col-md-6">
<h4>Search by:</h4>
<input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
<input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
<input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
</div>
<div class="col-md-6">
<h4>Show in search results:</h4>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Longitude</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Latitude</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Temperature</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Pressure</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Humidity</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Speed</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Wind Direction</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunrise</div>
<div class="col ticksel"><input type="checkbox" checked id="" value=""> Sunset</div>
</div>
</div>
</div>
<div class="row col-md-12">
<label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
<label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
<input id="SearchButton" type="button" value="Search" />
</div>
</form>
<div class="row col-md-12">
<h4>Current Weather</h4>
</div>
<div class="row col-md-12">
<p id="SearchResults"></p>
</div>
<div class="row col-md-12">
<table width="100%">
<thead>
<tr>
<th>City</th>
<th>Country</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Weather</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Wind Speed</th>
<th>Wind Direction</th>
<th>Sunrise</th>
<th>Sunst</th>
<th><a class="deleteAll" href="#">Clear Log</a></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

Here is a version that will take the checked boxes and show their corresponding values
I changed your xmlhttp to getJSON
You can do
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
if ($("#long").is(":checked")) SearchResultsHTML.push("Longitude: " + longitude);
if ($("#lat").is(":checked")) SearchResultsHTML.push("Latitude: " + latitude);
if ($("#temp").is(":checked")) SearchResultsHTML.push("Temperature: " + temp);
if ($("#pres").is(":checked")) SearchResultsHTML.push("Pressure: " + pressure);
if ($("#hum").is(":checked")) SearchResultsHTML.push("Humidity: " + humidity);
if ($("#ws").is(":checked")) SearchResultsHTML.push("Wind Speed: " + wind_speed);
if ($("#wd").is(":checked")) SearchResultsHTML.push("Wind Direction: " + wind_direction);
if ($("#sunup").is(":checked")) SearchResultsHTML.push("Sunrise: " + sunrise.toLocaleTimeString());
if ($("#sundown").is(":checked")) SearchResultsHTML.push("Sunset: " + sunset.toLocaleTimeString());
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
or more elegantly add a span and toggle this at show time or even after
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
showSpans();
})
}
using
$(".ticksel").on("change", showSpans);
function showSpans() {
$(".ticksel input").each(function() {
const id = this.id;
const checked = this.checked;
if (id) {
const $span = $("#" + id + "span");
if ($span) $span.toggle(checked);
}
})
}
$(document).ready(function() {
var inputType = 1;
$("#Radio1").click(function() {
$("#lbl1").text("City Name:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2,}",
"placeholder": "Regina"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 1;
});
$("#Radio2").click(function() {
$("#lbl1").text("Postal Code:");
$("#lbl2").text("Country Code:");
$("#Firstbox").removeAttr("min max step");
$("#Secondbox").removeAttr("min max step");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "text",
"pattern": "[A-Z][0-9][A-Z]",
"placeholder": "S4X"
});
$("#Secondbox").attr({
"type": "text",
"pattern": "[a-zA-Z]{2}",
"placeholder": "ca"
});
inputType = 2;
});
$("#Radio3").click(function() {
$("#lbl1").text("Latitude:");
$("#lbl2").text("Longitude:");
$("#Firstbox").removeAttr("pattern");
$("#Secondbox").removeAttr("pattern");
document.getElementById('Firstbox').value = '';
document.getElementById('Secondbox').value = '';
$("#Firstbox").attr({
"type": "number",
"min": "-90",
"max": "90",
"step": "any",
"placeholder": "50.4"
});
$("#Secondbox").attr({
"type": "number",
"min": "-180",
"max": "180",
"step": "any",
"placeholder": "-105.5"
});
inputType = 3;
});
$("#SearchButton").click(function() {
if (checkValidity()) {
var Firstbox = $("#Firstbox").val();
var Secondbox = $("#Secondbox").val();
var apiKey = "52453f34dee0d65b1a41a02656142c6b";
if (inputType == 1) {
var SearchString = "https://api.openweathermap.org/data/2.5/weather" +
"?q=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 2) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?zip=" + Firstbox + "," + Secondbox +
"&APPID=" + apiKey;
} else if (inputType == 3) {
var SearchString = "http://api.openweathermap.org/data/2.5/weather" +
"?lat=" + Firstbox + "&lon=" + Secondbox +
"&APPID=" + apiKey;
}
$.getJSON(SearchString, function(obj) {
var city_name = obj["name"];
var country_name = obj["sys"]["country"];
var longitude = obj["coord"]["lon"];
var latitude = obj["coord"]["lat"];
var weather_description = obj["weather"][0]["description"];
var temp = obj["main"]["temp"] - 273.15;
var pressure = obj["main"]["pressure"];
var humidity = obj["main"]["humidity"];
var wind_speed = obj["wind"]["speed"];
var wind_direction = obj["wind"]["deg"];
var sunrise = new Date(obj["sys"]["sunrise"] * 1000);
var sunset = new Date(obj["sys"]["sunset"] * 1000);
let SearchResultsHTML = []
SearchResultsHTML.push("City: " + city_name);
SearchResultsHTML.push("Country: " + country_name);
SearchResultsHTML.push("Weather: " + weather_description);
SearchResultsHTML.push("<span id='longSpan'>Longitude: " + longitude + "</span>");
SearchResultsHTML.push("<span id='latSpan'>Latitude: " + latitude + "</span>");
SearchResultsHTML.push("<span id='tempSpan'>Temperature: " + temp + "</span>");
SearchResultsHTML.push("<span id='pressSpan'>Pressure: " + pressure + "</span>");
SearchResultsHTML.push("<span id='humSpan'>Humidity: " + humidity + "</span>");
SearchResultsHTML.push("<span id='wsSpan'>Wind Speed: " + wind_speed + "</span>");
SearchResultsHTML.push("<span id='wdSpan'>Wind Direction: " + wind_direction + "</span>");
SearchResultsHTML.push("<span id='sunupSpan'>Sunrise: " + sunrise.toLocaleTimeString + "</span>");
SearchResultsHTML.push("<span id='sundownSpan'>Sunset: " + sunset.toLocaleTimeString() + "</span>");
$("#SearchResults").html(SearchResultsHTML.join("<br/>"));
showSpans();
})
}
});
$(".ticksel").on("change", showSpans);
function showSpans() {
$(".ticksel input").each(function() {
const id = this.id;
const checked = this.checked;
if (id) {
const $span = $("#" + id + "span");
if ($span) $span.toggle(checked);
}
})
}
function displayError() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid) {
if (inputType == 1 || inputType == 2) {
alert("Country code must be 2 characters in length.");
} else {
alert("Longitude must be between -180 and 180");
}
} else {
if (inputType == 1) {
alert("City name must be longer than 1 character.");
} else if (inputType == 2) {
alert("Postal code must be 3 characters in length, following the format 'S4X'");
} else {
alert("Latitude must be between -90 and 90");
}
}
}
function checkValidity() {
var first = document.getElementById('Firstbox');
var second = document.getElementById('Secondbox');
if (first.validity.valid && second.validity.valid) {
return true;
} else {
displayError();
return false;
}
}
function checksSelected() {
}
});
.validated:valid {
background-color: #BDF0A8;
}
.validated:invalid {
background-color: #FAC3C9;
}
.row {
margin-bottom: 10px;
}
.ticksel {
border: solid black 1px;
}
tr,
td {
border: solid black 1px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<title>Final Project</title>
<link rel="stylesheet" type="text/css" href="weather.css">
<form id="searchForm" method="POST" action="URL">
<div class="row col-md-12">
<h2>OpenWeatherMap Weather Search</h2>
</div>
<div class="row">
<div class="col-md-6">
<h4>Search by:</h4>
<input id="Radio1" name="searchBy" type="radio" checked /> City Name<br/>
<input id="Radio2" name="searchBy" type="radio"> Postal Code<br/>
<input id="Radio3" name="searchBy" type="radio" /> Latitude / Longitude<br/>
</div>
<div class="col-md-6">
<h4>Show in search results:</h4>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="long" value="yes"> Longitude</div>
<div class="col ticksel"><input type="checkbox" checked id="lat" value=""> Latitude</div>
<div class="col ticksel"><input type="checkbox" checked id="temp" value=""> Temperature</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="press" value=""> Pressure</div>
<div class="col ticksel"><input type="checkbox" checked id="hum" value=""> Humidity</div>
<div class="col ticksel"><input type="checkbox" checked id="ws" value=""> Wind Speed</div>
</div>
<div class="row">
<div class="col ticksel"><input type="checkbox" checked id="wd" value=""> Wind Direction</div>
<div class="col ticksel"><input type="checkbox" checked id="sunup" value=""> Sunrise</div>
<div class="col ticksel"><input type="checkbox" checked id="sundown" value=""> Sunset</div>
</div>
</div>
</div>
<div class="row col-md-12">
<label id="lbl1">City Name:</label><input id="Firstbox" class="validated" type="text" required pattern=".{2,}" placeholder="Regina" />
<label id="lbl2">Country Code:</label><input id="Secondbox" class="validated" type="text" required pattern="[a-zA-Z]{2}" placeholder="ca" />
<input id="SearchButton" type="button" value="Search" />
</div>
</form>
<div class="row col-md-12">
<h4>Current Weather</h4>
</div>
<div class="row col-md-12">
<p id="SearchResults"></p>
</div>
<div class="row col-md-12">
<table width="100%">
<thead>
<tr>
<th>City</th>
<th>Country</th>
<th>Longitude</th>
<th>Latitude</th>
<th>Weather</th>
<th>Temperature</th>
<th>Pressure</th>
<th>Humidity</th>
<th>Wind Speed</th>
<th>Wind Direction</th>
<th>Sunrise</th>
<th>Sunst</th>
<th><a class="deleteAll" href="#">Clear Log</a></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>

ASP.Net barcode reader show data

I am working on a WCF service application that required to get the Barcode reader characters and show data of it on UI for user. My problem is that when I write data on textbox with keyboard is OK but when read from barcode reader overwrite it and show 3 times data in UI.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>سرویس و بارکد خوان</title>
<script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function setFocusToTextBox() {
$(document).ready(function () {
document.getElementById('txtFirst').focus();
});
}
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#txtFirst").keydown(function (e) {
if (e.which == 17 || e.which == 74) {
e.preventDefault();
} else {
console.log(e.which);
}
})
});
</script>
<script type="text/javascript" language="javascript">
function JqueryAjaxCall(val) {
$("#contentHolder").empty();
$(".form-errors").empty();
if (val != null && val.length === 20) {
document.getElementById("txtFirst").select();
var pageUrl = '<%= ResolveUrl("~/Default.aspx/jqueryAjaxCall") %>';
var parameter = { "myVal": val}
$.ajax({
type: 'POST',
url: pageUrl,
data: JSON.stringify(parameter),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
dateFormat: 'dd/mm/yy',
success: function (data) {
onSuccess(data);
},
error: function (data, success, error) {
var myitems = jQuery.parseJSON(data.responseText);
$(".form-errors").text(myitems.Message).show();
}
});
return false;
}
function onSuccess(data) {
var items = data.d;
var fragment = "<ul>"
var BLNumber = items.BLNumber;
var ContainerNumber = items.ContainerNumber;
var Destination = items.Destination;
var SerialNumberVerification = items.SerialNumberVerification;
var TempPermission = items.TempPermission;
var VehicleNumber = items.VehicleNumber;
var VehicleType = items.VehicleType;
var VoyageID = items.VoyageID;
var value = new Date(parseInt(items.ExitDate.substr(6)));
var ExitDate = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
var ExitPermissionNumber = items.ExitPermissionNumber;
var myvalue = new Date(parseInt(items.SpecialZoneOrCustomPermissionDate.substr(6)));
var SpecialZoneOrCustomPermissionDate = myvalue.getMonth() + 1 + "/" + myvalue.getDate() + "/" + myvalue.getFullYear();
var SpecialZoneOrCustomPermissionNumber = items.SpecialZoneOrCustomPermissionNumber;
fragment += "<li> " + " شماره بارنامه : " + BLNumber + " <br> "
+ " شماره کانتینر : " + ContainerNumber + " <br> "
+ " مسافت : " + Destination + " <br/> "
+ " شماره تائیدیه : " + SerialNumberVerification + " <br/> "
+ " شماره مجوز موقت : " + TempPermission + " <br/> "
+ " شماره وسیله نقلیه : " + VehicleNumber + " <br/> "
+ " نوع وسیله نقلیه : " + VehicleType + " <br/> "
+ " VoyageID : " + VoyageID + " <br/> "
+ " تاریخ خروج : " + ExitDate + " <br/> "
+ " شماره خروج : " + ExitPermissionNumber + " <br/> "
+ " تاریخ مجوز : " + SpecialZoneOrCustomPermissionDate + " <br/> "
+ " شماره مجوز : " + SpecialZoneOrCustomPermissionNumber + " <br/> "
+ "</li>";
$("#contentHolder").append(fragment);
}
}
</script>
</head>
<body onload="setFocusToTextBox();" bgcolor="#E6E6FA">
<form id="myForm" runat="server" dir="rtl" >
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<div>
<table cellpadding="1" cellspacing="0" style="width: 80%;">
<tr>
<td>
</td>
<td>
<asp:Label ID="lblFirst" runat="server" Text="لطفا شماره سند را وارد نمائید : " Font-Bold="True"></asp:Label>
<input type="text" id="txtFirst" onfocus="setFocusToTextBox" onkeyup="return JqueryAjaxCall(this.value);" class="col-xs-4" style="background-color:#ede0dd"/>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div id="contentHolder" >
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
</div>
</td>
<td>
<div class="form-errors" style="margin-right:-175%;font-style:oblique" dir="rtl" align="right"></div>
</td>
</tr>
</table>
</div>
</form>
<br />
<br />
<br />
<br />
<br />
<hr />
</body>
</html>

on this line code you call your ajax on every key click
onkeyup="return JqueryAjaxCall(this.value);"
and so on each click you have data output, 3 times and maybe more, on each key press. Redesign your code so only when you are finish typing you make the render.

I Understand it just now. problem was for this line of code
$("#contentHolder").append(fragment);
I add .empty() to that.
$("#contentHolder").empty().append(fragment);
I find it from this link
https://www.joezimjs.com/javascript/jquery-html-youre-doing-it-wrong/

How can i take that input value?

I'm having a big problem in trying to get the value of these inputs and associates them to the object "book" when you click " Book Now! "
No matter where I declare the object in js , it just does not work.
It was for the object like this:
$scope.book = {
bday_i : new date(day, month, year),
bday_f : book(bday_i),
bfrom : getHours(bday_i),
buntil : getHours(bday_i),
bresource : "Small meeting room ",
bmember : "Lucas Gabriel da Costa",
busercredit : ("4 hours left of", book(bresource)),
bcoment : "Test"
}
And i try to get the values ​​and assign them to variables like this:
$scope.book.bday_i = myForm.day_i.value;
$scope.book.bday_f = myForm.day_f.value;
$scope.book.bfrom = myForm.from.value;
$scope.book.buntil = myForm.until.value;
$scope.book.bresource = myForm.resource.value;
$scope.book.bmember = myForm.member.value;
$scope.book.busercredit = myForm.usercredit.value;
$scope.book.bcoment = myForm.coment.value;
$modalInstance.close(result);
$scope.dayClick = function (date, jsEvent, view, value) {
$scope.newEventDate = date;
var
t =
'<div class="modal-header">' +
'<h5>New booking</h5>' +
'</div>' +
'<form ng-model="myForm" name="myForm" id="myForm">'+
'<div class="modal-body" name="box" >' +
'<p>Time: ' + ' ' + '<pre >' + ' Initial date:' +
'<input id="day_i" class="form-control" type="date" name="day_i" ng-model="day_i" type="text" min = "dia_hj" value="dia_hj" required /> ' +
' Final date:' +
'<input id="day_f" class="form-control" type="date" name="day_f" ng-model="day_f" type="text" min = "day_i" value="dia_hj" required /> ' +
' From:' +
' <input id="from" class="form-control" name="from" ng-model="from" type="time" min = "getHours()" value="" required />' +
' Until' +
' <input id="until" class="form-control" name="until" ng-model="until" type="time" min = "myForm.from.value" value="" required /> </pre></p>' +
'<p> Resource:' +
' <pre><input id="resource" class="form-control" name="resource" ng-model="resource" type="text" placeholder ="Ex: Small Meeting Room" value="" required /></pre></p> ' +
'<p> Member: ' +
' <pre><input id="member" class="form-control " name="member" ng-model="member" type="text" placeholder="Ex: Lucas Gabriel da Costa" value="" required /> </pre></p> ' +
'<p> User credit:' +
' <pre><input id="usercredit" class="form-control" name="usercredit" ng-model="usercredit" type="text" placeholder="Ex: 4 hours included(Small meeting Room)" value="" required /></pre></p>' +
'Note:' +
'<pre><textarea id="coment" ng-model = "coment" name="coment" rows="4" cols="46" placeholder="Insert ur comment"></textarea></pre></form>' +
// validação:
'<div ng-hide= " myForm.day_i.$pristine">' +
'<span ng-show="myForm.day_i.$error.required " class="alert alert-danger"> The INITIAL DATE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide= " myForm.day_f.$pristine">' +
'<span ng-show="myForm.day_f.$error.required || (myForm.day_f.value <= myForm.day_i.value)" class="alert alert-danger"> The FINAL DATE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide =" myForm.from.$pristine">' +
'<span ng-show="myForm.from.$error.required " class="alert alert-danger"> The FROM camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide =" myForm.until.$pristine">' +
'<span ng-show="myForm.until.$error.required || myForm.until.value < myForm.from.value" class="alert alert-danger"> The UNTIL camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide=" myForm.resource.$pristine ">' +
'<span ng-show="myForm.resource.$error.required " class="alert alert-danger"> The RESOURCE camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide= " myForm.member.$pristine">' +
'<span ng-show="myForm.member.$error.required " class="alert alert-danger"> The MEMBER camp is required. Or a invalid value was inserted <br/><br/> </span></div> ' +
'<div ng-hide=" myForm.usercredit.$pristine">' +
'<span ng-show="myForm.usercredit.$error.required " class="alert alert-danger"> The CREDIT camp is required. Or a invalid value was inserted <br/><br/> </span> </div> ' +
'</div>' +
'<div class="modal-footer">' +
'<button ng-click="close(result)" id="b1" ng-model="b1" name="b1" class="btn btn-danger " >Close</button>' + //botão de fechar
'<button ng-click="close2(okay) " id="b2" ng-model="b2" name="b2" class="btn btn-success" ng-disabled="myForm.usercredit.$pristine || myForm.day.$pristine || myForm.from.$pristine || myForm.until.$pristine || myForm.resource.$pristine || myForm.member.$pristine "> Book Now! </button>' +
'</div>';
var
modalInstance = $modal.open({
template: t,
controller: 'TestDialogController',
backdrop: "true",
resolve: {
event: function () {
return $scope.newEventDate;
},
stage: function () {
return $scope.stage;
}
}
});
modalInstance.okay.then(
function () {
alert('');
;
});
modalInstance.result.then(
function (result) {
//console.log('called $modalInstance.close()');
alert(result);
$scope.addEvent();
},
function (result) {
//console.log('called $modalInstance.dismiss()');
$scope.addEvent();
}
);
};
app.controller('TestDialogController', function ($scope, $modalInstance) {
$scope.close = function (result) {
alert(result);
$modalInstance.close(result);
}});
<div class="container pad-35">
<div class="row">
<!-- Space Header -->
<venue-header title="{{ venue_title }}" nav="header"></venue-header>
<!-- Dashboard -->
<div class="col-md-12 pull-left" ng-cloak>
<section id="directives-calendar" ng-controller="CalendarCtrl">
<div class="well">
<div class="row-fluid">
<div class="span8">
<tabset>
<tab select="renderCalender('myCalendar1');">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Calendar One
</tab-heading>
<div class="btn-toolbar">
<center><p class="pull-right lead">Calendar One View Options</p></center>
<div class="btn-group">
<button class="btn btn-success" ng-click="changeView('agendaDay', 'myCalendar1')">AgendaDay</button>
<button class="btn btn-success" ng-click="changeView('agendaWeek', 'myCalendar1')">AgendaWeek</button>
<button class="btn btn-success" ng-click="changeView('month', 'myCalendar1')">Month</button>
<!--select para definir o resource a ser usado no controler js-->
</div>
<p class="textalign1">
<center>
<select id="select-lucas" class="dropdown-toggle btn btn-success " ng-model="model.id" convert-to-number>
<option value="" selected="selected" onclick="">small meeting room</option>
<option value="1" selected="selected" onclick="">medium meeting room</option>
<option value="2" selected="selected" onclick="">Big meeting room</option>
<option value="3" selected="selected" onclick="">Giant meeting room</option>
</select>
</center>
</p>
</div>
<div class="calendar ng-model="eventSources" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>
</tab>
</tabset>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
The result is this pop up:

Your form is defined in the modal which have his own controller and his own scope.
So when you do
ng-model="until"
In your input, this is binding a variable "until" ont eh scope modal's controller.
so if you want to build an object you ave to do like this in the modal controller :
var book = {};
book.buntil = $scope.until;
Same for every fields.
After if you want to display that books to the main view you could use an event that is emitted and listen on the $rootscope.
I don't know which modal library you use so i can't say if the scope generated if a child of the other.