Find value from subsequent input and form a sentence - javascript

I have 3/4 input field and and some words between them.
like,
<div id="nl-form-0" >
Please remove stitch after
<input type="text" value="15" />
days of discharge, i,e on
<input type="text" value="22/5/2016" />
to improve your health in
<input type="text" value="20" />
days.
</div>
I need output in a form like a sentence:
"Please remove stitch after 15 days of discharge, i,e on 22/5/2016 to improve your health in 20 days."

Edit:
Updated JsFiddle now, Selected value in select will also be added:
Jquery Code:
var html = $("#nl-form-0").clone();
html.find('input,select').each(function(){
var cell = $(this);
$(this).replaceWith(cell.val());
})
var main =html.html();
main = main.replace(/\s\s+/g, ' ');
alert(main);
Here is the answer, Checkout this Jsfiddle DEMO:
Jquery Code:
var html = $("#nl-form-0").clone();
html.find('input').each(function(){
var cell = $(this);
$(this).replaceWith(cell.val());
})
var main =html.html();
main = main.replace(/\s\s+/g, ' ');
alert(main);

Try
var text = $('#nl-form-0').contents().map(function() {
if (this.nodeType == Node.TEXT_NODE && this.nodeValue.trim()) {
return this.nodeValue.trim();
} else if ($(this).is('input')) {
return $(this).val()
} else if ($(this).is('select')) {
return $('option:selected', this).text()
}
}).get().join(' ');
snippet.log(text)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nl-form-0">
Please remove stitch after
<input type="text" value="15" />days of discharge, i,e on
<input type="text" value="22/5/2016" />to improve your health in
<input type="text" value="20" />days. also
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
<option value="3">Three</option>
</select>
</div>

this works perfectely
var text = $('#nl-form-0').contents().map(function() {
if (this.nodeType == Node.TEXT_NODE && this.nodeValue.trim()) {
return this.nodeValue.trim();
} else if ($(this).is('input')) {
return $(this).val()
}
}).get().join(' ');
snippet.log(text)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="nl-form-0">
Please remove stitch after
<input type="text" value="15" />days of discharge, i,e on
<input type="text" value="22/5/2016" />to improve your health in
<input type="text" value="20" />days.
</div>

Have a look at this. More clean(pure js, so optimized than jQuery) and simple way to do the same. [Tested on Chrome]
function myFunction() {
var div = document.getElementById('test');
var children = div.childNodes;
var sentence = "";
for (var i=0; i < children.length; i++) {
var child = children[i];
if (child.value) {
sentence += child.value;
}
else {
sentence += child.data;
}
}
document.getElementById("output").innerHTML = sentence;
}
<div id="test" >
Please remove stitch after
<input type="text" value="15" />
days of discharge, i,e on
<input type="text" value="22/5/2016" />
to improve your health in
<input type="text" value="20" />
days.
</div>
<span id="output"></span>
<input type="button" value="Click me" onclick="myFunction()"></input>

Related

What am I missing in my JavaScript code?

