How to get input text value in javascript - javascript

I want to output a manipulated input value of a text type input tag, but it seems to be harder than I thought it will be. I don't want to use alert or console.log kind of outputting, but appending to the page as new content. Here I didn't manipulate the input, since I'm not even able to output it, which is my first goal then.
my html code for the corresponding part is:
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
and here is the full javascript. I linked it at the end of the html before the closing body tag, after a jquery-1.12.2.min.js linking.
/*global $, jQuery, alert*/
$(document).ready(function () {
"use strict";
var inPuttext = document.getElementById("iPf").innerHTML;
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
appendOutput(outPutfield, inPuttext);
});
});
I can't figure out why it doesn't work. When I click the send button the only thing happens is that the "output" disappears from the #oPf div.

Use value property not innerHTML to get value from input element.
Get the value in click handler to get updated value.
$(document).ready(function() {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function() {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>
But, If you are using jQuery:
$(document).ready(function() {
"use strict";
$('#sendd').click(function() {
$('#oPf').html($("#iPf").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try this:
use .value to get entered value of input box.
get value inside calling function so that you can get entered value in inputbox
$(document).ready(function () {
"use strict";
function appendOutput(where, what) {
where.innerHTML = what;
};
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value; // use .value to get entered value of input box , get value inside calling function so that you can get entered value in inputbox
var outPutfield = document.getElementById("oPf");
appendOutput(outPutfield, inPuttext);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Try $("#oPf").html($("#iPf").val());
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
Refer : Js Fiddle
$('#sendd').click(function() {
$("#oPf").html($("#iPf").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="middle topic">
<div id="inputnav">
<button id="sendd">SEND</button>
</div>
<input type="text" value="" id="iPf">
<div id="oPf">
output
</div>
</div>

Just add this, you will get output in output div.
HTML UPDATE
<div id="inputnav">
<button id="sendd" onClick="fn()">SEND</button>
</div>
JAVASCRIPT UPDATE
function fn(){
var inPuttext = document.getElementById("iPf").value;
document.getElementById("oPf").innerHTML = inPuttext;
}

inPuttext should be
var inPuttext =document.getElementById("iPf").value
above code should come inside the click event.because we need to get the input value after it entered.My answer as follows
$(document).ready(function () {
"use strict";
var outPutfield = document.getElementById("oPf");
function appendOutput(where, what) {
console.log(what);
where.innerHTML = what;
}
;
$('#sendd').click(function () {
var inPuttext = document.getElementById("iPf").value;
appendOutput(outPutfield, inPuttext);
console.log('asd');
});
});

Related

Selecting current html div and appending to list n amount of times using jQuery

I have written a script that allows a user to add user input into a sample analysis and to add additional samples with a button id="addsmplbtn". However it has come to my attention that in some cases a user would want to fill in one sample and then multiply it for various samples that require the same analyses an n amount of times.
The script below is a very simple version of the actual script. Adding various samples one-by-one is achieved, however I am struggling with adding multiple samples at the same time:
var variable = 1;
$("#addsmplbtn").click(function() {
var element = $(".samplesinfo.hidden").clone(true);
element.removeClass("hidden").appendTo(".paste:last");
$(".panel").hide();
});
$(document).ready(function() {
$("#samplebtn").click(function(){
$(this).next(".panel").slideToggle();
});
$("#addsmplbtn").trigger("click");
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="addsmplbtn">Add Sample</button>
<div id="samplesinfo" class="samplesinfo hidden">
<button type="button" id="samplebtn" class="samplebtn"></i>Sample</button>
<div class="panel">
<input type="text" name="input1">Input1
<input type="text" name="input2">Input2
<select>
<option value=""></option>
<option>Option1</option>
<option>Option2</option>
</select>
<input type="checkbox" name="checkbox">Check1
<input type="checkbox" name="checkbox">Check2
<input type="text" name="batch_count" id="batch_count" placeholder="enter batch count">
<button type="button" id="add_batch" class="add_batch">Add batch samples</button>
</div>
</div>
<form>
<div>
<h3>No hidden content</h3>
</div>
<div id="paste" class="paste">
</div>
</form>
The following section is the jQuery I am struggling with, to select a single sample, fill in <input> and then to append that element an n amount of times:
$("#add_batch").on("click", function() {
var times = $(this).current("#batch_count").val();
for(var i=0; i < times; i++) {
$(this).current("#add_batch").click(function() {
var element = $(this).current(".samplesinfo").clone(true);
element.appendTo(".paste:last");
$(".panel").hide();
});
}
});
Can anybody please help me adjust the code so that it could achieve my goal?
function addSample(source, target, howMany) {
for(var i=0; i < howMany; i++) {
console.log("adding "+$(source).attr("id")+" to "+target);
var element = $(source).clone(true);
element.removeClass("hidden").appendTo(target);
$(".panel").hide();
}
}
function getInputValue(sender, inputName) {
return $(sender).parent().children('input[name="'+inputName+'"]').val();
}
$("#addsmplbtn").click(function() {
addSample($("#samplesinfo"), $(".paste:last"), 1);
});
$(document).ready(function() {
$("#samplebtn").click(function(){
$(this).next(".panel").slideToggle();
});
addSample($("#samplesinfo"), $(".paste:last"), 1);
});
$("#add_batch").on("click", function() {
var times = getInputValue(this, "batch_count");
addSample($(this).parent().parent().get(0), $(".paste:last"), times);
});
Please don't use the same id attribute on multiple elements. This causes many problems.
This fiddle can be a possible solution.
Never use multiple id-s on HTML elements, this is what classes for!
Use:
$(document).on('{event}', '{selector}', function(){})
on dynamically added elements.
// Add sample click event listener
$(document).on('click', '#add-sample', function() {
var element = $(".samples-info.hidden").clone(true);
element.removeClass("hidden").appendTo(".paste:last");
$(".panel").hide();
});
// Add batch click event listener
$(document).on('click', ".add_batch", function() {
var times = $(this).siblings('.batch_count').val();
var element = $(".samples-info.hidden").clone(true);
for(var i=0; i < times; i++) {
$(".paste:last").append("<div class='.samples-info'>" + element.html() + "</div>");
}
$(".panel").hide();
});
// Toggling the sample's panel
$(document).on('click', '.sample-btn', function() {
$(this).next(".panel").slideToggle();
});
$(document).ready(function() {
// Triggering the first sample on ready
$("#add-sample").trigger("click");
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add-sample">Add Sample</button>
<div class="samples-info hidden">
<button type="button" id="sample-btn" class="sample-btn">
Sample
</button>
<div class="panel">
<input type="text" name="input1">Input1
<input type="text" name="input2">Input2
<select>
<option value=""></option>
<option>Option1</option>
<option>Option2</option>
</select>
<input type="checkbox" name="checkbox">Check1
<input type="checkbox" name="checkbox">Check2
<input type="text" class="batch_count" placeholder="enter batch count">
<button type="button" class="add_batch" class="add_batch">
Add batch samples
</button>
</div>
</div>
<form>
<div>
<h3>No hidden content</h3>
</div>
<div id="paste" class="paste">
</div>
</form>

Refactoring keyup function

I'm trying to make a form previewer.
The idea is to make a layer that shows user info printed on a div by default, but with the possibility of modifying their data in real time and show it in the box.
My code works, but I don't know how to simplify it.
Here's my code:
function preview() {
$('#previewName').html($('#Name').val());
$('#Name').keyup(function () {
$('#previewName').html($(this).val());
});
$('#previewDirection').html($('#Direction').val());
$('#Direction').keyup(function () {
$('#previewDirection').html($(this).val());
});
$('#previewPostal').html($('#Postal').val());
$('#Postal').keyup(function () {
$('#previewPostal').html($(this).val());
});
$('#previewCountry').html($('#Country option:selected').text());
$('#Country option:selected').change(function () {
$('#previewCountry').text($(this).text());
});
}
<form id="form">
<div>
<div>
<label>Name</label>
<input type="text" id="Name" name="Name" value="">
</div>
<div>
<label>Direction</label>
<input type="text" id="Direction" name="Direction">
</div>
<div>
<label>Postal</label>
<input type="text" id="Postal" name="Postal">
</div>
<div>
<label>Country</label>
<div>
<select name="Country" id="Country">
<option value="">x</option>
<option value="">y</option>
</select>
</div>
</div>
</div>
<div>
<div class="box">
<p class="strong" id="previewName"></p>
<p class="mb0" id="previewDirection"></p>
<p id="previewPostal"></p>
<p id="previewCountry"></p>
</div>
</div>
</form>
Any idea?
You can simplify this by querying the form input elements and using the id and value to update the preview.
// cache form selector
var form = $('#form');
// cache all form input elements
var inputs = form.find('input');
// cache all form select elements
var selects = form.find('select');
inputs.keyup(function(){
var id = this.id,
value = this.value;
$('#preview' + id).html(value);
});
selects.change(function(){
var id = this.id,
option = $(this).find('option:selected'),
value = option.val();
$('#preview' + id).html(value);
});
or a condensed version
$('#form input').keyup(function(){
var id = this.id,
value = this.value;
$('#preview' + id).html(value);
});
$('#form select').change(function(){
var id = this.id,
option = $(this).find('option:selected'),
value = option.val();
$('#preview' + id).html(value);
});
Demo

how to call a javascript function whenever an html code loads

function addMore() {
$("<div>").load("m_text.php", function() {
$("#product").append($(this).html());
});
}
the below html code with flate_rate function is in m_text.php
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/ onkeyup="flat_rate()"></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
<script type="text/javascript">
function flat_rate(){
var salable_area = document.getElementById("isalable_area[]");
var flat_area = document.getElementById("iflat_area[]");
var flat_cost=[];
var i=0;
flat_cost[0] = salable_area.value*flat_area.value;
alert( flat_cost[0]);
document.getElementById("iflat_cost[]").value=(flat_cost[0]);
}
</script>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
this code works properly when the html code runs first time. when user click on add more button this html code loads again at that time the calaculated value doesnt appear in flat cost .
If i use class instead of id then it shows NaN in output.
please help me. thank you
According to your example code, you can try this:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
function addMore() {
$("#product").append($("div.block").html());
}
</script>
<div id="product">
<div class="block">
<div class="input">
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
</div>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
</div>
</div>
<script>
$("#product").on('keyup', "[name='flat_rate[]']", function(){
var salable_area = $(this).parents("div.input").find("[name='saleable_area[]']");
var flat_area = $(this);
var flat_cost=0;
flat_cost = salable_area.val()*flat_area.val();
alert( flat_cost);
$(this).parents("div.input").find("[name='flat_cost[]']").val(flat_cost);
});
</script>
If you want to load file, you can take <div class="block">...</div> block to your file, then modify the add-more function:
$.get( "m_text.php", function( data ) {
$("#product").append(data);
});

jquery form not printing input

Found a nice website for an alternative to using /forms in share point. My code below though does not print my input to the screen. Any Suggestions.
<script type="text/javascript">
function printvalues()
{
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">
Generate!
</button>
<div id="divId">
</div>
There's two issues with your code.
First, you're missing a closing </div> tag; and you have two <div> elements with the same id property! I think you should remove the first div's id property.
Second, your <input /> is missing the id property, therefore it's not automatically defined by inputobj1.
Try this markup:
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += document.getElementById("inputobj1").value;
}
</script>
<div>
username: <input id="inputobj1" name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="printvalues();">Generate!</button>
<div id="divId"></div>
</div>
Here's a working jsFiddle.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
</script>
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button" onclick ="javascript:printvalues();">
Generate!
</button>
<div id="divId"></div>
</div>
or
<div id="divId2">
username: <input name="inputobj1" value="" />
<button id="idButton" type="button">
Generate!
</button>
<div id="divId"></div>
</div>
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "test";
div.innerHTML += inputobj1.value;
}
$('#idButton').click(function(){
printvalues()
})
</script>
You had 2 divId's as well, i made an assumption on witch on to use
this doesnst work because you have two div with id="idButton" and your markup is not closed
this may also work as you tagged jquery
function printvalues() {
var value = $('input[name="inputobj1"]').val();
var $div = $('<div>',{text:value});
$('#divId').append($div);
}
or using the divId div
function printvalues() {
var value = $('input[name="inputobj1"]').val();
$('#divId').text(value);
}

Cannot display variable value after retrieve from URL in Javascript

i'm new in javascript and i've a problem with my script. i'm trying to display a variable named ideal to id called weight after retrieved data from URL, but it didn't work.
can anyone help me with this problem, i'm really appreciate it...
here is the javascript code
<script>
function formSubmit()
{
document.getElementById("frm1").submit();
var x = document.getElementById("frm1");
}
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var first = getUrlVars()["height"];
if(first<100){
alert("Sorry, your height is not available");
}else{
var ideal = ((first-100)-(0.1*(first-100)));
//alert(ideal);
}
function update(){
document.getElementById("weight").innerHTML=ideal;
}
</script>
</head>
and here is the HTML
<!-- <div id="pg1" data-role="page">
<div data-role="content" style="background-color: whitesmoke; height: 480px;">
<div class="ui-grid-b">
<div class="ui-block-a"></div>
<div class="ui-block-b" style="padding-top: 100px;">
<center> <h1></h1></center>
<center><h4></h4></center>
<form id="frm1">
<label for="txt_val"></label>
<input type="text" name="height" id="txt_val" value="" placeholder="160.5" required/>
<center></center>
<p id="weight" onclick="update()"></p>
</form>
</div>
<div class="ui-block-c"></div>
</div>
</div> -->
Well, where you are defining your variable ideal is in a local scope that can not be adapted to your function update.
You can define it just after the global variable first and give it value at your current place.

Categories

Resources