I'm new to JavaScript and I’m having issues trying to create a drop down list unit converter. The project calls for the code to convert miles to feet, Celsius to Fahrenheit and pounds to grams. The issue is when I enter the values the output is way off.
No matter what number I enter or unit I select I get the same result of 14514.944, instead of the appropriate (5280 feet, 33.8°, 453.592g, etc.). If I double click the submit button I get 62573043513.9154, triple click 269748534086686000, etc.
I know I’m missing something in the convert_unit function, but I’m not sure what. I’ve tried adding and removing various code and nothing is working.
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value)
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
<form>
<fieldset>
<label id="enter">Numeric Value</label>
<p>
<input type="number" placeholder="Enter Value" name=" " value=" " id="numInput" />
</p>
</fieldset>
<fieldset><label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onClick="convert_unit()";>Convert</button>
</fieldset>
<fieldset><label id="results">Results</label>
<p>
<input type="number" placeholder="Results" name="to_unit" id="numOutput" readonly /></p>
</fieldset>
</form>
Both of your variables are named numInput:
var numInput = document.getElementById("numInput");
var numInput = document.getElementById("numOutput");
I'm guessing your second one should be numOutput. Also, there's no need to redefine these variables in JS unless you want to make it explicitly known what they are. HTML elements with IDs are already available in the global scope based on their ID name (with some caveats). In this case you could simply use numInput and numOutput throughout your program and it would still work even without these two lines.
i found 2 problems in your code.
The first is that in line 4 of the script, you overwrite the input of variable "numInput" with "numOutput" element. (Rename to 'numOutput')
The second problem is that, when script is loaded on page, the elements is not yet instanced. To solve that you can put the import tag right before </body> or add variables definition inside the function.
PS: Don't forget to use semicolons after every statement;
Jah Bless =)
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<fieldset>
<label id="enter">Pounds to Grams</label>
<p><input placeholder="Enter Value" name=" " value=" " id="numInput" type="number"></p>
</fieldset>
<fieldset>
<label>Conversion Menu</label>
<p>
<select id="" name="" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select>
</p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value=" " onclick="convert_unit()" ;="">Convert</button>
</fieldset>
<fieldset>
<label id="results">Pounds to Grams</label>
<p><input placeholder="Results" name="to_unit" id="numOutput" readonly="" type="number"></p>
</fieldset>
</form>
<script src="script.js"></script>
</body>
</html>
script.js
function convert_unit() {
var numInput = document.getElementById('numInput');
var numOutput = document.getElementById('numOutput');
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
numOutput.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
numOutput.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("enter").innerHTML = x;
document.getElementById("results").innerHTML = x;
}
Your code corrected, customized and working perfectly!
var numInput = document.getElementById("numInput");
var numOutput = document.getElementById("numOutput");
var feet = document.getElementById("feet");
var fahrenheit = document.getElementById("fahrenheit");
var grams = document.getElementById("grams");
function convert_unit() {
if(numInput.value === "") {
if(confirm("No value inputed to convert! Consider default 1 unit?")) {
numInput.value = 1;
}
}
if(getSelectedUnitToConvert("conversion_type") == null) {
if(confirm("No conversion unit selected! Consider default Miles to Feet?")) {
document.getElementById("conversion_type").selectedIndex = 0;
}
}
if(getSelectedUnitToConvert("conversion_type") == "Miles to Feet") {
numOutput.value=numInput.value;
numOutput2.value=(5280*numInput.value);
var x = document.getElementById("feet").label;
document.getElementById("result1").innerHTML = "Miles";
document.getElementById("result2").innerHTML = "Feet";
} else if(getSelectedUnitToConvert("conversion_type") == "Celcius to Fahrenheit") {
numOutput.value=numInput.value;
numOutput2.value=(1.8*numInput.value)+32;
var x = document.getElementById("fahrenheit").label;
document.getElementById("result1").innerHTML = "Celcius";
document.getElementById("result2").innerHTML = "Fahrenheit";
} else if(getSelectedUnitToConvert("conversion_type") == "Pounds to Grams") {
numOutput.value=numInput.value;
numOutput2.value=(453.592*numInput.value);
var x = document.getElementById("grams").label;
document.getElementById("result1").innerHTML = "Pounds";
document.getElementById("result2").innerHTML = "Grams";
}
}
function getSelectedUnitToConvert(elementId) {
var elt = document.getElementById(elementId);
if (elt.selectedIndex == -1) {
return null;
}
return elt.options[elt.selectedIndex].text;
}
div {
margin: 5px;
}
<form>
<fieldset>
<label id="enter">Value to Convert</label>
<p><input type="number" placeholder="Enter Value" value="" id="numInput" /></p>
</fieldset>
<fieldset><label>Units for Conversion</label>
<p><select id="conversion_type" size="3">
<option id="feet" name="Miles to Feet">Miles to Feet</option>
<option id="fahrenheit" name="Celcius to Fahrenheit">Celcius to Fahrenheit</option>
<option id="grams" name="Pounds to Grams">Pounds to Grams</option>
</select></p>
</fieldset>
<fieldset>
<button type="button" id="mybutton" value="" onclick="convert_unit();">Convert</button>
</fieldset>
<fieldset><label id="results">Conversion Result:</label>
<p>
<div>
<input placeholder="Original Value" name="to_unit" id="numOutput" readonly />
<label id="result1"></label>
</div>
<div>
<input placeholder="Conversion Result" name="to_unit2" id="numOutput2" readonly />
<label id="result2"></label>
</div>
</p>
</fieldset>
</form>

getting values to populate a text instead of the span

I have pieced together a script that adds the values in text boxes and displays the sums in a span. I have tried a ton of things, but I can not get it to display the sums in a input textbox. Here is a fiddle that I have been working in ..
http://jsfiddle.net/elevationprint/MaK2k/17/
Basically I want to change the spans to input text boxes. If anyone can take a look and let me know what I am missing, I would appreciate it!
The code is this
HTML
Red<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br>
Blue<br>
12x12<input class="qty12" value="" /><br/>
12x24<input class="qty24" value="" /><br>
<br><br>
Total = <span class="qty12lable"></span> x $.95<br>
Total = <span class="qty24lable"></span> x $1.40<br>
SCRIPT
$('.qty12').keyup(function(){
var qty12Sum=0;
$('.qty12').each(function(){
if (this.value != "")
qty12Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty12lable").text(qty12Sum);
//console.log(amountSum); });
$('.qty24').keyup(function(){
var qty24Sum=0;
$('.qty24').each(function(){
if (this.value != "")
qty24Sum+=parseInt(this.value);
});
// alert('foo');
$(".qty24lable").text(qty24Sum);
//console.log(amountSum); });
You can target the input fields like so:
Total = <input class="qty12lable" value=""> x $.95<br>
Total = <input class="qty24lable" value=""> x $1.40<br>
$("input.qty12lable").val(qty12Sum);
$("input.qty24lable").val(qty24Sum);
To set the text (value) of a textbox you have to use .val() not .text(). Like this:
$('.qty12').keyup(function() {
var qty12Sum = 0;
$('.qty12').each(function() {
if (this.value != "")
qty12Sum += parseInt(this.value);
});
$(".qty12lable").val(qty12Sum);
});
$('.qty24').keyup(function() {
var qty24Sum = 0;
$('.qty24').each(function() {
if (this.value != "")
qty24Sum += parseInt(this.value);
});
$(".qty24lable").val(qty24Sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Red
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>Blue
<br>12x12
<input class="qty12" value="" />
<br/>12x24
<input class="qty24" value="" />
<br>
<br>
<br>Total = <input class="qty12lable"/> x $.95
<br>Total = <input class="qty24lable"/> x $1.40
<br>
This snippet has some logic about how you can attach event listeners on input fields and how you can get their values. It's not perfect and has quite a few bugs from production level perspective but this will give a hint about how you can listen and manipulate DOM using Jquery. Which is what Jquery is all about.
$( "input" )
.change(function () {
var prevVal = ($('#total').html() !== '') ? $('#total').html() : 0;
if(parseInt($(this).val()) === NaN) {
return;
}
$('#total').html(parseInt($(this).val()) + parseInt(prevVal));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="1"></input><br>
<input type="text" id="2"></input><br>
<hr>
Total = <span id="total" class="qty12lable"></span> <br>

Javascript: How to check if each input value is duplicated to another input value

So i have a dynamic input field came from append with different class name and names, i want to check each of input field value already exist or duplicate.
This would look like
The first criteria_name is default and the others are appendend.
<input type="text" name="criteria_name" class="criteria_name">
<input type="text" name="criteria_name2" class="criteria_name2">
<input type="text" name="criteria_name3" class="criteria_name3">
<input type="text" name="criteria_name4" class="criteria_name4">
<input type="text" name="criteria_name5" class="criteria_name5">
I am trying to check each one of those if there is no duplicated else proceed.
var critname_arr = [];
var input_check;
var crit_name_of_first = $('input.criteriaNames').val();
var acappended = append_crit_header+1;
var count_to = 0;
for(var ab = 2; ab<=acappended; ab++){
var crit_arr;
if(crit_name_of_first == $('input.criteria_each_name'+ab+'').val()){
alert("Criteria cannot be duplicate");
return false;
}else{
input_check = $('input.criteria_each_name'+ab);
input_check.each(function(){
crit_arr = $.trim($(this).val());
});
critname_arr.push(crit_arr);
}
if($('input.criteria_each_name'+ab+'').val() == critname_arr[count_to]){
alert('criteria cannot be duplicate');
return false;
}
count_to++;
}
console.log(critname_arr);
Here is just an example of how you can do it. In the fiddle change one of the values to one that is already in another field (make a duplicate value) to see it do something. If there are no duplicates, it will not do anything. Click the "Button" text to run the duplicate check:
jsFiddle: https://jsfiddle.net/o52gjj0u/
<script>
$(document).ready(function(){
$('.ter').click(function(e) {
var stored = [];
var inputs = $('.criteria_name');
$.each(inputs,function(k,v){
var getVal = $(v).val();
if(stored.indexOf(getVal) != -1)
$(v).fadeOut();
else
stored.push($(v).val());
});
});
});
</script>
<!-- Just use an array name for the input name and same class name as well -->
<div class="ter">Button</div>
<input type="text" name="criteria_name[]" class="criteria_name" value="1" />
<input type="text" name="criteria_name[]" class="criteria_name" value="2" />
<input type="text" name="criteria_name[]" class="criteria_name" value="3" />
<input type="text" name="criteria_name[]" class="criteria_name" value="4" />
<input type="text" name="criteria_name[]" class="criteria_name" value="5" />

Output a radio button in a webpage

I'm trying to input the value of the checked radio button as one of a functions parameres (here sign). This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value=1 id = "N" >north
<input type="radio" name="hem" value=-1 id = "S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), ?? )"> try it </button>
I don't know what to put instead of ?? ? The sign determines if sign is positive or negative.
make input elements as
<form id="demoForm">
first input:<br>
<input id="Y" type="text" value=85>
<br>
second input:<br>
<input id="X" type="text" value=15>
<input type="radio" name="hem" value="1" id="N" >north
<input type="radio" name="hem" value="-1" id ="S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
</form>
<script>
function getRadioVal(form, name) {
var val;
// get list of radio buttons with specified name
var radios = form.elements[name];
// loop through list of radio buttons
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked ) { // radio checked?
val = radios[i].value; // if so, hold its value in val
break; // and break out of for loop
}
}
return val; // return value of checked radio or undefined if none checked
}
var val = getRadioVal( document.getElementById('demoForm'), 'hem' );
alert(val); //you can pass this value as parameter
</script>
The simple way would be to write a helper function to collect your paramters and then call your function from this function.
You could use jQuery to get the value of the checked
$('input[name=hem]:checked').val()
Just need to make sure that the form you're using has an id. Then you wouldn't have to pass to the function just get the value directly from the form in your function.
<script>
function func1 (x,y){
var sign = $('input[name=hem]:checked').val();
var z=(x+y)*sign;
document.getElementById("Z").innerHTML = z;
}
</script>
<!DOCTYPE html>
<html>
<head>
<!--
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
-->
</head>
<body>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value="1" id="N" >north</input>
<input type="radio" name="hem" value="-1" id="S" >south </input>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), getAppropriateValue() )"> try it </button>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").value = z;
}
function getAppropriateValue(){
var result = 0;
var checkboxN = document.getElementById('N');
var checkboxS = document.getElementById('S');
if(checkboxN && checkboxN.checked) result = 1;
if(checkboxS && checkboxS.checked) result = -1;
return result;
}
</script>
You can entirely take off third param and can output sign based on radio checked property.
<script>
function func1 (x,y) {
var z=(x+y);
if(document.getElementById("N").checked) {
z= z*1;
}elseif(document.getElementById("N").checked) {
z=z*-1;
}
document.getElementById("Z").value = z;
}
</script>

javascript if text box element is blank do different action

Trying to get this search form to do different searches but if the search box is empty, I want it to default to a different page. This is with the first else if. Even with the text box empty it keeps defaulting to the first action.
<script type="text/javascript">
function changeAction() {
if(document.getElementById('searchOption').value == "title" && document.getElementById('searchText').value!=null) {
document.getElementById('searchForm').action = 'catalog.com=0&term=' + escape(document.getElementById('searchText').value);
}
**else if(document.getElementById('searchOption').value == "title" && document.getElementById('searchText').value===null) {
document.action = 'differentPage.com'
}**
else if(document.getElementById('searchOption').value == "keyword") {
document.getElementById('searchForm').action = 'catalog.com?keyword=' + escape(document.getElementById('searchText').value);
}
else{
document.getElementById('searchForm').action = "mysite.com/searchResults.html";
$('#searchForm').attr('method', 'get');
$('#searchText').attr('name', 'q');
}
}
</script>
<form id="searchForm" name=search method=post>
<div class="subscribe">
<div class="text">
<input name="term" type="text" id="searchText"/>
</div>
<select id="searchOption" name="searchOption" title="search">
<option name="index" value="title" selected="selected">TITLE IN CATALOG</option>
<option name="index" value="keyword" type="hidden">CATALOG KEYWORD</option>
<option name="nothing" value="googleSearch" type="hidden">LIBRARY WEBSITE</option>
</select>
<!-- for google search appliance -->
<input value="slco_pub" name="client" type="hidden">
<input value="slco_pub" name="proxystylesheet" type="hidden">
<input value="xml_no_dtd" name="output" type="hidden">
<input value="mainSite" name="site" type="hidden">
<!-- end of necessary for google search appliance -->
<!-- for ILS -->
<INPUT name=menu value=search type=hidden>
<INPUT name=aspect value=basic_search type=hidden>
<INPUT name=profile value=maincentral type=hidden>
<!-- Left from old <INPUT name=index value=".TW" type=hidden> -->
<INPUT name=index value="PALLTI" type=hidden>
<!-- end of necessary for google search appliance-->
<!--Button Graphic-->
<input type="image" src="/sebin/m/p/btn-search.gif" alt="search button" onClick="changeAction();" />
</div>
</form>
document.getElementById('searchText').value!=null is using loose comparison, so it will be true if the value is null or undefined. In this case, it will always be a string. What you want to test is whether it is a non-empty string, like so:
var option = document.getElementById('searchOption').value,
text = document.getElementById('searchText').value,
form = document.getElementById('searchForm');
if (option === "title" && text.length > 0) {
form.action = 'catalog.com=0&term=' + escape(text);
}
else if (option === "title" && text.length === 0) {
form.action = 'differentPage.com'
}
else if (option === "keyword") {
form.action = 'catalog.com?keyword=' + escape(text);
}
else {
form.action = "mysite.com/searchResults.html";
$('#searchForm').attr('method', 'get');
$('#searchText').attr('name', 'q');
}
Note that I've used strict comparison.

Categories

Resources